最近开发小程序，对小程序组件封装进行了一定的了解，现在分享下。如果你没有任何小程序开发经验，可以结合官网的同时，参考下这个网站先学习一下https://www.w3cschool.cn/weixinapp/
个人理解：底层组件封装最好原子化，不带业务逻辑，业务组件后期可以根据底层组件在进行封装开发。尽量做到一次开发，多处使用的效果，解放生产力，提高开发效率。
下面以轮播图为例，讲下组件的封装：
一 、首先封装组件 创建swiper文件
文章图片
index.json
{
"component": true
}index.js 下面详解
Component({
/**
* 组件的属性列表
*/
properties: {
},
methods: {
}
});
properties一般我们常定义属性，常用写法
properties: {
// 面板指示点
indicatorDots: {
type: Boolean,
value: true
}
}
如果要对属性进行判断，之前我们用vue封装，常这么写
props: {
type: {
validator (value) {
return oneOf(value, ['success', 'info', 'warning', 'error']);
},
default: 'info'
}
}不过小程序，不支持这种写法，会报错，我们可以这么写：
如果写错，会报错误提示：”Error：Not a value in an array”
文章图片
index.wxml 这里的type控制轮播图的类型：是普通轮播图，还是一般我们在商品详情页中看到的那种轮播图
文章图片
methods里写自定义方法，我是这么写的，根据类型进行不同的逻辑判断，如果你只是展示，可以不写这个方法：
methods: {
myTabClicked(e){
switch (this.properties.type){
case 'default':
let {item:item} = e.currentTarget.dataset;
this.triggerEvent('mygourl',item);
//回调方法
break;
case 'detailSwiper':
this.setData({ bigPicFlag: !this.data.bigPicFlag });
break;
default:
break;
}
}
}index.wxss 为了好截图，我放个压缩版的
文章图片
二、页面中调用组件 这样组件就完成了，在页面中直接调用：
文章图片
另外在json中定义：
{
"navigationBarTitleText": "swiper",
"usingComponents": {
"p-swiper": "../../dist/swiper/index"
}
}三、效果为： 本来录屏了，可是超过5M了，传不上来，放几张图片意思下
文章图片
文章图片
文章图片
【移动端|微信小程序组件封装-如何进行属性判断】希望对你有帮助，如果要转载，请注明出处。
如果你有更好的写法，可以留言和我交流下。
推荐阅读
- 前端|[前端项目]微信小程序 小商城
- 微信小程序|uniapp开发微信小程序-软考刷题小程序
- uniapp|uniapp（微信小程序使用高德地图进行坐标反解析获取详细地址）
- 小程序|uniapp-微信小程序-图片转base64
- 微信小程序|uniapp开发微信小程序获取code
- Uni-app|uniapp 小程序中使用逆地址解析 获取当前详细地址
- #|uniapp｜微信小程序获取当前城市名称--逆地址解析
- 掘光者网课题库系统|大学网课搜题查题公众号 内有接口
- 资讯|抖音开放平台，究竟开放了什么（）