前言

最近摩拜單車小程序需求越來越多，多人協(xié)作榜贴，甚至多個項目并行豌研。如何合作的更順暢，提升團(tuán)隊成員開發(fā)效率，這便是這段時間思考的問題鹃共。

其中很重要的一點(diǎn)就是鬼佣，小程序功能組件化。但小程序的開發(fā)框架目前還不支持component霜浴，結(jié)合具體開發(fā)經(jīng)驗晶衷，我們封裝了wx-component。

思想

靜態(tài)模板

利用微信小程序支持的template特性阴孟，在page中使用template去調(diào)用組件晌纫，并把組件的methods提升到page的屬性中去，這樣便可以在component中使用bindtap等綁定組件“私有”事件方法永丝。

component和page的互相調(diào)用

在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值凌蔬。

當(dāng)然，小程序不支持props的概念闯冷，所有的props都會合并到data中

component的methods

組件私有的方法，但最終會被合并到page的config屬性里懈词，以便于在component的template中調(diào)用蛇耀。

Page

wx-component會重新定義小程序原有的Page方法，所以你只需要在項目根目錄的app.js中require一次就可以坎弯，后續(xù)無需重新

require：/project/app.js

require("/libs/wx-component/index")App({? onLaunch() {? ? ...? },globalData: {? ? ...? }})

component的onLoad和onUnload

這兩個事件對應(yīng)page的onLoad和onUnload纺涤，但不支持onShow等其他page事件，你可以在page的onShow中使用this.childrens獲取組件并調(diào)用其私有方法抠忘。

推薦的目錄結(jié)構(gòu)

├─project? ? ? ? ? ? ? ? 項目

├─components? ? ? ? ? 功能組件

├─login? ? ? ? ? ? ? 登錄組件

├─index.wxss

├─index.wxml

├─index.js

├─pages? ? ? ? ? ? ? ? 頁面

component的結(jié)構(gòu)

{// 組件名// 也可以不填撩炊，不填寫會用`components/{X}/index.js`中的X命名name:"login",// 組件私有數(shù)據(jù)data: {item: [1,2,3]? },// 組件屬性// 可以預(yù)先定義默認(rèn)值// 也可以外部傳入覆蓋默認(rèn)值props: {text:"start"},// 當(dāng)組件被加載onLoad() {this.setData({is_loaded:true})? },// 當(dāng)組件被卸載onUnload() {this.setData({is_unloaded:true})? },// 組件私有方法methods: {? ? getMsg() {? ? ? ...? ? },? ? sendMsg() {? ? ? ...? ? }? },// 其他....}

API文檔

更詳細(xì)的API文檔請見Github。

題外話

青團(tuán)社正招聘前端工程師崎脉，簡歷發(fā)至：hr@qtshe.com

前面的路

由于這幾乎是以Hack的方式去解決非靜態(tài)微信組件化拧咳，data、props和methods的merge也會有些混亂囚灼，終究只是更方便更快速的解決業(yè)務(wù)需求骆膝。

期待微信小程序團(tuán)隊盡快發(fā)布Component支持。

青團(tuán)社招聘：

招聘崗位：資深前端開發(fā)工程師

簡歷投遞到：hr@qtshe.com || haochen@qtshe.com

職位描述：

1灶体、建設(shè)工具阅签、提煉組件、抽象框架蝎抽，促進(jìn)前端工程化政钟、服務(wù)化，持續(xù)提升研發(fā)效率，保障線上產(chǎn)品質(zhì)量

2养交、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施精算，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺，指導(dǎo)落實解決方案

3层坠、持續(xù)優(yōu)化前端頁面性能殖妇，維護(hù)前端代碼規(guī)范，鉆研各種前沿技術(shù)和創(chuàng)新交互破花，增強(qiáng)用戶體驗谦趣、開拓前端能力邊界