@TOC
小程序组件封装
- 先码为敬
- 可能会遇到的问题
怎么给组件添加点击事件？
外面写的样式在组件里面不起作用 - 可能遇到的坑
- 关于优化
这里以封装的伪造表单的组件为例
需求场景：
当用户点击了抽奖/免单/砍价/拼团之类的按钮， 我们希望通过小程序发消息给用户， 而不仅仅只是站内信
于是就需要我们自己在原先的按钮上加一层小程序自带的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
总结一下就是：
- 在组件的wxml中绑定事件 调用组件内的方法
- 组件内的方法再将事件发送给调用组件的页面
- 在页面内使用组件的时候通过 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" />
总结一下就是
- 在组件的js中开启 externalClasses
- 绑定调用页面传来的接受类名的键名(my-class)
<custom-component my-class="red-text"/>
- 在组件中使用 (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中注入 可以避免其他地方的引用需要重新注入的问题
- 组件自己的方法用下划线开头，避免污染
- 复用多的东西， 劲量组件化， 改起来方便
- 如果差异性很高的， 请不要用组件， 简直就是噩梦 ！！！
