文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

微信小程序组件设计规范

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

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

参考文档

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

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

总结

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯