【uni-app】 笔记

一、目录结构

1. manifest.json ：配置 App 和 小程序
2. pages.json：配置导航、路由、tabbar
3. main.js ：vue 初始化文件
4. App.vue：全局的样式、属性、方法配置、
5. static：静态资源、字体、图标
6. pages：存放页面
7. components：公共组件
8. common：公共样式

二. 去掉 H5 网页的标题

1. 编译到不同平台进行处理

{
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "乐居-首页",
        "enablePullDownRefresh": false,
        // h5 端
        "h5": {
          // 关闭标题
          "titleNView": false
        }
      }
}

2. 自定义导航栏

1. 通过 navigationStyle 属性值 custom 去掉默认导航栏

{
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "乐居-首页",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
}

2. 通过 uni.getSystemInfo 方法，statusBarHeight 属性获取不同设备的状态栏的高度

uni.getSystemInfo({
		// success 成功回调
        success(res) {
          // 把状态栏的高度给 h 赋值
          _that.h = res.statusBarHeight
        }
})

3. 给最外层的盒子 padding-top 属性赋值，把里面的内容顶下来，这样导航栏就不会被状态栏盖住了

 <view :style="{paddingTop: h+'px'}">
 	内容   
 </view>

二、条件编译

可以通过条件编译，根据不同设备执行不同的代码

支持的文件

• .vue
• .js
• .css
• pages.json
• 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

1. ifdef 仅在某平台执行

// 因为该参数在 H5 中没有，会报错
// 只在微信小程序中执行	MP-WEIXIN
// #ifdef MP-WEIXIN
      // 获取小程序胶囊的盒子参数
      let menu = uni.getMenuButtonBoundingClientRect()
      console.log(uni.getMenuButtonBoundingClientRect());
      this.h = menu.top + menu.height
// #endif

2. ifndef 除了某平台，其他均存在

// 除了微信小程序中不执行，其他平台都执行	MP-WEIXIN
// #ifndef MP-WEIXIN
      // 获取小程序胶囊的盒子参数
      let menu = uni.getMenuButtonBoundingClientRect()
      console.log(uni.getMenuButtonBoundingClientRect());
      this.h = menu.top + menu.height
// #endif

三、生命周期

1. onload （页面加载触发）

1. 二级页面返回该页面时不会触发，第一次进入或刷新页面会触发，一个页面只会调用一次
2. 通过路由传参的值，通过 onload(options) 里面的 options 是个对象，路由传递的参数都在这个对象里面

作用：一般页面初始化的时候用来发送请求和拿到路由传递的参数

2. onshow （页面显示触发）

1. 页面显示了就会触发，会重新加载数据

作用：一般用于二级页面修改数据后，返回主页面时候重新加载数据

四、注意

1. v-model

在 uni 中只适合输入框的绑定，其他组件库除外

五、插件

使用插件之前可以搜索，easycom 有的话就可以直接使用，不需要导入

1. 地址三级联动

组件名：simple-address

文档：https://ext.dcloud.net.cn/plugin?id=1084

2. icon 图标

文档：https://ext.dcloud.net.cn/plugin?id=28

3. 多选框

文档：https://ext.dcloud.net.cn/plugin?id=1236