作者:u3xyz,来自授权地址 在做最近的小程序项目时,需要使用到省市县联动选择器。浏览了一下小程组件,发现没有直接提供这种组件,比较相近的picker组件也只支持selector|time|date。 当然,我们可以使用view来模拟,但这样开发量会比较大。再往下看,发现了picker-view + picker-view-column这对好基友,这不就是专门用来实现多列滚动选择的吗?既然找到组件了,接下来就是如何实现了? 不急,我们还是先看一下组件最终效果: 使用类实现小程序组件一些小程序组件通常会被设计成一个类。用代码表示,大概是下面的样子:
使用时,先引用定义,然后在onLoad时new一个实例,再调用实例相应的方法,如:
项目里有几个组件,也的确是这样实现的。但这里有几个问题: 1. 使用麻烦。除new之外,每次还得增加一些不必要的方法去调用组件实例相应的方法,比如上面的bindTap方法 2. 因为问题1,所以组件的封装性很差 3. 同页面多组件共存问题,是new多个组件吗? 那么,还有没有更简单,更好的组件封装方式呢?
其实我们观察小程序页面启动方法会发现: 1. page函数需要传入一个对象参数,这里参数里面的特定函数onXXX(onLoad,onShow)会在页面的特定生命同期被调用 2. 其它挂在对象参数上的方法或属性,可以通过this访问到。在wxml模板中,也可以直接调用 也就是说,我们扩展对象参数,就可以扩展方法在.wxml模板中调用。基于此,有下面的组件封装方式:
这种组件封装方式,页面注册参数不需要多写额外的方法。看起来更简洁,封装性也更好。 实战:使用extend方式实现AddressPicker组件
|
从AddressPicker实现探讨小程序组件封装方式
发布:2018-04-16 10:54浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08