微信小程序組件化解決方案wx-component

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支持。