前言
最近摩拜单车小程序需求越来越多，多人协作，甚至多个项目并行。如何合作的更顺畅，提升团队成员开发效率，这便是这段时间思考的问题。
其中很重要的一点就是，小程序功能组件化。但小程序的开发框架目前还不支持component，结合具体开发经验，我们封装了wx-component。
思想
利用微信小程序支持的template特性，在page中使用template去调用组件，并把组件的methods提升到page的属性中去，这样便可以在component中使用bindtap等绑定组件“私有”事件方法。
在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 }})
在page中声明组件依赖，可以传入props，如：
Page({data: {},components: {// 传入`props`login: {text:"my login btn text", onLogin() { ... } } }})
你可以在component中通过this.props取到所有的prop值。
当然，小程序不支持props的概念，所有的props都会合并到data中
组件私有的方法，但最终会被合并到page的config属性里，以便于在component的template中调用。
wx-component会重新定义小程序原有的Page方法，所以你只需要在项目根目录的app.js中require一次就可以，后续无需重新
require：/project/app.js
require("/libs/wx-component/index")App({ onLaunch() { ... },globalData: { ... }})
这两个事件对应page的onLoad和onUnload，但不支持onShow等其他page事件，你可以在page的onShow中使用this.childrens获取组件并调用其私有方法。
├─project 项目
├─components 功能组件
├─login 登录组件
├─index.wxss
├─index.wxml
├─index.js
├─pages 页面
{// 组件名// 也可以不填，不填写会用`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文档请见Github。
青团社正招聘前端工程师，简历发至：hr@qtshe.com
由于这几乎是以Hack的方式去解决非静态微信组件化，data、props和methods的merge也会有些混乱，终究只是更方便更快速的解决业务需求。
期待微信小程序团队尽快发布Component支持。
青团社招聘：
招聘岗位：资深前端开发工程师
简历投递到：hr@qtshe.com || haochen@qtshe.com
职位描述：
1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量
2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案
3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界
