一, 摘要
组件是小程序整个语法中占比比较大的一部分, 没写过组件可以说只懂了半个小程序. 组件提供了类似页面的生命周期与逻辑. 相比于模板, 组件能实现的功能更加全面, 也更为强大. 通过 slot 可以自由扩展组件, 使组件更具有扩展性, 使用起来也不会有太大的局限性. 要说不足之处: 在目前最新的 2.4 版本都不能实现组件的自定义数据. 而且组件的使用还存在着一些 bug.
二, 正文
组件的相关说明官方文档已经写得十分清除, 这里只对写组件的相关技巧进行探讨.
小程序为组件提供了一些配置字段, 在相对于的字段添加自己的代码可以得到一些效果 (实际上大多数 JS 框架都是这样做的). 在 properties 字段下可以添加组件的属性, 这些属性可以在使用组件的时候访问并赋值.
- properties: {
- isShow: {
- type: Boolean,
- value: false,
- observer: function (newVal) {
- this.setData({
- mIsShow: newVal
- });
- }
- },
- title: {
- type: String,
- value: '提示'
- },
- radius: {
- type: String,
- value: '12'
- },
- src: {
- type: String,
- value: ''
- },
- iconWidth: {
- type: String,
- value: '30'
- },
- iconHeight: {
- type: String,
- value: '30'
- },
- iconLeft: {
- type: String,
- value: '610'
- },
- iconTop: {
- type: String,
- value: '25'
- },
- titleColor: {
- type: String,
- value: '#000'
- },
- titleSize: {
- type: String,
- value: '34'
- }
- },
上面给出了一系列的字段, 注意字段需要设置 type 和 value 属性, type 决定了从组件外传进来的参数会已何种数据类型解析. 类如, 如果给 title 字段传入的是数组 title='{{ ["1","2"] }}' , 但是它定义的是 String 类型, 那么就相当于传入的是 title='[1,2]' .
还有一个十分好用的属性, 那就是 observer 属性. 可以看到 isShow 字段给了这个属性. 这个属性是在该字段的值发生变化时候会调用 observer 的回调函数, 因此可以在该函数中进行一些操作. 最常用的就是在 data 字段定义组件的内部变量, 然后在该函数中去改变内部变量, 这样就实现了类似页面中的数据绑定的效果 (实际上 properties 字段下的属性都不是数据绑定的, 也就是在组件外更改变量数值是不会影响到组件内部的模板的).
最后我们来说说 lifetimes 字段, 这个字段里面可以写组件的生命周期函数, 并且会覆盖该字段外的生命中期函数 (实际上可以直接写生命周期函数的, 不过还是建议写在这个字段里面).
- lifetimes: {
- ready: function () {
- let that = this;
- const sysInfo = wx.getSystemInfoSync();
- const query = wx.createSelectorQuery();
- query.in(this).select('.component').boundingClientRect().selectViewport().scrollOffset()
- query.exec(function (res) {
- that.setData({
- top: 0,
- left: 0,
- width: sysInfo.windowWidth,
- height: sysInfo.windowHeight
- });
- });
- },
- },
说明一下: 示例代码是一个完整的自定义模态框组件. 因为模态框需要实现遮罩效果, 但是在小程序中屏幕的宽度是固定为 750rpx, 但是屏幕高度是根据这个固定宽度计算的, 所有会存在不同手机的屏幕高度是不同的 (例如 iPhone6 与 iPhoneX). 所以这里需要动态计算屏幕的宽高 (实际上你也可以设置一个非常大的高度, 使目前市面上所有手机都支持, 但这不是最好的实现方式). 这段代码用到了组件的 ready 生命周期 (因为这里需要访问模板节点, 只有 ready 后才能访问节点). 然后在 ready 函数中去设置 data 字段的 width 和 height. 这个 width 和 height 是与模板进行了数据绑定.
- <view class='component cus animated' hidden='{{ !isShow }}' style='width: {{ width }}px; height: {{ height }}px; top: {{ top }}px; left: {{ left }}px' catchtouchmove='onMove'>
- <view class='body' style='border-radius: {{ radius }}rpx'>
- <image class='image' wx:if='{{ src != undefined && src !="" ? true : false }}'src='{{ src }}'style='width: {{ iconWidth }}rpx; height: {{ iconHeight }}rpx; left: {{ iconLeft }}rpx; top: {{ iconTop }}rpx'catchtap='onTap'></image>
- <view class='image icon-cus' wx:if='{{ src != undefined && src !="" ? false : true }}'src='{{ src }}'style='font-size: {{ iconWidth }}rpx; left: {{ iconLeft }}rpx; top: {{ iconTop }}rpx'catchtap='onTap'></view>
- <text wx:if='{{ title != undefined && title !="" ? true : false }}'style='color: {{ titleColor }}; font-size: {{ titleSize }}rpx;'>{{ title }}</text>
- <view class='content'>
- <slot name='content'></slot>
- </view>
- <slot name='bottom'></slot>
- </view>
- </view>
以上是该组件的模板部分. 这部分很简单, 与写页面没什么区别. 需要注意的是这里可以使用 slot 插槽, 以上代码就使用了两个插槽, 分别是模态框的内容部分和底部. 因为考虑到扩展性, 模态框的内容可能是文字和图片, 所有具体内容需要在使用的时候才能确定. 底部也是如此, 具体几个按钮, 以及什么样式的按钮都是不能立马确定下来的.
我们还可以通过内联样式来动态的自定义组件的外观
style='font-size: {{ iconWidth }}rpx; left: {{ iconLeft }}rpx; top: {{ iconTop }}rpx'
最后我们来看下组件的使用与效果.
- <e-modal isShow='{{ show1 }}'>
- <text slot='content' style='color: #666; font-size: 30rpx'> 确认退出登录吗 </text>
- <e-enhance-view
- bgColor='#fff'
- width='600'
- type='betweenCenter'
- slot='bottom'>
- <e-base-button
- id='cancle'
- text='取消'
- theme='fillingAndGradient2'
- width='285'
- height='60'
- textSize='28'
- color='#FE9036'
- endColor='#FE4E36'
- radius='50'
- catchbuttontap='onModalButtonTap'>
- </e-base-button>
- <e-base-button
- id='ok'
- text='确认'
- theme='fillingAndGradient2'
- width='285'
- height='60'
- textSize='28'
- color='#FE9036'
- endColor='#FE4E36'
- radius='50'
- catchbuttontap='onModalButtonTap'>
- </e-base-button>
- </e-enhance-view>
- </e-modal>
三, 结论
总体来看小程序的组件写起来也是比较简单的, 只要把页面玩熟了, 组件也就水到渠成了. 这里只是简单的总结了组件的使用技巧, 如果还没系统的学习过组件的强烈建议看下官方文档. 关于组件的 bug 也不是很多, 我目前就遇到了一个: 在 navigator 标签中使用组件会出现无法跳转的问题. 后续遇到 bug 会进行补充.
四, 写在最后
最后推荐一个由我开发维护的小程序组件库, 里面封装了开发中常用的组件已经收录了二十余个, 后续还在添加和优化中, 希望各位老铁多多提意见, 也可以提交自己的组件. GitHub 地址: https://github.com/qq865738120/easyUI
来源: https://www.cnblogs.com/code-xia/p/10074790.html