258资源分享网

前言微信小程序是一个工程，就和盖房子一样，打好了地基，才能保证后续工程师建立在可靠牢固的基础上。笔者需要经常新建项目，每次都要重复“修改项目结构 - 从老项目中复制粘贴文件 - ...

 

 

 

前言

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

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

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

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

目标

我们现在有两个目标：

根据通用模板新建项目

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

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

~ npm install wxapp -g ~ wxapp -i myapp && cd myapp ~ wxapp -p list

用流程图示意就是：

实现

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

~ npm -v 3.10.10 ~ node -v v6.9.4

我们把问题分解为三步：

实现命令行工具，可以在任意目录直接运行

通过输入不同的命令行参数，以执行不同的功能

考虑项目模板的存放位置，是集成到工具中，还是和工具分开呢

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

命令行工具

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

{ ... "bin": { "mywxapp": "./index.js" } }

这个字段可以将开发者希望执行的脚本注册到环境变量 (PATH) 中，不同的 key 对应执行不同的脚本。也就是说现在，当我们直接在命令行中执行：

~ mywxapp

等价于在 terminal 中执行：

~ /path/to/index.js

第一个问题轻松解决，关于 bin 字段更多信息请参考 npm 文档中 package.json 一节 。

命令行参数

执行 index.js 时，可以通过 process.argv 获取执行时的参数，但是要从参数数组中拆分出参数无疑很麻烦。不过，npm 发展至今，处理命令行参数的库肯定存在， 就是 commander 。简单好用易上手，那么第二个问题也解决啦。

项目模板的存放位置

考虑项目模板的存放位置，是集成到工具中，还是和工具分开呢？

笔者选择分开管理。 在一个单独的模板代码仓库中管理模板内容，方便我们维护。目前的模板还比较简单（详见下文“模板详解”），只有标准目录结构，预期后面会加上自动化的部分（比如 less -> wxss），所以未来会改动比较频繁。

download-git-repo 可以把给定地址的仓库内容拷贝到执行目录中 。API 简单，所以就是它了。

问题都解决了，现在就让我们看看伪代码 （注意：伪码中没有考虑出错情况） ：

const mkdirp = require('mkdirp'); const download = require('download-git-repo'); // 创建项目 function initProj(projName){ if(currentDir.exsits(projName)) console.warn(projName + '项目已经存在于当前目录中，请使用别的名字'); else download('path/to/tmpl', currentDir+'/'+projName); } // 注册页面 function registerPage(pagesName) { // 读配置文件 readFile(configFile, function(data){ // 将新建的所有页面都写入配置文件中 for(name in pagesName){ data.pages.push('pages/' + name + '/' + name); } writeFile(configFile); }); } // 创建页面 function createPage(pages) { for(var index in pages) { var page = pages[index]; mkdirp(pagePath, function(){ createFile(page+'.wxml'); createFile(page+'.wxss'); createFile(page+'.js'); }) } // 将页面注册到 app.json 中 registerPage(pages); }

使用

在编写好了这个工具之后，只需要在 本地全局使用 的话：

npm install -g

在本地开发过程中，如果更新了开发版本的代码，需要更新同步到全局，这时候需要执行：

npm link