微信小程序开发之组件设计规范

2024-10-01 05:47:13

微信小程序组件设计规范

组件化开发的思想贯穿着我开发设计过程的始终。在过去很长一段时间里，我都受益于这种思想。

组件可复用 - 减少了重复代码量
组件做为抽离的功能单元 - 方便维护
组件作为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
      })
    }
}

参考文档

微信小程序--页面与组件之间如何进行信息传递和函数调用

微信小程序--关于加快小程序开发的几个小建议

总结

到此这篇关于微信小程序开发之组件设计规范的文章就介绍到这了,更多相关微信小程序组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序（十）swiper组件详细介绍

Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml  <swiper indicator-dot
微信小程序实现图片预加载组件

网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.
微信小程序 Button 组件详解及简单实例

微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名类型默认值说明 size String default 有效值default, mini type String default 按钮的样
微信小程序picker组件下拉框选择input输入框的实例

微信小程序picker组件下拉框选择input输入框的实例实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
微信小程序（十四）button组件详细介绍

button按钮用的算是最普遍的组件之一. 主要属性: wxml  <button type="defaule" bindtap="clickButton">Defalut</button>  <button type="primary" disabled="true" loading=
微信小程序倒计时组件实现代码

功能: 适用于电商应用的限时团购.商品秒杀等先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second
微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml  <swiper class="swiper" indicator-dots="t
微信小程序 radio单选框组件详解及实例代码

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成属性名类型默认值说明 bindchange EventHandle radio-g
详解如何在微信小程序开发中正确的使用vant ui组件

微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr
微信小程序 Image组件实例详解

image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. aspectFill 保持纵横比缩放图片,只保证图片