爲小程序而生的小(jiao)手架

前言

不久前咱們一直所期待的應（xiao）用（cheng）號（xu）終於誕生了，但微信製造了一系列的封閉環境，在內測版中，咱們看見了開發實際上是十分不便利的。爲了能提高我們的工做效率，小手架由此而生 --- wxapp

wxapp介紹

優點

1.能夠在任意IDE中開發

2.可以使用ES6或ES5

3.可以使用sass

4.能夠同時編寫.html|.wxml，.wxss|.scss 文件，最後都會轉換爲.wxml和.wxss

5.編寫完任何文件（包括.json）只須要去微信開發者工具中點擊重啓便可預覽

6.NODE_ENV 環境切換

劣勢

1.因爲微信封閉的環境內，因此沒有sourcemap，但這不太影響調試（即便是通過編譯後的代碼，本人測試了出bug的代碼，仍是能夠從控制檯跳到源碼的地方）

2.因爲微信封閉的環境內，沒法實現reload或者hot reload

PS: 固然若是你不想寫ES6也是徹底能夠的 在後面統一介紹命令

安裝

// 安裝咱們的命令
//mac
sudo npm i -g wxapp
// window
npm i -g wxapp

使用

// 初始化一個目錄結構
wxapp init [project_name]

// 如
wxapp init first-wxapp

DEV

npm run dev // 默認啓用了ES6模式

npm run dev-es5 // 不啓用ES6模式

--- dist
... // 這裏的文件是編譯處理事後的，和src目錄結構徹底相同     
--- src
    |--- image
    |--- pages
        |--- index
            |--- index.js
            |--- index.scss （可直接編寫sass）
            |--- index.html (可直接編寫html文件)
        |--- logs
            |--- logs.js
            |--- logs.json （json文件也會實時編譯）
            |--- logs.wxml （也可直接寫wxml文件）
            |--- logs.wxss （也可直接寫wxss文件）
    app.js
    app.json
    app.sass
...

接着咱們只須要打開微信開發者工具，添加項目，那個項目目錄指向爲dist目錄便可。

NODE_ENV

開發中每每咱們須要有dev和pro環境，根據不一樣環境下作一些事情，好比HTTP的請求連接

// ES6開發模式下
//  ./src/utils/ajaxurl.js
var server1 = 'https://im.server1.url';
var server2 = 'https://im.server2.url';

var server = null;
        
if(NODE_ENV === 'dev') {
    server = server1;
} else if(NODE_ENV === 'production') {
    server = server2;
}
  
module.exports = server;

// ES5開發模式下  
//  ./src/utils/ajaxurl.js
var server1 = 'https://im.server1.url';
var server2 = 'https://im.server2.url';

var server = null;
        
if('NODE_ENV' === 'dev') { // 這裏要寫字符串，我會替換這裏的字符串
    server = server1;
} else if('NODE_ENV' === 'production') {
    server = server2;
}
  
module.exports = server;

Build

npm run build // 默認ES6模式

npm run build-es5 // 使用ES5編寫模式

PS：這裏有個坑，因爲build會壓縮代碼，因此若是你用ES5編寫，別用promise這樣的ES6的代碼，uglify壓縮不支持。

雖然微信開發者工具用谷歌內核貌似支持部分ES6的代碼，但如今也不能保證用戶真正使用是否支持。若是寫了ES5模式，建議你們寫純純的ES5

TODO

咱們知道微信但願咱們建立4個文件來寫page或者組件。因此下一個版本我會寫個命令建立這4個文件的template。

• [ ] 一鍵建立文件

後話

小程序目前還在內測當中，本人憑着直覺和經驗直接作出了這一套腳手架，在測試上可能略有不足。（目前測試了node5和node6版本，window10和mac）。你們有問題能夠第一時間給我提issue，我會在一天內給你答覆。

將來小程序徹底公測了，微信可能會把工程化的問題也一併解決了。可是我仍是更願意在喜歡的IDE中編寫代碼 :)

最後給出github地址：https://github.com/MeCKodo/wxapp-cli

硬廣！

最近咱們建立了一個線上組織 --- 裂變科研中心

裂變科研中心是一個致力於開源的線上自由組織。

咱們一直保持着對高效、創新、開源的追求。

但願能給你們在技術或人生的道路上帶來不同的陪伴。

裂變式的成長期待你的加入。