如何高效编写微信小程序？腾讯工程师完成的两个项目总结

作者经常要创建新项目，每次都要重复“修改项目结构->从旧项目中复制粘贴文件->删除其中的一些代码”的过程老项目”，这着实是费了不少力气。如何高效编写微信小程序？我们来看看腾讯工程师总结的这个方法吧！

还有一个痛点是：每次新建一个小程序页面，都需要生成三个文件名相同的文件（.wxml、.wxss、.js），而且命令行太长（根据我们的微信同事：您也可以在app.json中创建新的小程序页面，在page字段中添加新的页面路径，保存后会创建对应的文件）。

因此，阅读本文需要对小程序开发有一点了解（简单教程指南）

目标

现在我们有两个目标：

基于通用模板创建一个新项目 ❀一键新建页面目录和目录中的三个文件：.wxml、.wxss和.js。也可以直接在app.json页面字段创建页面，保存后生成三个文件。笔者之所以没有使用这个方法，一是我一开始并不知道这个功能的存在，二是因为它不符合平时的操作习惯。再者，我认为js文件初始化后，应该引入公共库，并包含代码片段，这样就可以保存这个函数了。
这两个需求非常简单，不需要GUI，所以我们可以创建npm命令行工具。想象一下这个命令行使用时是什么样的：

用流程图来说明就是：

实现

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

我们将问题分解为三步：

实现一个命令行工具，可以直接在任意目录下打开
输入不同的命令行参数，执行不同的功能
项目模板存放位置，是应该与工具结合还是与工具分离
别担心，一切都很容易解决，我们来一一看看。

命令行工具

package.json 有一个名为 bin 的字段：

这个字段可以将开发者想要执行的脚本注册到环境变量（PATH）中。不同的按钮对应不同的脚本。也就是现在，当我们直接在命令行中执行：

和在终端中执行是一样的：

第一个问题就可以轻松解决了。有关 bin 字段的更多信息，请参阅 npm 文档中的 package.json。节日。

命令行参数

执行index.js时，可以通过process.argv获取执行参数，但总是很难将参数与参数数组分开。不过，npm 发展至今，一个处理命令行参数的库一直存在，即 Commander。简单、好用、好用，所以第二个问题也解决了。

项目模板存储位置

查看项目模板存储位置。它是集成到工具中还是与工具分开？

笔者选择单独整理。

将模板内容整理在单独的模板代码仓库中，方便我们维护。目前的模板比较简单（参见下面的“模板详细说明”），只有标准的目录结构。预计稍后会添加自动部分（例如 less -> wxss），因此将来会更频繁地更改。

download-git-repo 可以将给定地址的存储库内容复制到可执行目录。 API 很简单，就是这样。

问题解决了，现在我们看一下伪代码（注：伪代码中不考虑错误条件）：

使用

写完这个工具后，只需要在本地使用即可。和全局：

本地开发过程中，如果开发版本代码有更新，必须同步到全局世界。这时候你必须执行：