微信web開發者工具
微信開發者工具是用node-webkit，基于node.js和chromium的應用程式實時運作環境開發的。界面功能用React編寫，wxml、wxss經過編譯生成html和css。
MINA(MINA IS NOT APP) 是在微信中開發小程式的架構。MINA提供了自己的視圖層描述語言wxml和wxss，以及基于JavaScript的邏輯層架構，并在視圖層與邏輯層間提供了資料傳輸和事件系統。同時小程式提供UI元件庫和底層API，基于微信生态，目測隻支援在微信上運作。
檢視開發工具源代碼
cd /Applications/wechatwebdevtools.app/Contents/Resources/app.nw
├── app
├── modified_modules
├── node_modules
└── package.json
cd /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist
├── app.js
├── common
├── actions // 動作
├── stores // 資料層
├── components //元件
├── dispatcher // 派發器
├── config // 配置
├── contentscript
├── cssStr // react中使用css的封裝
├── debugger
├── editor
├── extensions // chrome 開發者工具擴充
├── inject
├── lib // 第三方庫
├── utils
└── weapp
檢視package.json
{
"main":"app/html/index.html",
"name":"微信web開發者工具",
"appname":"wechatwebdevtools",
"version":"0.9.092300",
"window":{
"title":"微信web開發者工具 v0.9.092300",
"icon":"app/images/icon.png",
"toolbar":true,
"width":600,
"height":480,
"frame":true
},
"inject_js_start":"app/dist/inject/jweixindebug.js",
"inject_js_end":"app/dist/inject/devtools.js",
"chromium-args":"-ignore-certificate-errors -load-extension=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/extensions/",
"node-remote":"http://*.appservice.open.weixin.qq.com/*",
"webview":{
"partitions":[
{
"name":"trusted",
"accessible_resources":[""]
},
{
"name":"devtools",
"accessible_resources":[""]
}
]
}
}
應用程式打開的是app/html/index.html，加載了../dist/app.js
跳轉到ContainController.js
require("./lunch/lunch.js"), //登入
require("./Create/create.js"), //建立項目
require("./main.js"), //主界面
功能元件用的是react+flux，代碼畢竟是壓縮轉換過的，prettify之後可以浏覽看看
lib目錄
第三方庫
react+flux
webapp目錄
├── appservice
├── commit
├── newquick //quick-start 的示例代碼
├── onlinevendor
├── tpl //page 頁面的模闆
├── trans //wxml、wxss的轉換方法
├── utils
├── vendor
└── weApp.js
weApp.js
調用trans替換，正則比對對應的file是否存在，添加到tpl/appserviceTpl.js
commit
├── build.js
├── getallwxss.js
├── initAppConfig.js
├── initAppServiceJs.js
├── pack.js
├── unpack.js
└── upload.js //打包上傳
build會調用trans的方法進行轉換，
上傳的配置stores/projectStores.js
projectStores.Setting.MaxCodeSize，限制上傳大小為5M
trans
├── transManager.js
├── transConfigToPf.js
├── transWxmlToHtml.js
├── transWxmlToJs.js
└── transWxssToCss.js
1、transManager
require其他4個js，傳回最後替換的結果getResponse
2、transConfigToPf
Pf 是指 pageFrame，2、transConfigToPf 替換或删除模闆 tpl/pageFrameTpl.js 裡面的注釋
var __webviewId__;
3、transWxmlToHtml、transWxmlToJs、transWxssToCss判斷page目錄下是否存在對應的檔案，存在就執行轉換方法，transConfigToPf中用對應檔案連結替換掉對應的注釋标簽。
轉換wxml中的自定義tag為virtual_dom
轉換wxss為css
其他
wx小程式隻能在工具内調試，而且不支援熱更
習慣了其他的編輯器，用着提供的工具并不好用(不能定義主題，快捷鍵…當然不用就是了)