2018.06.17 更新
看到大家還在關注這篇文章,有必要說一句,目前微信已經推出官方元件化解決方案,這個方案已經不適用,詳細文件可以移步:小程式元件化。
前言
最近摩拜單車小程式需求越來越多,多人協作,甚至多個專案並行。如何合作的更順暢,提升團隊成員開發效率,這便是這段時間思考的問題。
其中很重要的一點就是,小程式功能元件化。但小程式的開發框架目前還不支援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
支援。