微信小程序开发最佳实践

Developer 发布于2019-08-22 13:58 / 1665人阅读

摘要：于是，我重新思考了下，最佳的微信小程序开发实践应该是无痛的，且舒服的，无痛的是指在小程序的飞速发展变更中，我们不用重复的浪费学习第三方框架和原生框架。以上，便可以在微信小程序中使用了。

weapp-starter

微信小程序开发最佳实践

项目地址

为什么会有这个 repo

在小程序之初便开发应用了，现在小程序的开发也越来越成熟了，完善了很多的API、组件、架构等，社区也由原来的零星点点到现在的不大不小，但也算是有了，期间也诞生了很多的开发框架，越来越多的三方辅助库，我也捣鼓出很多。比较有名的算是 wepy 和 labrador，wepy 是 vue 风格的小程序开发框架，labrador 则比较亲和 React，各有千秋，也各有深坑，而 labrador 作者目前已经停止更新了 TnT，作为React深度使用者的我来说是忧伤的，于是我捣鼓出 wn-cli 来用类 React 快速开发微信小程序，然而在这个过程中，想了很多，为什么需要开发框架呢？小程序本身在一开始就强调框架，且现在做的也不差，后来总结了下，无非是不熟悉小程序这套框架，但学习新的中间框架去开发小程序，这不是更加加大了熟悉成本吗？且出了问题增加了处理的代价。

于是，我重新思考了下，最佳的微信小程序开发实践应该是无痛的，且舒服的，无痛的是指在小程序的飞速发展变更中，我们不用重复的浪费学习第三方框架和原生框架。舒服的是指，我们能用上我们熟悉的流行工程流，如：less 预编译、async/await 异步请求，redux数据管理等。

以上，便是这个 repo 的意义与原因。

设计概要

[x] 优化小程序 API

Promise 化异步接口

突破请求数量限制（队列）

[x] 使用 async/await

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

直接接入，添加可配置项

添加 saga 管理操作

[x] 样式书写采用 less 预编译

使用 Gulp 管理自动编译，持续集成

[x] wxs 管理工具库

数据的格式化操作，如时间格式化、金币格式化等

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

按功能模块分包加载（推荐）

按 tab 分包

ps: 小程序原生分包

[x] 资源自动化管理

上传 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

添加 babel:

yarn add babel-core

安装 env presets

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 文件，幸运的是这件事情在这个repo中的Gulp任务中自动处理了。

以上，便可以在微信小程序中使用 async/await了。

样式书写采用 less 预编译

为什么选择 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 文件夹，自动上传图片资源

根据配置自动生成 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"))

使用

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

项目地址

私有云超融合服务器微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92702.html

Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
微信 - 收藏集 - 掘金

摘要：基础学习微信小程序视图容器一掘金本文为菜鸟窝编辑吴佳林的连载。如果碰巧遇到关闭情况，可加群全家桶与微信开发前端掘金此项目本身有一个了，为了方便将和微信端数据打通，需要用户微信和用户绑定。微信扫一扫登录内部实现原理 - Android - 掘金与XMPP相关试题一与XMPP相关试题二与性能优化相关试题一与性能优化相关试题二与性能优化相... [利用 [微信公众号通知] 给你的网...

jasperyang 2019-08-28 17:46 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

seanlook 2019-08-05 10:11 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0
云开发初探 —— 更简便的小程序开发模式

摘要：年加入腾讯云云开发团队。基于，云服务商发展出这类更高级的开发服务。小程序云开发说了这么多无服务开发的概念优点，在小程序无服务开发这一块，腾讯云有什么样的作品呢。这就是今天要重点介绍的，小程序云开发，这就是腾讯云与微信联合研发后，交出的答卷。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由李成熙heyli发表于云+社区专栏李成熙，腾讯云高级工程师。2014年度毕业加入...

aaron 2019-08-06 14:21 评论0 收藏0