本文整理微信小程序uni-app开发过程中一些知识点、技巧、注意事项等。

pages.json文件设置

文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

配置项列表：

其中，globalStyle(用于设置应用的状态栏、导航条、标题、窗口背景色等。要自定义状态栏、导航条得加”navigationStyle”: “custom”，navigationBarTitleText会被pages下的具体页面的navigationBarTitleText替代，可以用uni.setNavigationBarTitle({ title: ‘标题’ });对每个页面设置标题)、所有独立页面都要在pages数组中定义(抽做公共模块的可以不用定义，自定义顶部样式的要在style加”navigationStyle”: “custom”，下拉刷新的在style要加”enablePullDownRefresh”: true)、tabBar配置底部菜单(当然加”position”:”top”菜单会在顶部显示，最多只能加5个tab，其中pagePath为页面路径、iconPath为未选中图标路径、selectedIconPath为选中图标路径、text为显示名称，这里的图标只能是图片不能用样式图标)、condition其实可以不用配置(官方文档这样描述：为启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面)、其他属性基本不用到。

App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。可以在globalData中定义全局变量，比如在iPhone X及以后的版本底部会出现遮挡问题，可以在onLaunch中加判断是否为这些手机然后在具体页面加处理。

main.js

main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。在这个文件可以引入公共主键、样式(uni-app官方推荐在App.vue中引入公共样式但我发在好像不起作用就直接在main.js中引入)等。

应用生命周期

应用生命周期仅可在App.vue中监听，在其它页面监听无效。uni-app 支持如下应用生命周期函数：

应用生命周期事件在打开小程序时触发，其中onShow在每次打开小程序都触发、onHide在每次关闭小程序都触发。

页面生命周期

uni-app 支持如下页面生命周期函数：

需要注意的是以上事件只在独立页面生效在公共模块是不起作用的，其中比较常用的有，onLoad可以接收上个页面传来的参数、onShow每次打开独立页面都会执行、onReady只在第一次加载页面执行、onHide跟onShow相反每次隐藏页面都会执行、onUnload销毁页面的时候会执行(可以用用于回收释放资源)、onPullDownRefresh页面下拉事件需要在pages.json中pages下具体页面的stye加”enablePullDownRefresh”: true(加uni.showNavigationBarLoading();页面下拉时在导航栏会有加载样式、加uni.stopPullDownRefresh();停止下拉、加uni.hideNavigationBarLoading();隐藏加载样式)，可以根据实际需求在对应的事件加逻辑代码。

组建生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

以上事件在包括公共模块在内的所有页面都起作用。

日志打印

console向控制台打印日志信息，包括log、info、warn、error，如console.log(‘现在是：’, new Date());

定时器

定时器可以起到延迟执行作用，但建议能不用还是不用好，处理不好会造成页面阻塞、浏览器假死，在高并发情况下还会出现数据不一致等问题。主要有以下几个方法，最好自己手动回收定时器。
setTimeout(callback, delay, rest)设定一个定时器。在定时到期以后执行注册的回调函数
clearTimeout(timeoutID)取消由 setTimeout 设置的定时器。
setInterval(callback, delay, rest)设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数
clearInterval(intervalID)取消由 setInterval 设置的定时器。

页面通讯

uni.$emit(eventName,OBJECT)触发全局的自定事件。附加参数都会传给监听器回调。
uni.$on(eventName,callback)监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
uni.$once(eventName,callback)监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
uni.$off([eventName, callback])移除全局自定义事件监听器。
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听。

在公共模块的方法触发执行引用公共模块的页面中的方法，可以先在公共模块的方法加this.$emit(‘方法名’, 参数)，然后在引用页面加对应的方法。

在引用公共模块的页面中调用公共模块的方法，可以先在引用页面加ref=”公共模块名称”并“this.$refs.postVue.公共模块方法名(参数)”来调用公共模块方法。

路由与页面跳转

uni.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch(OBJECT)关闭所有页面，打开到应用内的某个页面。
uni.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
uni.navigateTo带参数跳转也可以跳转到tabBar页面，uni.redirectTo可以传参数但不能跳转到tabBar页面，uni.switchTab在iOS会先返回上一步再返回tab页，uni.reLaunch无法传参数状态栏会出现首页图标而没有返回图标，因此要根据实际情况灵活使用对应的路由方法。

交互反馈

uni.showToast(OBJECT)显示消息提示框。
uni.hideToast()隐藏消息提示框。
uni.showLoading(OBJECT)显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
uni.hideLoading()隐藏 loading 提示框。
uni.showModal(OBJECT)显示模态弹窗，类似于标准 html 的消息框：alert、confirm。
uni.showActionSheet(OBJECT)显示操作菜单

数据缓存

uni.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorageSync(KEY,DATA)将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
uni.getStorage(OBJECT)从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync(KEY)从本地缓存中同步获取指定 key 对应的内容。
uni.getStorageInfo(OBJECT)异步获取当前 storage 的相关信息。
uni.getStorageInfoSync()同步获取当前 storage 的相关信息。
uni.removeStorage(OBJECT)从本地缓存中异步移除指定 key。
uni.removeStorageSync(KEY)从本地缓存中同步移除指定 key。
uni.clearStorage()清理本地数据缓存。
uni.clearStorageSync()同步清理本地数据缓存。
可以用以上方法在客户手机上维护一些数据，需要注意的是，微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB，所以没必要的数据应当及时释放。

更多内容请访问uni-app官网。