資訊專欄INFORMATION COLUMN
摘要：前言不久前我們一直所期待的應(yīng)用號終于誕生了，但微信制造了一系列的封閉環(huán)境，在內(nèi)測版中，我們看見了開發(fā)其實是十分不便利的。未來小程序完全公測了，微信可能會把工程化的問題也一并解決了。
前言
wxapp介紹 優(yōu)勢不久前我們一直所期待的應(yīng)（xiao）用（cheng）號（xu）終于誕生了，但微信制造了一系列的封閉環(huán)境，在內(nèi)測版中，我們看見了開發(fā)其實是十分不便利的。為了能提升咱們的工作效率，小手架由此而生 --- wxapp
1.可以在任意IDE中開發(fā)
2.可使用ES6或ES5
3.可使用sass
4.可以同時編寫.html|.wxml，.wxss|.scss 文件，最后都會轉(zhuǎn)換為.wxml和.wxss
5.編寫完任何文件（包括.json）只需要去微信開發(fā)者工具中點擊重啟即可預(yù)覽
6.NODE_ENV 環(huán)境切換
劣勢1.由于微信封閉的環(huán)境內(nèi)，所以沒有sourcemap，但這不太影響調(diào)試（即使是經(jīng)過編譯后的代碼，本人測試了出bug的代碼，還是可以從控制臺跳到源碼的地方）
2.由于微信封閉的環(huán)境內(nèi)，無法實現(xiàn)reload或者hot reload
安裝PS: 當(dāng)然如果你不想寫ES6也是完全可以的 在后面統(tǒng)一介紹命令
// 安裝我們的命令 //mac sudo npm i -g wxapp // window npm i -g wxapp使用
// 初始化一個目錄結(jié)構(gòu) wxapp init [project_name] // 如 wxapp init first-wxappDEV
npm run dev // 默認(rèn)啟用了ES6模式
npm run dev-es5 // 不啟用ES6模式
--- dist
... // 這里的文件是編譯處理過后的，和src目錄結(jié)構(gòu)完全相同
--- 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
...
接著我們只需要打開微信開發(fā)者工具，添加項目，那個項目目錄指向為dist目錄即可。
開發(fā)中往往我們需要有dev和pro環(huán)境，根據(jù)不同環(huán)境下做一些事情，比如HTTP的請求鏈接
// ES6開發(fā)模式下
// ./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開發(fā)模式下
// ./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 // 默認(rèn)ES6模式
npm run build-es5 // 使用ES5編寫模式
PS：這里有個坑，由于build會壓縮代碼，所以如果你用ES5編寫，別用promise這樣的ES6的代碼，uglify壓縮不支持。
雖然微信開發(fā)者工具用谷歌內(nèi)核貌似支持部分ES6的代碼，但現(xiàn)在也不能保證用戶真正使用是否支持。如果寫了ES5模式，建議大家寫純純的ES5
TODO我們知道微信希望我們創(chuàng)建4個文件來寫page或者組件。所以下一個版本我會寫個命令創(chuàng)建這4個文件的template。
[ ] 一鍵創(chuàng)建文件
后話小程序目前還在內(nèi)測當(dāng)中，本人憑著直覺和經(jīng)驗直接做出了這一套腳手架，在測試上可能略有不足。（目前測試了node5和node6版本，window10和mac）。大家有問題可以第一時間給我提issue，我會在一天內(nèi)給你答復(fù)。
未來小程序完全公測了，微信可能會把工程化的問題也一并解決了。但是我還是更愿意在喜歡的IDE中編寫代碼 :)
最后給出github地址：https://github.com/MeCKodo/wxapp-cli
硬廣！最近我們創(chuàng)建了一個線上組織 --- 裂變科研中心
裂變科研中心是一個致力于開源的線上自由組織。
我們一直保持著對高效、創(chuàng)新、開源的追求。
希望能給大家在技術(shù)或人生的道路上帶來不一樣的陪伴。
裂變式的成長期待你的加入。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80476.html
摘要：前戲今年，對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。盡可能的把溝通成本用約定和文檔降低。學(xué)習(xí)的這一年可以說年的學(xué)習(xí)，在上半年的精力，放在了技術(shù)上。而下半年則相反。 前戲 今年，對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。 15年9月大三休學(xué)創(chuàng)業(yè)，16年9月重新復(fù)學(xué)大三 在2016年4月順利引進(jìn)天使輪，公司從廈門集美區(qū)搬到了深圳南山區(qū) 16年底，我們正在準(zhǔn)備接入A輪 16年與15年相比，總體來...
摘要：什么是官網(wǎng)是一個由組件搭建而成的微框架是當(dāng)前最快的框架之一在什么時候使用專為微服務(wù)或者設(shè)計舉個例子如果你的應(yīng)用里面有部分業(yè)務(wù)邏輯的請求頻率比較高就可以單獨把這部分業(yè)務(wù)邏輯拿出來使用來構(gòu)建一個小因為是對優(yōu)化了框架的加載機制所以對資源的要求少很 什么是 Lumen?官網(wǎng) lumen 是一個由 Laravel 組件搭建而成的微框架,是當(dāng)前最快的 PHP 框架之一! 在什么時候使用 Lume...
摘要：一個專為構(gòu)建現(xiàn)代應(yīng)用而生的框架是一個強大靈活的框架。與其他框架有什么不同速度和簡單。本文也對這個當(dāng)今最流行之一的框架做了一個明確的介紹。到本系列的最后部分，你會感覺到用從頭開始編寫一個完整的應(yīng)用是多么的舒服。 一個專為構(gòu)建現(xiàn)代PHP應(yīng)用而生的Web框架 Laravel是一個強大、靈活的PHP框架。它有非常活躍的社區(qū)和工具生態(tài)系統(tǒng)。因此它越來越吸引人。Laravel的文檔寫的也是非常的詳...
閱讀 4015·2021-11-22 15:31
閱讀 2564·2021-11-18 13:20
閱讀 3140·2021-11-15 11:37
閱讀 7157·2021-09-22 15:59
閱讀 774·2021-09-13 10:27
閱讀 3807·2021-09-09 09:33
閱讀 1472·2019-08-30 15:53
閱讀 2590·2019-08-29 15:37
