介紹一款微信小程式第三方開發工具（WEPT）

微信小程式開發工具第三方開發工具WEPT，WEPT主要功能： 即時更新，支援wxml wxss javascript json 更穩定，不像官方工具經常出錯沒有限制，無需聯網，無需後端配置CORS ，支援行動瀏覽。

專案位址：github.com/chemzqm/wept

WEPT主要功能：

即時更新，支援wxml wxss javascript json

更加穩定，不像官方工具經常出錯

沒有限制，無需聯網，無需後端配置CORS ，支援行動瀏覽器調試

個人測試Mac 和win7 上可用，如遇到bug ，歡迎github 開issue 。

詳細介紹

WEPT 是一款微信小程式即時運作環境，相較於現在官方提供的開發者工具，它具備以下幾個特點：

1.完全即時：它已全面支援wxml， wxss，javscript 和json 檔案的自動熱更新，檔案保存後相應變更會自動更新到小程式的運行環境，開發者完全不需要重建、重新啟動操作，絕大多數情況下（除非修改app.json ）也不需要刷新。因為沒有了刷新，開發者不用再費時去操作介面重現修改前的頁面狀態。整個過程支援多終端同步進行。

2.更穩定： WEPT 的小程式建置流程相比官方工具要更加穩定，不會像官方工具一樣經常性報錯appservice not ready，甚至直接崩潰，如果遇到後台或者小程式構建錯誤，它會在頁面上即時給予錯誤提醒。如果你安裝了 growl或 terminal-notifier，它也會同時在桌面上彈出錯誤提醒。

3.沒有限制： WEPT 產生的小程式頁面可以運行在行動裝置瀏覽器上面，使用過程也不需要連網。它透過一個客製化的代理協議使用後台轉發 XHR 請求，開發者無需配置後端 CORS 即可調試。

4.更多的 API： WEPT 除了支援全部官方已支援 API 之外，還實作了重力感應和羅盤的 API，你可以在支援對應 html5 介面的行動端瀏覽器上進行偵錯。

實作原理

簡單來說它就是一個與後端透過 WebSocket 介面與前端進行即時通訊的 web 服務。後端服務請求時動態編譯所需文件，

前端透過 iframe 實作了 view 層、service 層以及控制層頁面的多方通訊和控制邏輯。

 

前端view 層和service 層程式碼來自微信開發者工具最新版本（目前是101100, 

稍作修改以支援iframe 通訊以及自動更新），控制層頁面是完全重新實現的，使用了一點React

進行UI 狀態同步。

安裝 & 使用

1.首先你需要安裝 node，請確保版本大於 6.0，低版本有可能報錯。

2.然後任意目錄運行：

3.npm install -g wept

4.安裝完成後在專案根目錄下運行, 官方demo 下載：

5.wept

即可開啟服務，訪問localhost:3000 開始調試（推薦使用Chrome developer devtools 開啟啟動模式調試），

你也可以透過-p 參數換個端口，例如：

wept -p 4000

手機存取記得使用電腦的區域網路IP 位址。

API 支援情況

以下是目前所有小程式API 的支援情況：

 

✓ app.json window 設定

# ✓ app.json tabbar 設定

✓ 微信登入：目前返回同官方工具無appid 狀態一致，為模擬返回

##✓ 取得使用者資訊介面：返回測試用資料

✗ 發起付款：同官方工具無appid 狀態，無法使用

✓ 設定介面標題

✓ 標題列載入動畫

✓ 頁面跳轉

#✓ 下拉刷新

✓ 建立動畫

##✓ 建立Canvas 繪畫

✓ 取得手機網路狀態：預設回傳WIFI

✓ 取得手機系統資訊：同官方工具，返回模擬返回

✓ 監聽重力感應資料：支援Safari mobile 等行動瀏覽器調試，官方工具（101100）不支援

✓ 監聽羅盤資料：支援Safari mobile等行動瀏覽器除錯，官方工具（101100）不支援######✓ request 請求介面######✓ websocket 介面######✓ 上傳、下載檔案######✓儲存檔案######✓ 選擇/預覽圖片######✓ 選擇影片#######✓ 錄音API######✓ 音訊播放控制#####✓ 背景音樂控制######✓ 取得目前位置######✓ 使用原生地圖檢視位置######✓ storage 同步API######✓ storage 非同步API#######未來計畫######圖片預覽功能支援######wxml，storage，appData 開發者工具面板支援######提供桌面端工具支援###

以上是介紹一款微信小程式第三方開發工具（WEPT）的詳細內容。更多資訊請關注PHP中文網其他相關文章！