| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 移动开发 -> 原生小程序小话题——按需载入、占位组件、骨架屏 -> 正文阅读 |
|
[移动开发]原生小程序小话题——按需载入、占位组件、骨架屏 |
第一部分 按需加载 通常情况下启动小程序,小程序的页面和包会全部载入,很耗时,对于一些性能不足的机器也不友好(比如我的老手机),这时候可以使用按需加载,就是懒加载,开启懒加载的方式也非常简单,直接在app.json当中添加如下字段就可以了。
按照官网的说法,该页面配置文件中的usingComponents字段中所有的组件,包括app.json中的全局引入的组件都会被加载。 第二部分 用时注入 用时注入前提一定是开启了按需加载,即使主要讲的就是占位组件,这个占位组件其实有点类似于骨架屏,或者react当中的suspense的用法,就是一个在组件加载好之前的placeholder,我们实验一下。 首先肯定是在app.js的页面开启按需加载,开启这个选项之后,每次重新编译的时候,你是可以在调试器的console部分,看到这行字的
然后我们要写一个占位组件,我们这里叫placeholder
很简单,我们还加上了红色字体,生怕组件加载太快,占位组件一闪而过,不太好辨识,随后我们在主要页面的json部分引入你的组件和对应的占位组件,并用如下字段确认这种对应的关系
这段json的意思就是com-test7对应的占位组件就是placeholder,然后我们给com-test7加上一个wx:if和一个button,模拟一下加载状态
其实这com-test7就是上次测试抽象节点使用的组件,点击show,测试是成功的,但是时间太短了,我这里也不好截图什么的,没那个能力,晓得吧。 第三部分 骨架屏 这个部分小程序贴心的把你搞好了,本质上就是引入了一个固定的template,然后通过wx:if来进行控制 生成骨架屏,当然你可以自己写一个,这里我们使用的编辑器自带的生成方式,如下图,点击我画圈的部分 ?然后就会出现生成骨架屏的选项,然后会生成这两个文件 ?实际上骨架屏就是一个页面加css,我们需要将其在主页面,我这边就是page6页面引入,具体引入的方式可以参考一下我前面关于模板的文章,接下来就是通过wx:if去进行控制,给大家看一下我页面的具体写法
?下面的container类其实就是我的正经的主页面,这里的话可以明显的看到骨架屏的显示条件是和真实页面相反的,这个loading是我在data部分设定的一个flag值,初始值是true,当页面准备完成之后就变成了false,其中的操作我们在主页面的onReady的生命周期下执行,当然我怕太快看不清,还加上一个计时器,看一下写法
测试了一下,成功没啥问题。 当然我们官网细心的给了一个project.config.json文件来给你指定一些细节,各位可以到官网上去看一看。 并且骨架屏还是可以分步显示的,但是我觉得分步骨架屏还不如使用占位组件,今天就写到这儿吧。 |
|
移动开发 最新文章 |
Vue3装载axios和element-ui |
android adb cmd |
【xcode】Xcode常用快捷键与技巧 |
Android开发中的线程池使用 |
Java 和 Android 的 Base64 |
Android 测试文字编码格式 |
微信小程序支付 |
安卓权限记录 |
知乎之自动养号 |
【Android Jetpack】DataStore |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 | -2025/2/1 1:53:03- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |