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

文 | xixilive

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

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

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

因此,我又因此针对微信小程序实现了一个基于 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」,获取全网第一本《微信小程序入门指南》。
  • 在微信后台回复「加群」,加入「一起发现小程序」微信交流群。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-02-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿北的知识分享

这周撸了两款小程序,总结下经验。

当一个小程序Page的js文件中存在 onShareAppMessage 方法时,可以触发转发功能,但是通过小程序开发者工具生成的模板中,入口文件的js中并没有...

2585
来自专栏腾讯Bugly的专栏

《移动端本地 H5 秒开方案探索与实现》

对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高h5加载速度?优化 h5 体验?

1.1K13
来自专栏腾讯移动品质中心TMQ的专栏

移动APP测试用例设计的关注点

在我们的测试工作中,对于某个APP的测试其实有很多东西都是类似的可以抽象出来的,这里june总结一下大部分APP测试的时候都要考虑到的方面。如果漏下了其他方面,...

23610
来自专栏格子的个人博客

XenServer 7.3安装和使用教程

最近整个人又进入了一种小忙碌的状态,朝九晚六,看看书,打打游戏,也不算瞎忙。 忙碌内容涉及服务器虚拟化的东西比较多,虽然对于有经验的人来说,都不是难事儿,但是...

993
来自专栏知晓程序

开发 | 一款记账小程序的开发全过程,附避坑指南

趁着最近上班不是特别忙,自己闲来无事也跟着捣鼓了一款个人记账用的小程序:「小记一笔」。

802
来自专栏coding

2018年laravel教程第1节搭建项目phpstorm添加laravel代码提示新建路由和控制器渲染页面定义公共模板文件公共头部和底部小结

PHP框架哪家强?这个问题估计得让PHPer撕起来,别的指标不说,仅从github的受欢迎程度来讲,laravel当之无愧是榜首:

1302
来自专栏web前端教室

Vue2.0,lifeCycle ['laɪfˌsaɪkl] -- 生命周期大白话~

生命周期,这词太屌了,头一次在前端相关文章中看到这个词的时候,我真是被唬住了。心里想,这前端还跟生命周期搞一块了,是不是还带转生投胎啊,跪着看了一半,我就站起来...

2448
来自专栏伪君子的梦呓

电脑使用 Vysor 控制手机

想用安卓手机一步一步演示个东西给别人看的时候,恰巧遇到对方不在身边;安卓手机上的东西想投影到 Windows 电脑上,用电脑控制手机,却没找到合适的方式;上班时...

1294
来自专栏静下来

discuz上传附件提示Server (IO) Error的解决方法

discuz游客发帖,默认是显示ip前面3段的,也就是显示为127.0.0.x。 既然选择了游客发帖,我们也可以尽量的保护游客的ip不被泄漏。 那就修改disc...

3659
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

7594

扫码关注云+社区