微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
类别:编程学习 浏览量:1007
时间:2022-01-25 00:22:14 微信小程序开发完整操作流程
微信小程序开发之组件设计规范微信小程序组件设计规范
组件化开发的思想贯穿着我开发设计过程的始终。在过去很长一段时间里,我都受益于这种思想。
- 组件可复用 - 减少了重复代码量
- 组件做为抽离的功能单元 - 方便维护
- 组件作为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 }) } }
参考文档
微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--关于加快小程序开发的几个小建议
总结
到此这篇关于微信小程序开发之组件设计规范的文章就介绍到这了,更多相关微信小程序组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
热门推荐
- docker怎么设置redis(docker安装redis并以配置文件方式启动详解)
- dedecms无缩略图怎么设置(dedecmsV5.7版 tag标签长度的修改方法详解)
- oraclemysql知识点(详解Mysql和Oracle之间的误区)
- dedecms版本介绍(解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法)
- php返回数组值最大的键(PHP实现通过二维数组键值获取一维键名操作示例)
- 使用Visual Studio进行单元测试
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- 服务器和云服务器有什么区别(云服务是什么,和云服务器有啥区别?)
- python迭代列表解析(Python可迭代对象操作示例)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)