前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序优化uni-app

微信小程序优化uni-app

作者头像
达达前端
发布2019-09-19 17:12:33
2.6K0
发布2019-09-19 17:12:33
举报
文章被收录于专栏:达达前端达达前端

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

代码语言:javascript
复制
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() 方法。

代码语言:javascript
复制
export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

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


本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.09.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档