微信小程式元件化解決方案wx-component

摩拜單車前端團隊發表於2017-03-14

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的onLoadonUnload,但不支援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支援。

相關文章