uniapp 基础学习

《uniapp》学习笔记

框架基础

推荐B站教学视频

B站资源

mvc与mvvm思想

M：model模型层，数据的增删改查
V：view视图层，前端页面（html/js/css）

C：controller 控制层，处理业务

<template>
</template> # 页面代码
<script>
//# VM：协调者
export default {
   // Model:所有数据
   data() {
       return {
           title: 'Hello World'
       }
   },
   onLoad() {

   },
   methods: {
      // 方法位置
   }
}
</script> 
<style> </style> # 样式

项目结构和文件类型

components 组件库

pages 页面（pages/index/index.vue）

pages.json就是路由的处

{
  "pages": [ //pages数组中第一项表示应用启动页，
 // 参考：https://uniapp.dcloud.io/collocation/pages
      {
          "path": "pages/index/index",
          "style": {
              "navigationBarTitleText": "uni-app"
          }
      }
  ],
 // 全局配置项目
  "globalStyle": {
      "navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
      "navigationBarTitleText": "uni-app", // 导航栏标题文字内容
      "navigationBarBackgroundColor": "#F8F8F8",// 导航栏背景颜色（同状态栏背景色）
      "backgroundColor": "#F8F8F8", //下拉显示出来的窗口的背景色
     "backgroundTextStyle": "dark", // 下拉 loading 的样式，仅支持 dark / light
     "enablePullDownRefresh": false // 是否开启下拉刷新，详见页面生命周期。
     "titleImage": "", // 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址
     "pageOrientation": "auto" //横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化
 }
}

static 静态文件存放位置，通常是图片

unpackage 打包文件路径 dist

app.vue 全局类容模板如果在此处定义一些样式，函数等，全局均可使用

main.js 项目入口文件，可用于定于全局变量等

mainfest.json 项目配置文件

基础配置（应用标识，应用名称，应用描述，应用版本号）
App图标配置：1024*1024（IOS）
App启动配置：启动界面选项等
App SDK配置：第三方应用程序
App模块权限配置：
H5配置：
微信小程序配置：AppID（微信公众平台申请）
全局标题与页面标题

全局样式与页面样式

App的生命周期
onLaunch uniapp初始化完成时出发（全局只出发一次）
onShow uniapp启动，或从后台进入前台显示
onHide uniapp从前台进入后台
onUniNViewMessage 对nvue页面发送的数据进行监听
页面的生命周期
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnlaod 监听页面卸载
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
onReachBotton 页面上拉触底时间的处理函数
onShareAppMessage 用户点击右上角分享
onPageScroll 监听页面滚动，参数为Object
onNavigationBarButtonTap 监听原生标题按钮点击时间，参数为Object

onBackPress 监听页面返回

// 页面回退功能
<navigator url="../hello/hello" open-type="navigateBack>
// open-type="navigateBack 调用微信接口返回index/index页面的接口
</navigator>

CSS样式

rpx 可以根据屏幕宽度进行自适应，规定屏幕宽度为750px

upx 基准宽度的单位

数据绑定与事件

v-bind:组件的属性名 ====》缩写 :

事件：用户与App发生的交互动作

<template>
<view>
   <input 
   class="green" 
   type="text" 
   @blur="blur" 
   @input="change" 
   @focus="focus"
   @confirm="confirm"
   @tap="tap"
   @click="click"
   @longpress="longpress"
   @longtap="longtap"
   @touchstart="touchstart"
   @touchmove="touchmove"
   @touchend="touchend"
   @touchcancel="touchcancel"
   style="width: 750upx;height: 750upx;">
</view>
</template>

#### 条件渲染
- v-if 
- v-show
- v-else-if v-else
#### 列表渲染
- 数组
- 对象
- 数组对象

v-for 用于数组循环可以多层循环
不换行循环元素
:key="item.id" 捆绑id，如果不捆绑的话，类似复选框就会被顶替掉

### 组件中的动态与静态变量
#### 编译环境变量  提交编译

    <view>只在H5编译</view>
    <!-- #endif -->

    <!-- #ifdef APP-PLUS -->
    <view>只在ios/安卓编译</view>
    <!-- #endif -->

    <!-- #ifdef MP -->
    <view>只在小程序(微信、支付宝、百度)编译</view>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <view>只在微信小程序编译</view>
    <!-- #endif -->

### Flex 布局
#### 概念
- flexble box : 弹性盒状的布局
- 容器控制内部元素的布局定位
- CSS3引入的新布局模型
- 伸缩元素，自由填充，自适应
#### 优势
- 可在不同方向排列元素
- 控制元素的排序方向
- 控制元素的对齐方式
- 控制元素之间距离
- 控制单个元素方法与缩放比例
#### 模型
- 水平轴/主轴
- 垂直轴/交叉轴
#### 容器的属性和布局
##### 属性
- flex-direction 设置元素的排列方向

row 从左向右
row-reverse 从右向左
column 从上到下
column-reverse 从下到上

- flex-wrap 使容器内的元素换行

nowrap 不换行元素会被压缩
wrap 换行元素会随着页面的大小进行压缩换行来保证元素宽高不变
wrap-reverse

- justify-content 设置元素在主轴上的对齐方式

/* 设定元素主轴的对齐方式默认左对齐 /
/ justify-content: flex-start; */

/* 设定元素主轴的对齐方式右对齐 /
/ justify-content: flex-end; */

/* 设定元素主轴的对齐方式居中 /
/ justify-content: center; */

/* 设定元素主轴的对齐方式两端对齐，元素之间剩余间隙等距 /
/ justify-content: space-between; */

/* 设定元素主轴的对齐方式元素两边平均等分，最左端和最右端都是1/2距离 /
/justify-content: space-around; */

- align-items 设置元素在交叉轴上的对齐方式

/* 设定交叉轴元素排列  默认 当元素高度未设置，则元素的高度会拉伸至容器高度一致 */
    /* align-items: stretch; */

    /* 设定交叉轴元素排列  在交叉轴向起点位置（向上/向左）对齐 */
    /* align-items: flex-start; */A

    /* 设定交叉轴元素排列   在交叉轴向结束位置（向下/向右）对齐*/
    /* align-items: flex-end; */

    /* 设定交叉轴元素排列   在交叉轴向结束位置（居中）对齐*/
    /* align-items: center; */

    /* 设定交叉轴元素排列  保证每个元素都在同一条线上*/
    align-items: baseline;

- align-content 设置轴线的对齐方式（轴线当做元素） 前提必须定义多根轴线

当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
center: 居中
flex-start: 向左对齐
flex-end: 向右对齐
stretch: 当宽度width没有设置的时候，轴线可以被拉伸
space-between: 两端对齐，元素之间的空白等比切分
space-around: 轴线两边的空白等比切分

- order 用于设置flex容器内部的每个元素的排列顺序，默认是0 排序规则是从小到大
- flex-grow 用于设置元素的放大比例，默认为0  如果是0 则不放大
- flex-shrink 控制元素缩小比例 设置为0的时候，不进行缩放
- flex-basis 设置元素固定或自动空间的占比
- align-self 重写align-items父类属性


- 外部引入样式