微信小程序组件化解决方案wx-component

2018.06.17 更新

看到你们还在关注这篇文章，有必要说一句，目前微信已经推出官方组件化解决方案，这个方案已经不适用，详细文档能够移步：小程序组件化。javascript

前言

最近摩拜单车小程序需求愈来愈多，多人协做，甚至多个项目并行。如何合做的更顺畅，提高团队成员开发效率，这即是这段时间思考的问题。前端

其中很重要的一点就是，小程序功能组件化。但小程序的开发框架目前还不支持component，结合具体开发经验，咱们封装了wx-component。java

思想

静态模板

利用微信小程序支持的template特性，在page中使用template去调用组件，并把组件的methods提高到page的属性中去，这样即可以在component中使用bindtap等绑定组件“私有”事件方法。git

component和page的互相调用

在component的私有方法或onLoad等事件中，可使用parent获取page对象：github

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中bash

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