前言最近摩拜单车小程序需求越来越多,多人协作,甚至多个项目并行。如何合作的更顺畅,提升团队成员开发效率,这便是这段时间思考的问题。 其中很重要的一点就是,小程序功能组件化。但小程序的开发框架目前还不支持component,结合具体开发经验,我们封装了wx-component。 思想静态模板利用微信小程序支持的template特性,在page中使用template去调用组件,并把组件的methods提升到page的属性中去,这样便可以在component中使用bindtap等绑定组件“私有”事件方法。 component和page的互相调用在component的私有方法或onLoad等事件中,可以使用parent获取page对象: this.parent.setData({ text: "my btn text" }) let { text } = this.parent.data 你也可以在page中使用childrens获取component对象: Page({ data: {}, components: { login: { text: "my login btn text", onLogin() { ... } } }, onLoad() { this.childrens.login.setData({ text: "my text" }) let { text } = this.childrens.login.data } }) props和data在page中声明组件依赖,可以传入props,如: Page({ data: {}, components: { // 传入`props` login: { text: "my login btn text", onLogin() { ... } } } })
你可以在component中通过this.props取到所有的prop值。 component的methods组件私有的方法,但最终会被合并到page的config属性里,以便于在component的template中调用。 Pagewx-component会重新定义小程序原有的Page方法,所以你只需要在项目根目录的app.js中require一次就可以,后续无需重新require: /project/app.js require("/libs/wx-component/index") App({ onLaunch() { ... }, globalData: { ... } }) component的onLoad和onUnload这两个事件对应page的onLoad和onUnload,但不支持onShow等其他page事件,你可以在page的onShow中使用this.childrens获取组件并调用其私有方法。 推荐的目录结构├─project 项目 ├─components 功能组件 ├─login 登录组件 ├─index.wxss ├─index.wxml ├─index.js ├─pages 页面 component的结构{ // 组件名 // 也可以不填,不填写会用`components/{X}/index.js`中的X命名 name: "login", // 组件私有数据 data: { item: [1, 2, 3] }, // 组件属性 // 可以预先定义默认值 // 也可以外部传入覆盖默认值 props: { text: "start" }, // 当组件被加载 onLoad() { this.setData({ is_loaded: true }) }, // 当组件被卸载 onUnload() { this.setData({ is_unloaded: true }) }, // 组件私有方法 methods: { getMsg() { ... }, sendMsg() { ... } }, // 其他 .... } API文档更详细的API文档请见Github。 前面的路由于这几乎是以Hack的方式去解决非静态微信组件化,data、props和methods的merge也会有些混乱,终究只是更方便更快速的解决业务需求。 期待微信小程序团队尽快发布Component支持。 |
按钮无法点击 Do not have xx handler in current page,去掉BOM头的方法 ...
发布:2018-04-14 15:08浏览: 次来源:网络 作者: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