微信小程序组件设计规范
2024-08-25 06:25:59
微信小程序组件设计规范
组件化开发的思想贯穿着我开发设计过程的始终。在过去很长一段时间里,我都受益于这种思想。
- 组件可复用 - 减少了重复代码量
- 组件做为抽离的功能单元 - 方便维护
- 组件作为
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
})
}
}
参考文档
最新文章
- ASP.NET OWIN OAuth:refresh token的持久化
- 团队项目——编写项目的Spec
- randow()方法
- KnockoutJS 3.X API 第四章 表单绑定(12) selectedOptions、uniqueName绑定
- 作业,备份,存储过程,sqlserver print 语句,输出字符串
- 算法最坏,平均和最佳情况(Worst, Average and Best Cases)-------geeksforgeeks 翻译
- COUNT(*)与COUNT(列名)的区别(转)
- LNMP笔记:更改网站文件和MySQL数据库的存放目录
- Colletion View 简单的备忘
- DOCKER,需要进入生产实践
- 图形用户界面入门:EasyGui - 零基础入门学习Python035
- LLVM安装
- unbtun python tab补全
- js之学习正则表达式
- 基于IPV6的数据包分析(更新拓扑加入了linux主机和抓取133icmp包)(第十三组)
- excle删除重复项的行,自定义删除第几个
- 高级组件——进度条 JProgressBar
- HEVC与VP9之间的对比
- r 随机数
- (原创)拨开迷雾见月明-剖析asio中的proactor模式(一)
热门文章
- JavaSE(一)
- 基于Hive进行数仓建设的资源元数据信息统计:Hive篇
- Spring Cloud Alibaba(1)---入门篇
- 如何快速在odoo中创建自己的菜单
- No_leak(ret2ROP + 低字节改写到syscall)
- RE.从单链表开始的数据结构生活(bushi
- 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作fedora27-18
- lvs 负载均衡 _DR模式 _Python脚本
- 1. chmod命令
- 八戒转世投胎竟然是Java设计模式:桥接模式