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

Y2J
發布: 2017-05-02 10:21:23
原創
3163 人瀏覽過

微信小程式開發工具第三方開發工具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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板