主要功能:
實時更新禽篱,支持 wxml wxss javascript json
更加穩(wěn)定寝志,不像官方工具經常出錯
沒有限制忘分,無需聯(lián)網爵川,無需后端配置 CORS 敷鸦,支持移動瀏覽器調試
實時刷新演示優(yōu)酷視頻地址: http://v.youku.com/v_show/id_XMTc1OTI0NTc0OA==.html
個人測試 Mac 和 win7 上可用,如遇到 bug 寝贡,歡迎 github 開 issue 扒披。
詳細介紹
WEPT 是一款微信小程序實時運行環(huán)境,相比于現(xiàn)在官方提供的開發(fā)者工具圃泡,它具備以下幾個特點:
完全實時:它已全面支持 wxml碟案, wxss,javscript 和 json 文件的自動熱更新颇蜡,文件保存后相應變化會自動更新到小程序的運行環(huán)境价说,開發(fā)者完全不需要重建、重啟操作风秤,絕大多數情況下(除非修改 app.json )也不需要刷新鳖目。因為沒有了刷新,開發(fā)者不用再費時去操作界面重現(xiàn)修改前的頁面狀態(tài)缤弦。整個過程支持多終端同步進行领迈。
更加穩(wěn)定: WEPT 的小程序構建過程相比官方工具要更加穩(wěn)定,不會像官方工具一樣經常性報錯 appservice not ready
甸鸟,甚至直接崩潰惦费,如果遇到后臺或者小程序構建錯誤兵迅,它會在頁面上即時給出錯誤提醒抢韭。如果你安裝了 growl或者 terminal-notifier,它還會同時在桌面上彈出錯誤提醒恍箭。
沒有限制: WEPT 生成的小程序頁面可以運行在移動端瀏覽器上面刻恭,使用過程也無需聯(lián)網。它通過一個定制的代理協(xié)議使用后臺轉發(fā) XHR 請求扯夭,開發(fā)者無需配置后端 CORS 即可調試鳍贾。
更多的 API: WEPT 除了支持全部官方已支持 API 之外,還實現(xiàn)了重力感應和羅盤的 API交洗,你可以在支持相應 html5 接口的移動端瀏覽器上進行調試骑科。
??實現(xiàn)原理??
詳細的實現(xiàn)方式請參考我之前發(fā)的文章:
微信小程序架構分析 (上)
微信小程序架構分析 (中)
微信小程序架構分析 (下)
簡單說它就是一個與后端通過 WebSocket 接口與前端進行實時通訊的 web 服務。后端服務請求時動態(tài)編譯所需文件构拳,前端通過 iframe 實現(xiàn)了 view 層咆爽、service 層以及控制層頁面的多方通訊和控制邏輯梁棠。
前端 view 層和 service 層代碼來自微信開發(fā)者工具最新版本(目前是 101100, 稍作修改以支持 iframe 通訊以及自動更新),控制層頁面是完全重新實現(xiàn)的斗埂,使用了一點 React進行 UI 狀態(tài)同步符糊。
??安裝 & 使用 ??
首先你需要安裝 node,請確保版本大于 6.0呛凶,低版本有可能報錯男娄。
然后任意目錄運行:
npm install -g wept
安裝完成后在項目根目錄下運行, 官方 demo 下載:
wept
即可開啟服務,訪問 http://localhost:3000
開始調試(推薦使用 Chrome developer devtools 開啟啟動模式調試)漾稀,你也可以通過 -p
參數換個端口模闲,例如:
wept -p 4000
手機訪問記得使用電腦的局域網 IP 地址。
??API 支持情況 ??
以下是當前所有小程序 API 的支持情況:
? app.json window 設置
? app.json tabbar 設置
? 微信登錄:目前返回同官方工具無 appid 狀態(tài)一致崭捍,為模擬返回
? 獲取用戶信息接口:返回測試用數據
? 發(fā)起支付:同官方工具無 appid 狀態(tài)围橡,無法使用
? 設置界面標題
? 標題欄加載動畫
? 頁面跳轉
? 下拉刷新
? 創(chuàng)建動畫
? 創(chuàng)建 Canvas 繪畫
? 獲取手機網絡狀態(tài):默認返回 WIFI
? 獲取手機系統(tǒng)信息:同官方工具,返回為模擬返回
? 監(jiān)聽重力感應數據:支持 Safari mobile 等移動瀏覽器調試缕贡,官方工具(101100)不支持
? 監(jiān)聽羅盤數據:支持 Safari mobile 等移動瀏覽器調試翁授,官方工具(101100)不支持
? request 請求接口
? websocket 接口
? 上傳、下載文件
? 保存文件
? 選擇/預覽圖片
? 選擇視頻
? 錄音 API
? 音頻播放控制
? 背景音樂控制
? 獲取當前位置
? 使用原生地圖查看位置
? storage 同步 API
? storage 異步 API
Hello小程序將與您共同成長晾咪。微信號:130870319 QQ群:40726600