滴滴公共前端團隊 - 小春
前言：
昨天晚上正好在飛機上，然後凌晨才到北京。開啟微信，突然好多訊息：
是滴，大家都在討論微信小程式 ~
滴滴作為第一批的小程式開發者，也和很多開發同學一樣，遇到了一些問題，不過還是得到了很多方面的幫助，有內部各個團隊的協助，也有微信小夥伴的指導，領導們的支援。
我和我們團隊的同學也分別參加了 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 地址來啦
如何安裝
npm i miniapps -g
功能
miniapp -h
建立小程式專案
執行 init 命令後，可以看到 目錄中生成 src 和 dist 兩個資料夾，其中 src 為原始碼目錄，dist目錄為編譯 src 後生成的目錄。dist 目錄可用來在小程式開發者工具中開啟。
$ miniapp init <project-name>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 <page_name>示例:
$ 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 <widget_name>示例:
$ cd miniapp-demo
$ miniapp i login以上命令執行後，會依次執行以下步驟： 1. 從 repo github.com/miniapps-te…下載。 2. 拷貝 minapp-widget-login repo 中的元件到 src/pages 和 dist/pages 下。
未完:
大家發現，我們沒有把 h5 parse 到微信小程式格式的放出來，請期待~