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

alighters 發布于2019-08-20 11:16 / 1947人閱讀

摘要：前言不久前我們一直所期待的應用號終于誕生了，但微信制造了一系列的封閉環境，在內測版中，我們看見了開發其實是十分不便利的。未來小程序完全公測了，微信可能會把工程化的問題也一并解決了。

前言

不久前我們一直所期待的應（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

硬廣！

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

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

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

希望能給大家在技術或人生的道路上帶來不一樣的陪伴。

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

GPU云服務器云服務器我的小程序小程序附近的小程序免費的小程序自己的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80476.html

毫無色彩的二哲和他的巡禮之年

摘要：前戲今年，對于我個人而言遭遇了三個重大的轉折點。盡可能的把溝通成本用約定和文檔降低。學習的這一年可以說年的學習，在上半年的精力，放在了技術上。而下半年則相反。前戲今年，對于我個人而言遭遇了三個重大的轉折點。 15年9月大三休學創業，16年9月重新復學大三在2016年4月順利引進天使輪，公司從廈門集美區搬到了深圳南山區 16年底，我們正在準備接入A輪 16年與15年相比，總體來...

Alex 2019-08-20 14:05 評論0 收藏0
Lumen---為速度而生的 Laravel 框架

摘要：什么是官網是一個由組件搭建而成的微框架是當前最快的框架之一在什么時候使用專為微服務或者設計舉個例子如果你的應用里面有部分業務邏輯的請求頻率比較高就可以單獨把這部分業務邏輯拿出來使用來構建一個小因為是對優化了框架的加載機制所以對資源的要求少很什么是 Lumen?官網 lumen 是一個由 Laravel 組件搭建而成的微框架,是當前最快的 PHP 框架之一! 在什么時候使用 Lume...

104828720 2019-06-27 12:16 評論0 收藏0
微信小程序資源匯總

awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發框架實用庫開發工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評論0 收藏0
一個專為構建現代PHP應用而生的Web框架

摘要：一個專為構建現代應用而生的框架是一個強大靈活的框架。與其他框架有什么不同速度和簡單。本文也對這個當今最流行之一的框架做了一個明確的介紹。到本系列的最后部分，你會感覺到用從頭開始編寫一個完整的應用是多么的舒服。一個專為構建現代PHP應用而生的Web框架 Laravel是一個強大、靈活的PHP框架。它有非常活躍的社區和工具生態系統。因此它越來越吸引人。Laravel的文檔寫的也是非常的詳...

layman 2019-06-28 18:37 評論0 收藏0