滴滴公共前端团队 - 小春
前言：
昨天晚上正好在飞机上，然后凌晨才到北京。打开微信，突然好多消息：
是滴，大家都在讨论 微信小程序 ~
滴滴作为第一批的小程序开发者，也和很多开发同学一样，遇到了一些问题，不过还是得到了很多方面的帮助，有内部各个团队的协助，也有微信小伙伴的指导，领导们的支持。
我和我们团队的同学也分别参加了 CSDN 的《SDCC 2016中国软件开发者大会》以及 CSDN 给移动开发者举办的线下分享会，通过我们的技术实践来分享给业界的其他小伙伴。
今天，在这个小程序发布的好时候，我们也对外开放我们内部的一个小程序开发利器 -
miniapps
A useful tool for developing webchat apps
正文：
其实很早之前很多内部和外部的同学都会问我：
小春，滴滴内部小程序的开发人员数目和开发效率如何？
作为团队作战，我们如何提升开发效率？
1、人数 ==> 效率
最早小程序刚出的时候我就安排了一次手把手的小程序内训，
全员安装开发者工具，每人认领一个章节，一个一个地互相学习小程序
目标：
让大家对小程序的 差异有一些真实的认知，而不是冷冰冰的 API 等知识点
在我们立项之后，我不需要担心大家在起步的时候遇到的问题：
1、不知道在哪装开发者工具
2、开发者工具装的时候不能开代理
3、开发者工具使用
4、基本 API 的查询方法和使用
当然，最大的收益是：
开发同学从 传统的 DOM 思维转变了
我们很早就开始应用 Vue，所以切入到小程序这种数据和视图变化的开发基础库的时候障碍少一些
2、工具 ==> 效率
如何评价好的工具：
* 能快速地初始化一个小程序固有文件结构的项目（因为滴滴业务比较多，多个业务都在并行开发小程序）
很多人大部分用的是官方提供的一个初始化项目文件夹
* 开发过程中，我要不停地增加一个一个的新页面
配置好文件名称，自动创建页面文件结构（很多人如果是在开发者工具下，可能还好一些，新版有一些自动化）
* 能不能用 ES6 和预编译样式？
通过配置项目类型：
比如我初始化项目的时候选了 sass 项目，会调用 node-sass 来编译，拿编译好的文件即可
比如你写 ES6，我们会调用 babel-core 来编译
* 通用的组件如何复用？
多页面重复组件抽取通用组件，通过模块化方式下载安装。比如我们这种多业务线的开发，其实最能复用的就是一些通用模块：登录、上车点下车点选择等的，业务同学之间安装对应模块即可
* 能不能把运营的 html 直接解析成满足小程序的版本？
这个估计很多人都在想，也在做
因为运营永远是一个很大的需求，而小程序不支持 webview 打开一个 h5
... 正因为这些，我们给大家开放一个我们内部使用的脚手架工具：miniapps
----------------------------------- 真相来了 ---------------------------------------
git 地址来啦
DDFE/miniapps
如何安装
npm i miniapps -g
依赖: Node.js and Git.
功能
miniapp -h
创建小程序项目
执行 init 命令后，可以看到 目录中生成 src 和 dist 两个文件夹，其中 src 为源码目录，dist目录为编译 src 后生成的目录。dist 目录可用来在小程序开发者工具中打开。
$ miniapp init
Example:
$ miniapp init miniapp-demo
编译
首先，先进入执行初始化命令时指定的目录，然后执行 miniapp build 对 src目录内的文件进行编译。miniapp 会根据文件后缀自动进行相应编译，目前支持 sass -> wxss，stylus-wxss，ES6 -> ES5 的编译，编译后的文件在 dist 目录中。
$ cd miniapp-demo $ miniapp build
监视文件改动
--watch，-w 选项可以让我们在文件发生改动时自动重新编译。
$ cd miniapp-demo $ miniapp build -w
快速生成 page 目录:
该命令可以快速生成符合微信小程序官方规范的目录结构，并且将新页面自动注册到 app.json 文件中
$ miniapp gen
示例:
$ cd miniapp-demo $ miniapp gen auth
以上命令执行后会自动在 src/pages 和 dist/pages 目录中生成 auth 文件夹：
└─┬ src
├─┬ pages
│ ├── auth
│ │ ├── auth.js
│ │ ├── auth.json
│ │ ├── auth.wxml
│ │ ├── auth.sass
...
└─┬ dist
├─┬ pages
│ ├── auth
│ │ ├── auth.js
│ │ ├── auth.json
│ │ ├── auth.wxml
│ │ ├── auth.wxss
...
安装组件:
除了使用 miniapp gen 来快速生成 page 结构，我们还可以使用 miniapp install 来从 git 安装指定页面，目前所有模块都将在 github.com/miniapps-te…该项目下获取。
$ miniapp i
示例:
$ cd miniapp-demo $ miniapp i login
以上命令执行后，会依次执行以下步骤： 1. 从 repo github.com/miniapps-te…下载。 2. 拷贝 minapp-widget-login repo 中的组件到 src/pages 和 dist/pages 下。
未完:
大家发现，我们没有把 h5 parse 到微信小程序格式的放出来，请期待~