jack-lo / wx-mini-app

微信小程序开发脚手架。

wx-mini-app

微信小程序开发脚手架。

介绍

微信开发者工具把预览、调试以及编辑器都集成在一起，而且小程序使用了自定义的文件类型，这在一定程度上限制了开发者使用自己熟悉的编辑器以及辅助工具。为了使开发者可以用上自己熟悉的编辑器以及各种熟悉的预处理语言，回到平时里的web编程环境，我们需要一套脚手架来做一些基础的转换工作。

本套工具默认集成了sass（css预处理）和swig（html模板引擎），开发者可以自行更换修改甚至添加新的文件类型处理任务。

功能

为了方便工作，我们提供了以下几个功能命令：

1. npm run dev开发模式，文件修改，自动编译；
2. npm run clean一键清除dist目录下的文件，慎用；
3. npm run trans一键转换app目录下的文件类型，把小程序格式的文件转换为指定的预处理语言文件格式。此功能主要针对旧项目移植，把原有小程序项目的文件全部拷贝到app文件夹下，然后执行该脚本，即可开始使用本套脚手架开发；
4. npm run qs一键加载quick start项目，完成初始化；
5. npm run build编译打包，其实跟dev模式只是少了watch的功能而已。

初始化

主要使用的打包工具是gulp，所以gulp需要全局安装：

npm install gulp -g

1. 直接git clone；
2. 命令行切换到当前目录；
3. 输入npm install，回车一下安装npm包（如果是yarn则使用yarn install）；
4. 输入npm run dev，回车，搞定！

开发

打开微信开发者工具，把这个项目下的 dist 文件夹添为小程序项目。小程序正常运行之后，打开自己熟悉的编辑器，添加整个项目（wx-mini-app），然后随便修改一个文件，比如app.js，ctrl+s保存一下，开发者工具的预览界面就会自动刷新了！

项目结构

- wx-mini-app
  |- app  // 源文件夹
  | |- common  // 公共模块文件夹
  | | |- style  // 公共样式文件夹
  | | `- tlp  // 公共样式文件夹
  | |- pages  // 小程序页面文件夹
  | `- plugins  // 插件文件夹
  |- dist  // 打包文件夹
  `- package.json

common是作为公共模块的存放目录，存放在common中的文件会被编译打包到对应文件当中，但是不会单独出现在dist中，也就是dist文件夹里不会有common文件夹出现。

pages即小程序中对应的pages文件夹，用来存放页面文件，使用预处理语言编写，对应编译成小程序支持的文件格式。

plugins是插件文件夹，用来存放一些公共js插件，由于小程序支持直接require文件，所以不同于common，plugins会出现在dist目录中。

dist是打包文件夹，也就是最终在 开发者工具中引入的小程序目录 ，不要把最外层的目录（wx-mini-app）当小程序目录引入哦～

补充

1. 再强调一遍，最终在 开发者工具中引入的小程序目录 是dist不是app；
2. 使用git clone命令克隆下来的项目，会默认将本地文件夹“git”化，为了方便“去掉git管理”，可以使用命令gulp gitRemove一键清除（不是主要功能，所以在package.json中没有封装脚本）；
3. 目前提供的quick start项目为简洁版本，比开发者工具默认生成的quick start更简单，如果需要使用后者，请使用开发者工具添加app目录以后生成quick start，然后移除项目，重新添加dist目录为小程序目录，再使用npm run trans一键转换文件格式。
4. 一键初始化npm run qs为了安全起见，只有在app目录为空的情况下才能生效，如果目录不为空，该操作将自动取消，不会覆盖；
5. git clone下来的项目是没有app和dist目录的，可以通过一次npm run qs生成app目录，或者手动添加。