小程序优化之占位组件
小程序越来越“大”。官方出的优化方法也越来越多。
为自定义组件配置占位组件,可以指定该组件不在小程序启动时立即注入,而是等到页面中其他元素渲染完成后才注入。基础库会用占位组件替代组件进行渲染,在该组件注入后再将占位组件替换。
一个自定义组件的占位组件可以是另一个自定义组件或一个内置组件。
配置
页面或自定义组件对应的 JSON 配置中的 componentPlaceholder 字段用于指定占位组件,如:
{
"usingComponents": {
"comp-a": "../comp/compA",
"comp-b": "../comp/compB",
"comp-c": "../comp/compC"
},
"componentPlaceholder": {
"comp-a": "view",
"comp-b": "comp-c"
}
}
该配置表示:
组件 comp-a 的占位组件为内置组件 view
组件 comp-b 的占位组件为自定义组件 comp-c(其路径在 usingComponents 中配置)
假设该配置对应的模板如下:
<button ontap="onTap">显示组件</button>
<comp-a wx-if="{{ visible }}">
<comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>
小程序启动时 visible 为 false,那么只有 button 会被渲染;点击按钮后,this.setData({ visible: true }) 被执行,此时如果 comp-a, comp-b 均不可用,则页面将被渲染为:
<button>显示组件</button>
<view>
<comp-c prop="{{ p }}">text in slot</comp-c>
</view>
comp-a 与 comp-b 准备完成后,页面被替换为:
<button>显示组件</button>
<comp-a>
<comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>
-
支付宝小程序怎么引入js和引用外部字体?支付宝小程序怎么引入js和引用外部字体,这是追格小程序用户经常问到的问题,小编也分享过几篇关于字体引入的文章。
-
uniapp开源小程序富文本组件uniapp开源小程序富文本组件
-
支付宝小程序插件代商家获取会员手机号提示错误code":"40003" 无效的应用授权关系支付宝小程序插件代商家获取会员手机号提示错误code":"40003" 无效的应用授权关系
-
NutUI - 京东风格的轻量级移动端 Vue 组件库NutUI 是京东风格的移动端组件库,使用 Vue 语言来编写可以在 H5,小程序平台上的应用,帮助研发人员提升开发效率,改善开发体验。
-
Taro - 多端统一开发解决方案Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
-
支付宝小程序如何修改账单详情中上方的收款方名称支付宝小程序如何修改支付宝钱包,账单详情中订单金额上方的收款方名称?
暂无评论,抢个沙发...