@TOC

小程序组件封装

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

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

先码为敬

项目结构

项目结构.png

• 组件内的 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.js
Component({
  /**
   * 组件的属性列表
   */
  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中注入 可以避免其他地方的引用需要重新注入的问题
• 组件自己的方法用下划线开头，避免污染
• 复用多的东西， 劲量组件化， 改起来方便
• 如果差异性很高的， 请不要用组件， 简直就是噩梦 ！！！