高效编写微信小程序

标签：命令行   重复   方法   --   推荐   debug   问题   term   改变   

原文：https://isux.tencent.com/high-performance-wechat-app-development.html

前言

微信小程序是一个工程，就和盖房子一样，打好了地基，才能保证后续工程师建立在可靠牢固的基础上。

笔者需要经常新建项目，每次都要重复“修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码”这样的过程，实在是…费心费力。

另一个痛点是：每次新建小程序页面要生成三个文件名相同的文件 ( .wxml、.wxss 和 .js )，命令行太长（据微信同事：也可以在 app.json 的 pages 字段下添加新页面的路径，保存后也会生成对应的文件）。

因此，阅读本文需要对小程序开发稍有了解（简易教程指路）。

目标

我们现在有两个目标：

1. 根据通用模板新建项目
2. 一键新建页面目录以及在目录中的三个文件 ：.wxml、 .wxss 和 .js也可以直接在 app.json 的 pages 字段创建页面，保存后生成这三个文件。笔者没有采用这个方法的缘由一个是开始时不知道有此功能，另一个是不合平时的操作习惯，再者想到 js 文件初始化后，需要引入常用库，要插入代码片段，所以保留了这个功能。

这两个需求其实很简单，不需要 GUI，所以我们可以做一个 npm 命令行工具。想象一下这个命令行用起来应该是什么样的呢：

1. ~ npm install wxapp -g
2. ~ wxapp -i myapp && cd myapp
3. ~ wxapp -p list

用流程图示意就是：

实现

正式开始之前，请先确认本地的开发环境，笔者的本地环境是：

1. ~ npm -v
2. 3.10.10
3. ~ node -v
4. v6.9.4

我们把问题分解为三步：

1. 实现命令行工具，可以在任意目录直接运行
2. 通过输入不同的命令行参数，以执行不同的功能
3. 考虑项目模板的存放位置，是集成到工具中，还是和工具分开呢

不用担心，都很容易解决，我们一个个看。

命令行工具

package.json 中有一个字段是 bin：

1. {
2.   ...
3.   "bin": {
4.       "mywxapp": "./index.js"
5.   }
6. }

等价于在 terminal 中执行：

1. ~ /path/to/index.js

1. npm publish --access public

scope 对使用没有任何影响，但是安装的时候要记得带上 scope name 执行：

1. npm install @scopeName/wxapp-generator -g

模板详解

一千个人中有一千种项目模板。根据业务/个人爱好不同，大家的项目模板可能也相去甚远。笔者自觉目前的模板用起来还不错，将在这一节介绍一下。以下是项目的文件结构：

1. wxapp
2. ├── app.js
3. ├── app.json
4. ├── app.wxss
5. ├── base-styles/
6. ├── images/
7. ├── pages/
8. │ ├── tmpl/
9. ├── utils /
10. │ ├── view.js
11. │ ├── util.js
12. │ ├── polyfiil.js
13. └── └── Deferred.js

之所以采用这样的结构，是希望尽可能解耦 UI 逻辑与业务逻辑。但是由于完全解耦是不可能的，基本思路是单纯的“变量分离”。通常 UI 的改变是通过 class 的切换或者内联样式的调整，所以笔者的思路，是将“要切换的 class”或者“要调整的内联样式”作为变量，由于大部分情况下业务逻辑和 UI 变化是联动的，通过抽离出来的变量，实现在业务逻辑中简单直白地改变 UI。

可能看到这里，读者会有些困惑，那让我们直接以「企鹅听书」为例，具象地看看笔者是怎么做的吧。听书的界面会出现变化的时以下两种场景：

1. 一共有两种播放器：minibar 和 全屏的播放器，播放器的播放按钮有“播放”和“暂停”两种状态（图片）切换，这个可以通过 class 来控制。
2. 当播放器进入全屏模式后，节目列表将被隐藏；点击箭头以后，节目列表将重新显示出来。

上文的文件结构中的 view.js 就是 UI 逻辑的代码。pages/ 目录中的 js 文件将通过 import 引用 view.js，view.js 中的接口分为“通用”和“页面使用”这两个类型：

1. module.exports = {
2. // 通用
3. general: {
4. hide: ‘hide‘, // 变量分离在此
5. show: ‘show‘
6. },
7. // 播放器页面
8. playerView : {
9. class: {
10. listItemPlaying: ‘playing‘
11. }
12. }
13. // 其他页面如果也有需要，以页面为单位添加...
14. }

如果未来出现更多 UI 变化的场景，可以再通过变量添加上去，比如 pageView.id。

举个超级简单的例子（如下），模拟工作流程：

1. 在 wxss 中定义好控制不同样式的 class
2. 将需要变化的 class 写到 view.js 中，并暴露接口
3. 在 wxml 中的对应结构中绑定 event handler
4. 在对应的 page.js 里实现 event handler 的具体内容，也就是切换 class 的触发条件

老司机一看就知道是 MVVC 模式，这样分离也就是为了 UI 有独立的控制器，不至于和业务逻辑耦合严重，在页面开发的阶段就可以完成 UI 上的变化。从这个角度上看，小程序反而能给 UI 工程师更多控制 UI 逻辑的能力，确定好代码规范和接口。

总结

初始化一个项目是开始编码的第一步，值得多花一些时间找到合适团队合适自己的项目模板。

结束之前，先允许笔者打一个广告，企鹅 FM 有两个小程序：致敬传统电台，听广播节目的「小电台」；听有声小说专用的「企鹅听书」。以及轻量版的「微云」。大家可以扫码体验。性能的优化和功能的完善也在一步步迭代中，希望大家多多使用多多反馈意见~ 比心

参考资料

npm 参考

1. 笔者写的小程序项目模板以及小程序生成器
2. 其他开发者写的工具：MeCKodo/wxapp-cli
3. ES2015 & babel 实战：开发 NPM 模块
4. Creating Your First Node.js Command-line Application
5. Writing Command-Line Applications in NodeJS
6. Building command line tools with Node.js
7. npm-developers Developer Guide
8. 如何使用NPM来管理你的Node.js依赖

小程序参考

1. 推荐 · 还不错用的小程序 ST snippet
2. 更新及时的小程序开发汇总
3. 小程序框架 wepy
4. 另一个小程序框架 labrador

高效编写微信小程序

标签：命令行   重复   方法   --   推荐   debug   问题   term   改变   

原文地址：http://www.cnblogs.com/onetwo/p/6647253.html