前言
最近摩拜单车小程序需求越来越多网站优化
前言
最近摩拜单车小程序需求越来越多多人协作甚至多个项目并行。如何合作的更顺畅SEO排名服务甚至多个项目并行。如何合作的更顺畅提升团队成员开发效率这便是这段时间思考的问题。
其中很重要的一点就是小程序功能组件化。但小程序的开发框架目前还不支持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。
前面的路
由于这几乎是以Hack的方式去解决非静态微信组件化data、props和methods的merge也会有些混乱终究只是更方便更快速的解决业务需求。
期待微信小程序团队尽快发布Component支持。