微信小程序优化uni-app

性能优化-渲染性能
减少调用setData频次

change:function() {
 this.setData({a:1});
 this.setData({a:1});
 this.setData({a:1});
},

change: function() {
 this.a=1;
 this.b = 2;
 this.c = 3;
 this.d = 4;
},

减少调用setData数据量

image.png

自定义组件实现局部数据刷新

image.png image.png

性能优化-加载性能
分包加载
快捷创建项目模板，代码块，真机运行，云端打包

开启上传时代码压缩
语法提示，转到定义强过其他工具

资源文件上传cdn
中文符号面干扰，自动补行尾逗号，智能双击

image.png image.png

components
uni-app组件目录

hybrid
存放本地网页的目录

platforms
存放各平台专用页面的目录

wxcomponents
存放小程序组件的目录

main.js
Vue初始化入口文件

App.vue
应用配置，用来配置App全局样式以及监听

manifest.json
配置应用名称、appid、logo、版本等打包信息

pages.json
配置页面路由、导航条、选项卡等页面类信息

onLaunch 当uni-app初始化完成时触发
onShow 当uni-app启动，或从后台进入前台显示
onHide 当uni-app从前台进入后台

css, less/scss等资源同样不要放在static目录下

onUniNViewMessage
对nvue页面发送的数据进行监听

应用生命周期仅在app.vue中监听，在其它页面监听无效
onLaunch里进行页面跳转，如遇到白屏报错

onlaunch生命周期内的NavigateTo跳转页面注意

在onlaunch生命周期内进行页面的跳转，需要注意：可能会和pages.json内配置的第一个页面跳转时机冲突。
造成的错误是手机端页面白屏
此时需要延迟做跳转处理。
在HBuilderX 1.9.9+版本，已在底层修复此问题，自动兼容冲突，无需开发者再写延时代码。

页面生命周期

onLoad
监听页面加载，其参数为上个页面传递的数据，参数类型为Object

onShow
监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

onReady
监听页面初次渲染完成
注意如果渲染速度快，会在页面进入动画完成前触发

onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化

onPullDownRefresh
监听用户下拉动作，一般用于下拉刷新

onReachBottom
页面上拉触底事件的处理函数

onTabItemTap
点击 tab 时触发，参数为Object

onShareAppMessage
用户点击右上角分享

onPageScroll
监听页面滚动，参数为Object

onNavigationBarButtonTap
监听原生标题栏按钮点击事件，参数为Object

onBackPress
监听页面返回

监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack

onNavigationBarSearchInputChanged
监听原生标题栏搜索输入框输入内容变化事件

onNavigationBarSearchInputConfirmed
监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发

onNavigationBarSearchInputClicked
监听原生标题栏搜索输入框点击事件

onPageScroll参数说明：
scrollTop页面在垂直方向已滚动的距离

image.png

onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面，如果是点击不同的tabitem，一定会触发页面切换。

如果想在app端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。

onTabItemTap在App端：

onNavigationBarButtonTap
index Number 原生标题栏按钮数组的下标

onBackPress
from String 触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法。

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

image