螞蟻部落格教程地址

必要條件

• 需要去官網nwjs.io下載sdk(需翻牆)
• 需要app node_modules package.json 檔案以及資料夾(推薦去mac系統下拷貝)
• wine[1.6,1.7,1.8],任意一個版本都可以,本人wine1.8測試通過(小程式編譯需要)

版本

• 微信開發者工具 v0.12.130400
• nw.js sdk v0.19.5
• wine1.8

目錄結構

新建wechat_web_devtools目錄
解壓 sdk,將sdk中的全部檔案複製到 wechat_web_devtools目錄
將app node_modules package.json

複製到wechat_web_devtools目錄中

異常處理

開啟終端,進入到wechat_web_devtools目錄,執行./nw

無需任何懷疑,絕對報錯,主要因為檔案大小寫問題導致,在當前目錄下執行如下命令(建議單條執行)

sed -i 's/\.\/Create\/create\.js/\.\/create\/create\.js/ig'  app/dist/components/ContainController.js
sed -i 's/\.\/main\.js/\.\/Main\.js/ig' app/dist/components/ContainController.js
sed -i 's/\.\/webview\/Picker/\.\/webview\/picker/ig' app/dist/components/simulator/controller.js
sed -i 's/\.\/webview\/ActionSheet\.js/\.\/webview\/actionSheet\.js/ig' app/dist/components/simulator/controller.js
sed -i 's/appServiceConfig\.js/appserviceConfig\.js/ig' app/dist/common/assdk/networkSdk.js
 

修改package.json檔案

• windows拷貝過來的檔案
  

--disable-devtools -ignore-certificate-errors -load-extension=./package.nw/app/dist/extensions/
改成
--disable-devtools -ignore-certificate-errors -load-extension=app/dist/extensions/

• mac拷貝過來的檔案
  

--disable-devtools -ignore-certificate-errors -load-extension=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/extensions/

改成
--disable-devtools -ignore-certificate-errors -load-extension=app/dist/extensions/

未安裝wine後果

由於一開始未安裝wine,導致專案無法預覽,進度條會一直卡在那裡,控制檯會報錯

後來發現微信小程式編譯需要~/.config/微信web開發者工具/WeappVendor目錄下的wcc.exe wcsc.exe,但是.exe檔案需要安裝wine,linux系統才能識別到

如果電腦已經安裝wine,執行./nw會出現以下介面

此處wine會自動安裝依賴,所需時間會很長

未知原因

拷貝windows安裝目錄下的檔案,即使能正常執行但把視窗縮小,會導致左上角三個按鈕消失,目前無解

解決辦法,去mac系統下拷貝一切正常

最終效果圖

下載

本專案用到的開發工具以及軟體版本,目前是最新版,以後或許不會再更新,如果不介意,可以直接去網盤上下載

連結：https://share.weiyun.com/f17b9c5cbf54377b3a38037fd7a66c36 密碼：sHOBNf