最开始小程序的开发和应用，现在小程序的开发越来越成熟，完善了很多API、组件、架构等，社区也从原来的零星到现在是不大不小，也有，很多开发框架诞生期间，三方辅助库越来越多，我也闹了不少。比较有名的是wepyand labrador，wepy是的vue，小程序开发框架的风格，labrador比较友好，React各有千秋，也各有坑labrador，作者已经停止更新TNT了。作为 react 的资深用户，我很难过，所以我正在努力找出解决方案wn-cli使用类React在微信应用快速开发的过程中，我想了很多。为什么我需要开发一个框架？小程序本身一开始就强调框架，现在还不错。后来总结说自己对小程序的框架不熟悉，但是学习新的中级框架开发小程序增加了熟悉的成本？并且这个问题增加了处理成本。

因此，我重新思考，最好的微信小程序开发实践应该是无痛和舒适。无痛是指在小程序的快速发展变化中，我们不必反复浪费学习第三方框架和原生框架。舒适意味着我们可以使用我们熟悉的流行工程流程，比如less预编译、async/await异步请求、Redux数据管理等。

以上就是本次回购的意义和原因。

设计概要
[x] 优化小程序API

Promise异步接口
打破请求（队列）的限制
[x] 使用异步/等待
[x] 访问Redux管理页面数据流

直接访问，添加可配置项
添加到saga管理操作
[x] 文体采用less预编译

使用Gulp管理，自动编译，持续集成
[x]wxs管理工具库

数据格式操作，如时间格式、黄金格式等
[x] 按需加载，子tab页面分包（页面其他页面除外）

按功能模块分包加载（推荐）
按tab分包
PS：小程序原创转包
[x] 资源自动化管理

上传CDN
Promise异步接口
因为微信API的异步接口有3个回调函数，分别是success，fail，complete执行时间（complete必须在接口结束时执行）。所以是一个组合Promise简单说明如下：（以下为简化版，详见源码）

原生微信小程序API：

wx.request({
  //... other configuration items
  success: () => {},
  fail: () => {},
  complete: () => {}
});
添加到Promise之后：

new Promise((resolve, reject) => {
  wx.request({
    //... other configuration items
    success: resolve,
    fail: reject,
    Complete: resolve, // resolve is used here temporarily
  });
});
Promise这个用起来很简单

wx.request ({/ *... Some configuration items * /}). Then (RES = >){
  console.log(res)
}, err => {
  console.error(err)
})
结合async/await，可以更方便的写同步代码

使用异步/等待
添加到babel：
yarn add babel-core
安装env预设
yarn add babel-preset-env
用.babelrc
{
  "presets": [
    "env"
  ]
}
留Gulp在 使用babel
// install
yarn add gulp-babel

const babel = require('gulp-babel');
// ...
.pipe(babel())
// ...
添加到runtime，在使用的async/await地方引入./src/utils/lib/runtime.js文件。幸运的是，它在这个 repoGulp任务中被自动处理。
上面，你可以在微信小程序中使用它，为时async/await已晚。

文体采用less预编译
为什么less因为简单方便，前端编译，轻量级。

注意：由于小程序本身的限制，在书写风格上不要使用它less的嵌套功能！

添加较少变量库等
// ...
.pipe(addLessImport({
      themePath: path.join(__dirname, './src/theme/index.less'),
      commomPath: path.join(__dirname, './src/app.less'),
    }))
// ...
编译
// ...
.pipe(less({
      paths: [path.join(__dirname, './src/theme')]
    }))
// ...
重命名样式文件让小程序识别
// ...
  .pipe(rename((path) => {
    path.extname = '.wxss';
  }))
// ...
资源自动化管理
目前连接阿里云，监控assert文件夹，自动上传图片资源
根据配置自动生成较少的配置config.less
gulp.src('src/theme/config.less', { allowEmpty: true })
    .pipe(file('config.less', `@cdn: ~'${config.cdn}';`))
    .pipe(changed('src/theme'))
    .pipe(gulp.dest('src/theme'))
用
page {
  background-image: url('@{cdn}/index-bg.png');