微信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小程序只能在工具内调试，而且不支持热更

习惯了其他的编辑器，用着提供的工具并不好用(不能定义主题，快捷键…当然不用就是了)