前言

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

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

思想

靜態(tài)模板

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

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

在component的私有方法或onLoad等事件中，可以使用parent獲取page對(duì)象：

this.parent.setData({
  text: "my btn text"
})
let { text } = this.parent.data

你也可以在page中使用childrens獲取component對(duì)象：

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都會(huì)合并到data中

component的methods

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

Page

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

/project/app.js

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

component的onLoad和onUnload

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

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

├─project                項(xiàng)目
  ├─components           功能組件
    ├─login              登錄組件
      ├─index.wxss
      ├─index.wxml
      ├─index.js
  ├─pages                頁面

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

{
  // 組件名
  // 也可以不填，不填寫會(huì)用`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文檔請(qǐng)見Github。

前面的路

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

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