微信小程序组件化解决方案wx-component
rbr007
7年前
<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>