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

rbr007 5年前
   <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>