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

   <h2>前言</h2>    <p>最近摩拜单车小程序需求越来越多，多人协作，甚至多个项目并行。如何合作的更顺畅，提升团队成员开发效率，这便是这段时间思考的问题。</p>    <p>其中很重要的一点就是，小程序功能组件化。但小程序的开发框架目前还不支持component，结合具体开发经验，我们封装了 wx-component 。</p>    <h2>思想</h2>    <h3>静态模板</h3>    <p>利用微信小程序支持的 template 特性，在page中使用template去调用组件，并把组件的 methods 提升到page的属性中去，这样便可以在component中使用 bindtap 等绑定组件“私有”事件方法。</p>    <h3>component和page的互相调用</h3>    <p>在component的私有方法或onLoad等事件中，可以使用 parent 获取page对象：</p>    <pre>  <code class="language-javascript">this.parent.setData({    text: "my btn text"  })  let { text } = this.parent.data</code></pre>    <p>你也可以在page中使用 childrens 获取component对象：</p>    <pre>  <code class="language-javascript">Page({    data: {},    components: {      login: {        text: "my login btn text",        onLogin() {          ...        }      }    },    onLoad() {      this.childrens.login.setData({        text: "my text"      })      let { text } = this.childrens.login.data    }  })</code></pre>    <h3>props和data</h3>    <p>在page中声明组件依赖，可以传入 props ，如：</p>    <pre>  <code class="language-javascript">Page({    data: {},    components: {      // 传入`props`      login: {        text: "my login btn text",        onLogin() {          ...        }      }    }  })</code></pre>    <p>你可以在component中通过 this.props 取到所有的prop值。</p>    <p>当然，小程序不支持 props 的概念，所有的props都会合并到data中</p>    <h3>component的methods</h3>    <p>组件私有的方法，但最终会被合并到page的config属性里，以便于在component的template中调用。</p>    <h3>Page</h3>    <p>wx-component 会重新定义小程序原有的 Page 方法，所以你只需要在项目根目录的 app.js 中require一次就可以，后续无需重新require：</p>    <p>/project/app.js</p>    <pre>  <code class="language-javascript">require("/libs/wx-component/index")  App({    onLaunch() {      ...    },    globalData: {      ...    }  })</code></pre>    <h3>component的onLoad和onUnload</h3>    <p>这两个事件对应page的 onLoad 和 onUnload ，但不支持 onShow 等其他page事件，你可以在page的 onShow 中使用 this.childrens 获取组件并调用其私有方法。</p>    <h2>推荐的目录结构</h2>    <pre>  <code class="language-javascript">├─project                项目    ├─components           功能组件      ├─login              登录组件        ├─index.wxss        ├─index.wxml        ├─index.js    ├─pages                页面</code></pre>    <h2>component的结构</h2>    <pre>  <code class="language-javascript">{    // 组件名    // 也可以不填，不填写会用`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() {        ...      }    },      // 其他    ....  }</code></pre>    <h2>前面的路</h2>    <p>由于这几乎是以 Hack 的方式去解决非静态微信组件化，data、props和methods的merge也会有些混乱，终究只是更方便更快速的解决业务需求。</p>    <p>期待微信小程序团队尽快发布 Component 支持。</p>    <p> </p>    <p>来自：https://juejin.im/post/58c7d2e40ce4630054836b90</p>    <p> </p>