@TOC

小程序组件封装

1. 先码为敬
2. 可能会遇到的问题
   怎么给组件添加点击事件？
   外面写的样式在组件里面不起作用
3. 可能遇到的坑
4. 关于优化

这里以封装的伪造表单的组件为例
需求场景：
当用户点击了抽奖/免单/砍价/拼团之类的按钮， 我们希望通过小程序发消息给用户， 而不仅仅只是站内信
于是就需要我们自己在原先的按钮上加一层小程序自带的form表单， 获取到formId然后传给后台

先码为敬

项目结构

• 组件内的 wxml:

<!--components/formid_btn/formid_btn.wxml--><form catchsubmit='_formSubmit' report-submit='true' catchtap='_hackBubble'>  <button class='formid-btn__btn' formType='submit'>  getFormId  </button></form>

• 组件内的wxss（记得给父节点加 position: relative;）

/* components/formid_btn/formid_btn.wxss */.formid-btn__btn{  opacity: 0;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 50;}

• 组件的js

// components/formid_btn/formid_btn.jsComponent({  /**   * 组件的属性列表   */  properties: {    tempData: {      type: Object,      value: {}    }  },  /**   * 组件的初始数据   */  data: {},  /**   * 组件的方法列表   */  methods: {    _formSubmit: function (e){      // console.warn(e)      // console.log(this.properties.tempData);      e.currentTarget.dataset = this.properties.tempData      this.triggerEvent('next', e)    }  },  _hackBubble: function (e) {  },})

• app.json
  直接放在app.json里面 可以在所有的页面中都使用该组件，而不用单独引入

  "usingComponents": {    "fid-btn": "/components/formid_btn/formid_btn"  },

• 使用：

<view class='btn-inner' wx:if="{{ drawType == 1 }}">  <view>下单购物</view>  <view>即可参与</view>  <fid-btn catch:next="orderTips"></fid-btn></view>

你可能会遇到的坑：

怎么给组件添加点击事件？

• 请使用 triggerEvent 点击前往官方文档
  这玩意儿具体一点儿怎么用呢？OK 一张图说明：
  

  微信小程序组件事件.png

总结一下就是：

1. 在组件的wxml中绑定事件 调用组件内的方法
2. 组件内的方法再将事件发送给调用组件的页面
3. 在页面内使用组件的时候通过 catch绑定接受事件的键名(next)，
   并且绑定回调函数(orderTips)
   

   <fid-btn catch:next="orderTips"></fid-btn>

外面写的样式在组件里面不起作用

是的，组件的样式 要写在组件内的wxss中，外面的样式是不会影响到组件内的样式的(比如 我在app.wxss里面写了一些重置样式， 在组件中是不起作用的，除非你 import进去)

那我就是要在外面加样式怎么办？

也不是不可以 请用 externalClasses 在文档的最下面
eg:

• 组件内的js

/* 组件 custom-component.js */Component({  externalClasses: ['my-class']})

• 组件内的wxml

<!-- 组件 custom-component.wxml --><custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

• 调用组件的页面

<!-- 页面的 WXML --><custom-component my-class="red-text" />

总结一下就是

1. 在组件的js中开启 externalClasses
2. 绑定调用页面传来的接受类名的键名(my-class)
   

   <custom-component my-class="red-text"/>

3. 在组件中使用 (class="my-class") ； 怎么样 是不是有点儿绕

可能遇到的坑

组件内的WXSS中有一些选择器你用不了

    #a { } /* 在组件中不能使用 */    [a] { } /* 在组件中不能使用 */    button { } /* 在组件中不能使用 */    .a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

版本问题

小程序是从基础库 1.6.3 开始支持自定义组件compont的
observers组件数据字段的监听器是从 2.6.1 开始支持的
lifetimes、pageLifetimes、definitionFilter这些是从 2.2.3 开始支持的

关于优化

• 如果可以的话尽量在一个对象中吧值全部穿进去
  比如一个商品的组件模块 里面包括图片 title remark shop_price tag 这些东西,没必要一个一个传
• 在除开使用很少的组件， 其他的组件在app.json中注入 可以避免其他地方的引用需要重新注入的问题
• 组件自己的方法用下划线开头，避免污染
• 复用多的东西， 劲量组件化， 改起来方便
• 如果差异性很高的， 请不要用组件， 简直就是噩梦 ！！！

原著是一个有趣的人,若有侵权,请通知删除