微信小程序开发最佳实践

VivienJLVN 4年前
   <h2>weapp-starter</h2>    <p>微信小程序开发最佳实践</p>    <p><a href="/misc/goto?guid=4959756661641626148" rel="nofollow,noindex">项目地址</a></p>    <h2>为什么会有这个 repo</h2>    <p>在小程序之初便开发应用了,现在小程序的开发也越来越成熟了,完善了很多的API、组件、架构等,社区也由原来的零星点点到现在的不大不小,但也算是有了,期间也诞生了很多的开发框架,越来越多的三方辅助库,我也捣鼓出很多。比较有名的算是 wepy 和 labrador , wepy 是 vue 风格的小程序开发框架, labrador 则比较亲和 React ,各有千秋,也各有深坑,而 labrador 作者目前已经停止更新了 TnT,作为React深度使用者的我来说是忧伤的,于是我捣鼓出 <a href="/misc/goto?guid=4959756661731880911" rel="nofollow,noindex"> wn-cli </a> 来用类 React 快速开发微信小程序,然而在这个过程中,想了很多,为什么需要开发框架呢?小程序本身在一开始就强调框架,且现在做的也不差,后来总结了下,无非是不熟悉小程序这套框架,但学习新的中间框架去开发小程序,这不是更加加大了熟悉成本吗?且出了问题增加了处理的代价。</p>    <p>于是,我重新思考了下,最佳的微信小程序开发实践应该是无痛的,且舒服的,无痛的是指在小程序的飞速发展变更中,我们不用重复的浪费学习第三方框架和原生框架。舒服的是指,我们能用上我们熟悉的流行工程流,如:less 预编译、async/await 异步请求,redux数据管理等。</p>    <p>以上,便是这个 repo 的意义与原因。</p>    <h2>设计概要</h2>    <ul>     <li> <p>[x] 优化小程序 API</p>      <ol>       <li>Promise 化异步接口</li>       <li>突破请求数量限制(队列)</li>      </ol> </li>     <li>[x] 使用 async/await</li>     <li> <p>[x] 接入 Redux 管理页面数据流</p>      <ol>       <li>直接接入,添加可配置项</li>       <li>添加 saga 管理操作</li>      </ol> </li>     <li> <p>[x] 样式书写采用 less 预编译</p>      <ol>       <li>使用 Gulp 管理自动编译,持续集成</li>      </ol> </li>     <li> <p>[x] wxs 管理工具库</p>      <ol>       <li>数据的格式化操作,如时间格式化、金币格式化等</li>      </ol> </li>     <li> <p>[x] 按需加载,子页面分包(除却 tab 页面的其他页面)</p>      <ol>       <li>按功能模块分包加载(推荐)</li>       <li>按 tab 分包</li>      </ol>      <ul>       <li>ps: 小程序 <a href="/misc/goto?guid=4959756661817070660" rel="nofollow,noindex">原生分包</a></li>      </ul> </li>     <li> <p>[x] 资源自动化管理</p>      <ol>       <li>上传 CDN</li>      </ol> </li>    </ul>    <h2>Promise 化异步接口</h2>    <p>由于微信的API中异步接口都是有三个回调函数的,分别是 success , fail , complete ,执行时机同字面上意思( complete 一定会在接口的最后执行)。于是 结合 Promise ,简单的描述如下:(以下为简版,具体的可以看源码)</p>    <p>原生微信小程序API:</p>    <pre>  wx.request({    // ... 其他一些配置项    success: () => {},    fail: () => {},    complete: () => {}  });</pre>    <p>添加 Promise 后:</p>    <pre>  new Promise((resolve, reject) => {    wx.request({      // ... 其他一些配置项      success: resolve,      fail: reject,      complete: resolve, // 这里暂取 resolve 来解决    });  });</pre>    <p>Promise 化后,使用起来就简单了:</p>    <pre>  wx.request({ /* ...一些配置项 */}).then(res => {    console.log(res)  }, err => {    console.error(err)  })</pre>    <p>结合下面的 async/await 就可以更加方便的书写同步代码</p>    <h2>使用 async/await</h2>    <ol>     <li>添加 babel :</li>    </ol>    <pre>  yarn add babel-core</pre>    <ol>     <li>安装 env presets</li>    </ol>    <pre>  yarn add babel-preset-env</pre>    <ol>     <li>使用 .babelrc</li>    </ol>    <pre>  {    "presets": [      "env"    ]  }</pre>    <ol>     <li>在 Gulp 中使用 babel</li>    </ol>    <pre>  // install  yarn add gulp-babel    const babel = require('gulp-babel');  // ...  .pipe(babel())  // ...</pre>    <ol>     <li>添加 runtime ,在使用 async/await 的地方引入 ./src/utils/lib/runtime.js 文件,幸运的是这件事情在这个repo中的 Gulp 任务中自动处理了。</li>    </ol>    <p>以上,便可以在微信小程序中使用 async/await 了。</p>    <h2>样式书写采用 less 预编译</h2>    <p>为什么选择 less ,因为简单方便,前端编译,轻量级。</p>    <p>注意:由于小程序本身的限制,在书写样式的时候,不要使用 less 的嵌套功能!</p>    <ol>     <li>添加less 变量库等</li>    </ol>    <pre>  // ...  .pipe(addLessImport({        themePath: path.join(__dirname, './src/theme/index.less'),        commomPath: path.join(__dirname, './src/app.less'),      }))  // ...</pre>    <ol>     <li>编译</li>    </ol>    <pre>  // ...  .pipe(less({        paths: [path.join(__dirname, './src/theme')]      }))  // ...</pre>    <ol>     <li>重命名样式文件,以便小程序识别</li>    </ol>    <pre>  // ...    .pipe(rename((path) => {      path.extname = '.wxss';    }))  // ...</pre>    <h2>资源自动化管理</h2>    <ol>     <li>目前接入阿里云,监测 assert 文件夹,自动上传图片资源</li>     <li>根据配置自动生成 less 配置 config.less</li>    </ol>    <pre>  gulp.src('src/theme/config.less', { allowEmpty: true })      .pipe(file('config.less', `@cdn: ~'${config.cdn}';`))      .pipe(changed('src/theme'))      .pipe(gulp.dest('src/theme'))</pre>    <ol>     <li>使用</li>    </ol>    <pre>  page {    background-image: url('@{cdn}/index-bg.png');    background-attachment: fixed;  }</pre>    <p><a href="/misc/goto?guid=4959756661641626148" rel="nofollow,noindex">项目地址</a></p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000012955804</p>    <p> </p>