微信Web開(kāi)發(fā)者工具只有window版本和mac版本，如果想要在Linux系統(tǒng)下運(yùn)行微信Web開(kāi)發(fā)者工具，需要花費(fèi)很大周折。

注：帶 * 的步驟或文件為不確定是否管用的步驟或文件。

本人系統(tǒng)為L(zhǎng)inux Mint 18.1版本。

1、下載nwjs

下載nwjs(http://nwjs.io/)的SDK。

2、將微信web開(kāi)發(fā)者工具拷貝到nwjs

將在window系統(tǒng)下安裝的微信web開(kāi)發(fā)者工具文件夾中的package.nw、icon.ico、* 微信web開(kāi)發(fā)者工具.exe拷貝到nwjs sdk解壓后的文件夾內(nèi)。

* 解壓 微信web開(kāi)發(fā)者工具.exe，將解壓后的文件夾內(nèi)的文件移動(dòng)到nwjs sdk解壓后的文件夾內(nèi)。

3、修改代碼

進(jìn)入到nwjs文件夾，在終端內(nèi)運(yùn)行

$ ./nw

會(huì)出現(xiàn)提示 Cannot find module ‘......‘

根據(jù)提示，在提示錯(cuò)誤的文件內(nèi)修改module名，因?yàn)槊执笮?xiě)會(huì)有錯(cuò)誤，比如appServiceConfig模塊，它的實(shí)際模塊名是appserviceConfig，這些都是大小寫(xiě)字母錯(cuò)誤導(dǎo)致找不到模塊。

會(huì)有幾個(gè)文件需要修改，根據(jù)錯(cuò)誤提示修改。

4、在微信小程序項(xiàng)目文件內(nèi)創(chuàng)建run-detectors文件

在微信小程序項(xiàng)目文件夾內(nèi)創(chuàng)建run-detectors文件，因?yàn)樵撐募](méi)有擴(kuò)展名，在linux系統(tǒng)會(huì)被認(rèn)為是文件夾，導(dǎo)致找不到該文件導(dǎo)致報(bào)錯(cuò)。

5、下載wine

在命令行內(nèi)運(yùn)行

$ sudo apt-get install wine

在右鍵選擇wine環(huán)境運(yùn)行wcc.exe，會(huì)提示安裝依賴(lài)。wcc.exe在linux的 /home/用戶(hù)名/.config/微信web開(kāi)發(fā)者工具/WeappVendor 文件夾內(nèi)。

6、載入項(xiàng)目

在載入項(xiàng)目前，* 先在wine下運(yùn)行wcc.exe和wcsc.exe(不提前運(yùn)行wcc.exe和wcsc.exe的話(huà)可能會(huì)報(bào)錯(cuò))。第一次載入項(xiàng)目后編譯可能會(huì)慢一些，3、5s到10s左右，后面因?yàn)橛芯彺鏁?huì)快一些。

修改wcc.exe和wcsc.exe文件名，去掉.exe。

進(jìn)入到package.nw/app/dist/weapp/文件夾，找到commit/build.js、trans/transWxmlToJs.js和utils/vendorManager.js，將代碼中的wcc.exe和wcsc.exe改成wcc和wcsc。

使用編輯功能可能會(huì)報(bào)錯(cuò)，所以不要用自帶的編輯功能。

7、編輯器

推薦使用webstorm，在File - Editor - code style - File Types內(nèi)設(shè)置如圖下所示。將wxss添加到css類(lèi)型文件，將wxml添加到html類(lèi)型文件。

微信的文件改變自動(dòng)刷新會(huì)有3到5s的時(shí)間來(lái)編譯，不是很快。