微信小程序开发之组件设计规范
更新时间：2021年05月25日 10:20:12 作者：Kindear
这篇文章主要给大家介绍了关于微信小程序开发之组件设计规范的相关资料，对刚入门学习微信小程序的同学们还是挺有帮助的，需要的朋友可以参考下
微信小程序组件设计规范
组件化开发的思想贯穿着我开发设计过程的始终。在过去很长一段时间里，我都受益于这种思想。
- 组件可复用 - 减少了重复代码量
- 组件做为抽离的功能单元 - 方便维护
- 组件作为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
})
}
}
参考文档
总结
到此这篇关于微信小程序开发之组件设计规范的文章就介绍到这了,更多相关微信小程序组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript中的this是一个非常重要的概念，也是一个令新手开发者甚至有些不深入理解的多年经验开发者都会感到困惑的概念，如果你希望自己能够使用this编写更好的代码或者更好理解他人的代码，就跟随小编一起理解一下this吧2023-07-07
这篇文章主要介绍了JavaScript中实现最高效的数组乱序方法,数组乱序的意思是,把数组内的所有元素排列顺序打乱,需要的朋友可以参考下2014-10-10
这篇文章主要为大家介绍了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家详细介绍了js+html+css实现简单电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
异步操作可能会产生你不希望的事件触发顺序。这个问题以前也遇到过，当时没想太多，也就是直接多层嵌套（在ajax返回以后嵌套下一个事件）来解决。2010-07-07
这篇文章主要介绍了如何利用HTML+CSS+JS编写一个机器人总动员小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了小程序实现多个选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
单击浏览器右上角的X关闭窗口弹出提示的小例子，需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了使用 JavaScript如何获取当月的第一天和最后一天,通过本文学习了如何使用 JavaScript 中的Date.getFullYear()和 Date.getMonth()方法获得某个特定月份的第一天和最后一天，需要的朋友可以参考下2023-05-05
wordpress之js库集合研究介绍...2007-08-08
最新评论