weapp-starter

微信小顺序开辟最好实践

项目地点

为何会有这个 repo

在小顺序之初便开辟应用了，如今小顺序的开辟也越来越成熟了，完美了许多的API、组件、架构等，社区也由本来的零碎点点到如今的不大不小，但也算是有了，时期也诞生了许多的开辟框架，越来越多的三方辅佐库，我也捣鼓出许多。比较著名的算是 wepy 和 labrador，wepy 是 vue 作风的小顺序开辟框架，labrador 则比较亲和 React，各有所长，也各有深坑，而 labrador 作者现在已住手更新了 TnT，作为React深度运用者的我来说是难过的，因而我捣鼓出 wn-cli 来用类 React 疾速开辟微信小顺序，但是在这个过程当中，想了许多，为何须要开辟框架呢？小顺序自身在一开始就强调框架，且如今做的也不差，厥后总结了下，无非是不熟习小顺序这套框架，但进修新的中心框架去开辟小顺序，这不是越发加大了熟习本钱吗？且出了题目增加了处置惩罚的价值。

因而，我从新思索了下，最好的微信小顺序开辟实践应该是无痛的，且惬意的，无痛的是指在小顺序的飞速发展变动中，我们不必反复的糟蹋进修第三方框架和原生框架。惬意的是指，我们能用上我们熟习的盛行工程流，如：less 预编译、async/await 异步要求，redux数据治理等。

以上，就是这个 repo 的意义与缘由。

设想提要

• [x] 优化小顺序 API

  1. Promise 化异步接口
  2. 打破要求数目限定（行列）
• [x] 运用 async/await

• [x] 接入 Redux 治理页面数据流

  1. 直接接入，增加可设置项
  2. 增加 saga 治理操纵

• [x] 款式誊写采纳 less 预编译

  1. 运用 Gulp 治理自动编译，延续集成

• [x] wxs 治理工具库

  1. 数据的格式化操纵，如时刻格式化、金币格式化等

• [x] 按需加载，子页面分包（除却 tab 页面的其他页面）

  1. 按功用模块分包加载（引荐）
  2. 按 tab 分包
  • ps: 小顺序原生分包

• [x] 资本自动化治理

  1. 上传 CDN

Promise 化异步接口

由于微信的API中异步接口都是有三个回调函数的，分别是success，fail，complete，实行机遇同字面上意义（complete肯定会在接口的末了实行）。因而 连系Promise，简朴的形貌以下：（以下为简版，详细的能够看源码）

原生微信小顺序API：

wx.request({
  // ... 其他一些设置项
  success: () => {},
  fail: () => {},
  complete: () => {}
});

增加Promise后：

new Promise((resolve, reject) => {
  wx.request({
    // ... 其他一些设置项
    success: resolve,
    fail: reject,
    complete: resolve, // 这里暂取 resolve 来处理
  });
});

Promise 化后，运用起来就简朴了：

wx.request({ /* ...一些设置项 */}).then(res => {
  console.log(res)
}, err => {
  console.error(err)
})

连系下面的 async/await 就能够越发轻易的誊写同步代码

运用 async/await

1. 增加 babel:

yarn add babel-core

1. 装置 env presets

yarn add babel-preset-env

1. 运用 .babelrc

{
  "presets": [
    "env"
  ]
}

1. 在 Gulp 中运用 babel

// install
yarn add gulp-babel

const babel = require('gulp-babel');
// ...
.pipe(babel())
// ...

1. 增加 runtime，在运用async/await的处所引入 ./src/utils/lib/runtime.js 文件，荣幸的是这件事变在这个repo中的Gulp使命中自动处置惩罚了。

以上，便能够在微信小顺序中运用 async/await了。

款式誊写采纳 less 预编译

为何挑选 less，由于简朴轻易，前端编译，轻量级。

注重：由于小顺序自身的限定，在誊写款式的时刻，不要运用 less 的嵌套功用！

1. 增加less 变量库等

// ...
.pipe(addLessImport({
      themePath: path.join(__dirname, './src/theme/index.less'),
      commomPath: path.join(__dirname, './src/app.less'),
    }))
// ...

1. 编译

// ...
.pipe(less({
      paths: [path.join(__dirname, './src/theme')]
    }))
// ...

1. 重命名款式文件，以便小顺序辨认

// ...
  .pipe(rename((path) => {
    path.extname = '.wxss';
  }))
// ...

资本自动化治理

1. 现在接入阿里云，监测 assert 文件夹，自动上传图片资本
2. 依据设置自动天生 less 设置 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'))

1. 运用

page {
  background-image: url('@{cdn}/index-bg.png');
  background-attachment: fixed;
}

项目地点