前言
最近摩拜单车小程序需求越来越多,多人协作,甚至多个项目并行。如何合作的更顺畅,提升团队成员开发效率,这便是这段时间思考的问题。
其中很重要的一点就是,小程序功能组件化。但小程序的开发框架目前还不支持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中
component的methods
组件私有的方法,但最终会被合并到page的config属性里,以便于在component的template中调用。
Page
wx-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。
题外话
摩拜单车正招聘前端工程师,简历发至:zhangshibing@mobike.com
前面的路
由于这几乎是以Hack
的方式去解决非静态微信组件化,data、props和methods的merge也会有些混乱,终究只是更方便更快速的解决业务需求。
期待微信小程序团队尽快发布Component
支持。