文章来源：中文网

微信小程序的API实现需要考虑到方方面面，所以还是采用写法。

众所周知，-Hell（回调地狱）是传统 JS 语法中的历史遗留问题。但毕竟好用的工具才是开发效率的源泉，所以笔者对现版本微信小程序 API 做了一个简单的封装——。

同时微信小程序框架本身注重交互和UI的实现，并未提供内置的状态管理，诸多异步操作如果直接在App或者Page中逐一实现，会给开发带来很大难度，也难以测试。

因此我针对微信小程序实现了一个基于解决方案的状态管理模块，方便在小程序中进行应用状态管理。

特别地，微信小程序在构建（编译）时不支持App外部的文件，所以npm在这里用处不大。

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

对于这种施工场景，我认为这是最方便的解决方案。

开始之前需要准备安装工具及依赖模块下载微信小程序开发者工具

开发者工具是NW.js模拟的环境，在微信里就是这个环境。

不过不用担心，它们只是两个不同的虚拟机，本质上是相同的。

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

使用npm命令启动微信小程序项目

npm init

开始安装必要的依赖模块

小程序除了运行所需的模块外，还有构建所需的模块。

这看起来可能很多，但不要担心，其中大部分都是声明性的，不需要您直接调用它。

为了让经验较少的学生更容易理解，我会逐步安装这些依赖项。

首先是代码翻译工具：

--save-dev-cli-core---添加------0

通过上述模块，你可以在构建过程中将 ES6/7 代码翻译成 ES5 代码（实际上，解释器只识别 ES5）。

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

--保存-dev

我们只需要打包代码，不需要dev和hot函数。

因此我们只需要安装它本身，无需安装其他的扩展和插件。

接下来我们安装：

- --save-dev

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

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

//---保存设备

其中，针对微信小程序API的模块，提供了更加简单易用的API，-基于微信小程序的状态管理。

创建项目目录结构

10

11

12

十三

14

15

|- es6 # 源代码

|- .js # 此文件在app.js文件中

|- lib #存储编译后的js文件

|- # 小程序页面定义

|-

|- .js

|- .json

|- .wxml

|- .wxss

...

|- app.js # 小程序入口文件

|- 应用程序.json

|- 应用程序.wxss

|- ..js # 配置文件

编写构建脚本

首先你要写..js，这是必须的。

由于本次构建是针对微信小程序依赖进行本地化，因此我们只处理了 JS 文件，如需打包其他资源，请自行研究。

另外值得注意的是，微信小程序包大小上限为1MB。

10

11

12

十三

14

15

16

17

18

19

20

21

22

23

24

二十五

二十六

二十七

二十八

二十九

三十

31

三十二

33

//.. 路径=('路径'), =('')var ={

test:\\.js$/, //也可以使用.es6作为文件扩展名，并定义相应的

：''，

: {//代码翻译预设，不包含ES新特性，需要在具体代码中显示

：["","-0"]

}, //指定es6目录下的代码进行翻译

: path.join(,'es6'), //指定不翻译的代码

：路径.连接（，''）

}.={// 可选项，建议开发时包含，版本控制时删除（节能减排）

: null, //指定es6目录为目录，这样后面的部分会少一些`../`

: path.join(,'es6'), //定义需要打包的文件 //例如：`{: {out: ['./x','./y','./z']}}` 表示：将文件x,y,z打包成一个文件，文件名称为：out //具体请参考文档

：{

：'./'

}，

: {//将打包后的文件输出到lib目录下

path: path.join(,'lib'),//给打包后的文件命名，`[name]`可以理解为模板变量

:'[name].js', //规范为`umd`，兼容amd，具体请参考文档

:'umd'

}, : {

：[]

}，

：{

: ['', '.js'], //指定es6目录为加载目录，这样当使用/时，会自动加载该目录下的文件（可以省去很多../）

：['es6','']

}，

: [ new .(), // 通常需要区分 dev 和，建议定义该变量 // 编译后会在 `.env` 中定义。({'.env': {'': JSON.('')

}）

定义 npm 命令

首先是代码测试命令测试。

因为我喜欢使用 Jest，所以这里我将以 Jest 作为示例。

// .json"": { "": " es6", //建议静态检查 "test": "jest",

...

}，

..., // jest 允许在 .json 中定义配置 "jest": { "": , "bail": true, "": { ".js": "//-jest" // 翻译

}，“”：[“//”

],"":".test.js$","": ["//"

],"ns": ["//"

接下来是激动人心的顺序，成败就取决于这一步