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

时间:2021-05-25 Kindear 人气:0

想了解微信小程序开发之组件设计规范的相关内容吗，Kindear在本文为您仔细讲解微信小程序组件的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：微信小程序组件,小程序官方组件,微信小程序开发，下面大家一起来学习吧。

微信小程序组件设计规范

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

在日常的小程序开发组件过程中，我一般会遵循如下几个规则：

在组件开发过程中，组件可以依赖于全局样式，组件在引入时，使用该页面样式和全局样式共同渲染。

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){
        //对数据进行预处理
      }
    }
}

在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
      })
    }
}

加载全部内容

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