微信小程序开发之组件设计规范
作者:Kindear 时间:2024-04-18 09:35:15
微信小程序组件设计规范
组件化开发的思想贯穿着我开发设计过程的始终。在过去很长一段时间里,我都受益于这种思想。
组件可复用 - 减少了重复代码量
组件做为抽离的功能单元 - 方便维护
组件作为template使用,可以方便计算各种属性而不是在wxml引入wxs
在日常的小程序开发组件过程中,我一般会遵循如下几个规则:
1.样式独立 & 依赖独立
在组件开发过程中,组件可以依赖于全局样式,组件在引入时,使用该页面样式和全局样式共同渲染。
options: {
addGlobalClass: true,
multipleSlots: true
}
但是基于组件的可移植性考虑,建议每个组件配置为不依赖于全局样式。
options: {
addGlobalClass: false,
multipleSlots: true
}
选择在每个组件的wxss配置该组件所需的样式。
组件开发过程中,组件可以引入app.js,基于
const app = getApp();
但是基于方便移植的角度考虑,组件中获取全局数据使用storge更为合适。
即使依赖于某些js文件,可将该文件放入组件目录下并引入。
属性值设置 *
组件可以接收页面传入的值,但是组件内数据格式或许不匹配页面展示需求,需要做某些调整,这些调整建议在组件内实现。组件内数据的修改不会影响到页面内数据。
properties: {
active:{
type:Number,
observer:function(newVal,oldVal){
//对数据进行预处理
}
}
}
3.所有使页面栈发生变动的操作都交给页面完成
在A页面内点击组件C会跳转到E页面
在B页面内点击组件C会跳转到F页面
这种情况下可以将点击事件交给页面来处理,组件仅做一个事件通知。具体跳转事件交给页面内函数实现。
组件内使用:
this.triggerEvent('click',args)
页面A:
<c-component bind:click="navtoPageE" />
页面B:
<c-component bind:click="navtoPageF" />
组件内尽量不要嵌套组件
曾在组件中使用一个 loading组件,但是通过参数控制该loading组件展示,出现无法隐藏问题时,无法定位到具体组件。
组件定义统一的class
这是为了方便统一调用组件中某个方法,作为模板使用常使用到该方法。
let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
ele.closeActionBar();
})
使用组件的生命周期
组件支持生命周期,某些只需要初始化一次的数据,或者计数器函数,请在attached内完成
lifetimes:{
attached(){
this.setData({
openid:app.globalData.openid
})
}
}
参考文档
微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--关于加快小程序开发的几个小建议
总结
来源:https://www.cnblogs.com/masterchd/p/14804156.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python重试装饰器示例
JS target与currentTarget区别说明
Python元组常见操作示例
python中编写config文件并及时更新的方法
一文让你快速了解JavaScript栈
![](https://img.aspxhome.com/file/2023/8/132678_0s.png)
VUE3中实现拖拽与缩放自定义看板vue-grid-layout详解
![](https://img.aspxhome.com/file/2023/4/139674_0s.jpg)
调试PHP程序的多种方法介绍
通过实例解析Python RPC实现原理及方法
![](https://img.aspxhome.com/file/2023/7/70177_0s.png)
python基础之for循环
![](https://img.aspxhome.com/file/2023/3/81573_0s.png)
Z-Blog实现摘要图文混排效果的方法
五个小窍门帮你写出更好的CSS代码
Django扫码抽奖平台的配置过程详解
![](https://img.aspxhome.com/file/2023/2/112492_0s.png)
python 美化输出信息的实例
![](https://img.aspxhome.com/file/2023/7/79757_0s.jpg)
python的urllib模块显示下载进度示例
sklearn-SVC实现与类参数详解
关于python的bottle框架跨域请求报错问题的处理方法
![](https://img.aspxhome.com/file/2023/3/94103_0s.png)
JS循环中正确使用async、await的姿势分享
![](https://img.aspxhome.com/file/2023/2/123712_0s.gif)
Python数据获取实现图片数据提取
![](https://img.aspxhome.com/file/2023/4/130984_0s.png)
更改localhost为其他名字的方法
网页模式化窗口
![](/images/sg_trans.gif)