文 | xixilive
微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法。
众所周知,Callback-Hell(回调地狱)是传统 JS 语法上的历史问题。但毕竟称手的工具是开发效率的源泉,因此笔者对当前版本的微信小程序 API 做了简单的封装——weapp。
同时,微信小程序框架本身专注于交互和 UI 的实现,并未提供内置的状态管理。如果众多的异步操作都直接在 App
或 Page
中一一实现,相信开发起来会很困难,而且不易于测试。
因此,我又因此针对微信小程序实现了一个基于 Redux 方案的状态管理模块,用以方便地在小程序中实现应用状态管理 redux-weapp。
特别地,微信小程序构建(编译)时不支持从 App scope 之外 require 文件,npm 在此就不好用了。
所以,我们需要实时 build 依赖到应用本地,在微信小程序中引用本地的 modules。
对于这种构建场景,我认为 webpack 算是最方便的方案。
在开始之前,你需要准备
安装工具和依赖模块
下载微信小程序开发者工具
开发者工具是用 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,可获得以下内容和服务: