纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

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

微信小程序组件设计规范

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

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

参考文档

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

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

总结


相关文章

猜您喜欢

  • 微信小程序开发建议 关于加快微信小程序开发的一些小建议

    想了解关于加快微信小程序开发的一些小建议的相关内容吗小の白菜在本文为您仔细讲解微信小程序开发建议的相关知识和一些Code实例欢迎阅读和指正我们先划重点:微信小程序建议使用,微信小程序开发,微信小程序开发建议下面大家一起来学习吧..
  • spring/springboot整合dubbo spring/springboot整合dubbo详细教程

    想了解spring/springboot整合dubbo详细教程的相关内容吗倪畅在本文为您仔细讲解spring/springboot整合dubbo的相关知识和一些Code实例欢迎阅读和指正我们先划重点:spring整合dubbo,springboot整合dubbo下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式