微信小程序优化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)
    }
}

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


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杰的记事本

JAVASCRIPT模块化3篇之三:require.js

最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页...

9620
来自专栏脑洞前端

283. 移动零

给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。

8530
来自专栏全栈者

JS基础:Map和Set对象

前置知识: Map和Set对象是在ES6中被引入的,作为一种由 key值标记的数据容器。 Map和Set对象承载的数据元素可以按照插入时的顺序,被迭代遍历。

35420
来自专栏杰的记事本

JAVASCRIPT模块化3篇之二:AMD规范

但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一...

9810
来自专栏iOS小生活

Flutter 中的下拉刷新和上拉加载

在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator,但是没有提供上拉分页加载更多的组件。不过不用担心,在Flutter的L...

64510
来自专栏web秀

JavaScript中浅拷贝和深拷贝的区别和实现

要理解 JavaScript中浅拷贝和深拷贝的区别,首先要明白JavaScript的数据类型。JavaScript有两种数据类型,基础数据类型和引用数据类型。

12020
来自专栏杰的记事本

Javascript模块化3篇之一

随着网站逐渐变成”互联网应用程序“,嵌入网页的Javascript代码越来越庞大,越来越复杂。

5930
来自专栏迈向前端工程师

-JS中级测试 单选 typeof null的结果是什么?

12020
来自专栏杰的记事本

Javascript 严格模式 “use strict”

除了正常运行模式,ECMAscript 5添加了第二种运行模式:“严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件...

5010
来自专栏杰的记事本

vw, vh视窗宽高单位的使用

不过“我看见你”和“我触碰你”是不一样的。正好,机缘巧合,最近又与这两个单位想见。大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。...

28310

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励