2018.06.17 update

See you are still paying attention to this article, it is necessary to say that at present wechat has launched an official componentization solution, this solution is no longer applicable, detailed documentation can be moved to: small program componentization.

preface

Recently, mobike has more and more requests for mini programs, with multiple people collaborating and even multiple projects running in parallel. How to cooperate more smoothly and improve the development efficiency of team members is the question I have been thinking about during this period of time.

One of the most important is the componentization of applets. However, the development framework of small programs does not support Component at present. Based on specific development experience, we encapsulated WX-Component.

thought

Static template

By using the template feature supported by wechat applet, the component can be called using template in page, and the methods of the component can be promoted to the page property. In this way, the bindtap and other binding component “private” event methods can be used in Component.

Component and page calls to each other

In component private methods or events such as onLoad, we can use parent to get the Page object:

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

You can also get the Component object in page using Childrens:

Page({
  data: {},
  components: {
    login: {
      text: "my login btn text",
      onLogin() {
        ...
      }
    }
  },
  onLoad() {
    this.childrens.login.setData({
      text: "my text"
    })
    let { text } = this.childrens.login.data
  }
})
Copy the code

Props and data

Declare component dependencies in the page, passing props, for example:

Page({
  data: {},
  components: {
    / / incoming ` props `
    login: {
      text: "my login btn text", onLogin() { ... }}}})Copy the code

You can get all prop values in component via this.props. Of course, applets don’t support the concept of props, and all props are merged into data

The methods of component

Component private methods that are eventually incorporated into the Page config property to be called in the Component template.

Page

Wx-component redefines the Page method of the applet, so you only need to require it once in the project’s root directory, app.js, without requiring it again:

/project/app.js

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

Component onLoad and onUnload

These events correspond to the page’s onLoad and onUnload, but other page events such as onShow are not supported. You can use this. Childrens in the page’s onShow to get the component and call its private methods.

Recommended directory structure

├ ─ project project ├ ─ components function component ├ ─ login login component ├ ─ index. WXSS ├ ─ but WXML ├ ─ index. The js ├ ─ pages pageCopy the code

The structure of the component

{
  / / component name
  'components/{X}/index.js' will be named with X
  name: "login".// Component private data
  data: {
    item: [1.2.3]},// Component properties
  // Default values can be predefined
  // The default value can also be passed in externally
  props: {
    text: "start"
  },

  // When the component is loaded
  onLoad() {
    this.setData({
      is_loaded: true})},// When the component is uninstalled
  onUnload() {
    this.setData({
      is_unloaded: true})},// Component private methodsmethods: { getMsg() { ... }, sendMsg() { ... }},/ / other. }Copy the code

The API documentation

More detailed API documentation is available on Github.

digression

Mobike is looking for a front end engineer. Send your resume to: [email protected]

The road ahead

Because this is almost a Hack to solve the non-static wechat componentization, the merge of data, props and methods will also be a bit chaotic, after all, it is just more convenient and faster to solve the business needs.

Expect the wechat applets team to release Component support soon.