微信小程序组件封装-如何进行属性判断

最近开发小程序,对小程序组件封装进行了一定的了解,现在分享下。
个人理解:底层组件封装最好原子化,不带业务逻辑,业务组件后期可以根据底层组件在进行封装开发。尽量做到一次开发,多处使用的效果,解放生产力,提高开发效率。

如果你没有任何小程序开发经验,可以结合官网的同时,参考下这个网站先学习一下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了,传不上来,放几张图片意思下
这里写图片描述
这里写图片描述
这里写图片描述

希望对你有帮助,如果要转载,请注明出处。
如果你有更好的写法,可以留言和我交流下。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值