推荐下载
-
2020-05-12 浏览：736
-
2020-05-06 浏览：517
-
2020-05-08 浏览：505
-
2020-04-04 浏览：501
-
2020-05-12 浏览：494
按钮无法点击 Do not have xx handler in current page，去掉BOM头的方法 ...
发布时间:2020-12-04最近摩拜单车小程序需求越来越多，多人协作，甚至多个项目并行。如何合作的更顺畅，提升团队成员开发效率，这便是这段时间思考的问题。
其中很重要的一点就是，小程序功能组件化。但小程序的开发框架目前还不支持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值。
当然，小程序不支持props的概念，所有的props都会合并到data中
组件私有的方法，但最终会被合并到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支持。
- 上一篇：如何使用小程序画布组件绘制自动缩放正方形
- 下一篇：微信小程序实用功能代码分享二
