开发 | 效率提升 100%，小程序开发应该这样做

文 | xixilive

微信小程序的 API 实现需要兼顾方方面面，所以仍然使用 callback 写法。

众所周知，Callback-Hell（回调地狱）是传统 JS 语法上的历史问题。但毕竟称手的工具是开发效率的源泉，因此笔者对当前版本的微信小程序 API 做了简单的封装——weapp。

同时，微信小程序框架本身专注于交互和 UI 的实现，并未提供内置的状态管理。如果众多的异步操作都直接在 App 或 Page 中一一实现，相信开发起来会很困难，而且不易于测试。

因此，我又因此针对微信小程序实现了一个基于 Redux 方案的状态管理模块，用以方便地在小程序中实现应用状态管理 redux-weapp。

特别地，微信小程序构建（编译）时不支持从 App scope 之外 require 文件，npm 在此就不好用了。

所以，我们需要实时 build 依赖到应用本地，在微信小程序中引用本地的 modules。

对于这种构建场景，我认为 webpack 算是最方便的方案。

在开始之前，你需要准备

• 从官方文档，了解微信小程序是什么；
• 了解 Redux 应用状态管理方案，同时它也是 Flux 架构的具体实现；
• 了解 JavaScript 打包工具 webpack；
• 了解 ES6/7 代码转译（transcompile）工具 Babel。原理是借助语法分析工具，将代码解析成抽象语法树后「重写」成最终的代码；
• 类似 Jest、Mocha 等 JavaScript 测试工具，可以根据需要选择。

安装工具和依赖模块

下载微信小程序开发者工具

开发者工具是用 NW.js 模拟的环境，在微信中，则是 JavascriptCore 环境。

不过不用担心, 只是两个不同的 VM，本质是一样的。

NW.js 可能存在一些小 bug，写代码的时候注意一下就好。

用 npm 命令开始一个微信小程序项目

开始安装必要的依赖模块

由于除了小程序运行时需要的模块，还有构建所需要的模块。

看起来会比较多，不过不用担心，大多数都是声明性的，不需要你直接调用。

为了方便经验少些的同学理解，我将这些依赖分步安装。

首先是代码转译工具 Babel：

有了上面这些模块，就可以在构建时，将 ES6/7 的代码转译为 ES5 的代码了（其实解释器都只认 ES5）。

接下来，我们安装打包工具 webpack：

我们只需要对代码进行打包，不需要 dev server 和 hot module replace 功能。

因此，我们只需要安装 webpack module 本身即可，无需安装其他扩展和插件。

接下来，我们来安装 Redux：

需要注意的是，由于在实际应用中，我们经常会需要异步调用 API 服务器的接口，因此我们还需要 redux-thunk 这个模块，来处理异步行为。

然后安装开发小程序的辅助模块：

其中，weapp 模块是对微信小程序 API 的 wrapper，提供了更易于使用的 API，redux-weapp 是基于 Redux 对微信小程序进行状态管理。

建立项目目录结构

编写构建脚本

首先得写 webpack.config.js, 这个是必须的。

由于这个构建是为了本地化微信小程序的依赖，因此我们只处理 JS 文件。若需要打包其他资源，请读者自行研究。

而且，值得注意的是，微信小程序包有 1 MB 的上限。

定义 npm 命令

首先是代码测试命令 test。

由于我喜欢用 Jest，所以这里也用 Jest 做范例。

接下来，就是激动人心的 build 命令。成败在此一举 :)

写小程序代码

到这里，我们总算进入正题了。

借助上述的 weapp 和 redux-weapp，希望你在开发小程序的时候，会感到很舒服。

在这个范例中，我们目标是去查询 GitHub 和 Octokit 的开源项目，并显示在小程序中。

myapp 模块

我们首先定义 store: /es6/store.js。

这里只是简单的范例，实际中会有比较复杂的 store shape，需要引入更多的 middleware，来处理动作和状态的变化。

接下来，我们继续定义 reducers。就是这个文件：/es6/reducers.js。

Reducer 就是处理因 Store dispatch 在执行时，发生的状态变化的函数，参数总是为 (state, action)。

还有 actions：/es6/actions.js，它通常是个 Plain Object，总是被 Store dispatch，描述了「发生了什么，结果是什么」的逻辑。

最后还有 myapp 模块的入口：/es6/myapp.js。

小程序模块

首先是小程序总体逻辑文件：app.js。

以及 app.json。

还有页面逻辑 projects.js。在之前，我们也将小程序的启动页面，定义为 projects 了。

接下来是页面 UI：projects.wxml。

最后的话

范例代码未实际运行，仅用以表示开发步骤。我会尽快把这个范例实现完整，放到 GitHub 上。

最后，谢谢您耐心阅读至此！

原文地址： https://gist.github.com/xixilive/5bf1cde16f898faff2e652dbd08cf669weapp

项目地址： https://github.com/xixilive/weapp

往期精选文章

• 开发 | 技术高人如何开发小程序？他们用这套方法
• 开发 | 小程序开发有哪些坑？这份笔记都整理出来了
• 开发 | 一篇文章读懂微信小程序视图层

本文由知晓程序授权转载，关注微信号 zxcx0101，可获得以下内容和服务：

• 在微信后台回复「1228」，获取全网第一本《微信小程序入门指南》。
• 在微信后台回复「加群」，加入「一起发现小程序」微信交流群。
• 在微信后台回复任意关键词，还能获得相关小程序推荐，赶紧试试吧！