微信web开发者工具

微信web开发者工具

微信开发者工具是用node-webkit,基于node.js和chromium的应用程序实时运行环境开发的。界面功能用React编写,wxml、wxss经过编译生成html和css。

MINA(MINA IS NOT APP) 是在微信中开发小程序的框架。MINA提供了自己的视图层描述语言wxml和wxss,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统。同时小程序提供UI组件库和底层API,基于微信生态,目测只支持在微信上运行。

查看开发工具源代码

  1. cd /Applications/wechatwebdevtools.app/Contents/Resources/app.nw
  2. ├── app
  3. ├── modified_modules
  4. ├── node_modules
  5. └── package.json
  6. cd /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist
  7. ├── app.js
  8. ├── common
  9. ├── actions // 动作
  10. ├── stores // 数据层
  11. ├── components //组件
  12. ├── dispatcher // 派发器
  13. ├── config // 配置
  14. ├── contentscript
  15. ├── cssStr // react中使用css的封装
  16. ├── debugger
  17. ├── editor
  18. ├── extensions // chrome 开发者工具扩展
  19. ├── inject
  20. ├── lib // 第三方库
  21. ├── utils
  22. └── weapp

查看package.json

  1. {
  2. "main":"app/html/index.html",
  3. "name":"微信web开发者工具",
  4. "appname":"wechatwebdevtools",
  5. "version":"0.9.092300",
  6. "window":{
  7. "title":"微信web开发者工具 v0.9.092300",
  8. "icon":"app/images/icon.png",
  9. "toolbar":true,
  10. "width":600,
  11. "height":480,
  12. "frame":true
  13. },
  14. "inject_js_start":"app/dist/inject/jweixindebug.js",
  15. "inject_js_end":"app/dist/inject/devtools.js",
  16. "chromium-args":"-ignore-certificate-errors -load-extension=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/extensions/",
  17. "node-remote":"http://*.appservice.open.weixin.qq.com/*",
  18. "webview":{
  19. "partitions":[
  20. {
  21. "name":"trusted",
  22. "accessible_resources":["<all_urls>"]
  23. },
  24. {
  25. "name":"devtools",
  26. "accessible_resources":["<all_urls>"]
  27. }
  28. ]
  29. }
  30. }

应用程序打开的是app/html/index.html,加载了../dist/app.js

跳转到ContainController.js

  1. require("./lunch/lunch.js"), //登录
  2. require("./Create/create.js"), //创建项目
  3. require("./main.js"), //主界面

功能组件用的是react+flux,代码毕竟是压缩转换过的,prettify之后可以浏览看看

lib目录

第三方库

编辑器是用monaco-editor

react+flux

webapp目录

  1. ├── appservice
  2. ├── commit
  3. ├── newquick //quick-start 的示例代码
  4. ├── onlinevendor
  5. ├── tpl //page 页面的模板
  6. ├── trans //wxml、wxss的转换方法
  7. ├── utils
  8. ├── vendor
  9. └── weApp.js

weApp.js

调用trans替换,正则匹配对应的file是否存在,添加到tpl/appserviceTpl.js

commit

  1. ├── build.js
  2. ├── getallwxss.js
  3. ├── initAppConfig.js
  4. ├── initAppServiceJs.js
  5. ├── pack.js
  6. ├── unpack.js
  7. └── upload.js //打包上传

build会调用trans的方法进行转换,

上传的配置stores/projectStores.js

projectStores.Setting.MaxCodeSize,限制上传大小为5M

trans

  1. ├── transManager.js
  2. ├── transConfigToPf.js
  3. ├── transWxmlToHtml.js
  4. ├── transWxmlToJs.js
  5. └── transWxssToCss.js

1、transManager

require其他4个js,返回最后替换的结果getResponse

2、transConfigToPf

Pf 是指 pageFrame,2、transConfigToPf 替换或删除模板 tpl/pageFrameTpl.js 里面的注释

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  7. <script>
  8. var __webviewId__;
  9. </script>
  10. <!-- percodes -->
  11. <!--{ {WAWebview} }-->
  12. <!--{ {reportSDK} }-->
  13. <!--{ {webviewSDK} }-->
  14. <!--{ {exparser} }-->
  15. <!--{ {components_js} }-->
  16. <!--{ {virtual_dom} }-->
  17. <!--{ {components_css} }-->
  18. <!--{ {allWXML} }-->
  19. <!--{ {eruda} }-->
  20. <!--{ {style} }-->
  21. <!--{ {currentstyle} }-->
  22. <!--{ {generateFunc} }-->
  23. </head>
  24. <body>
  25. <div></div>
  26. </body>
  27. </html>

3、transWxmlToHtml、transWxmlToJs、transWxssToCss判断page目录下是否存在对应的文件,存在就执行转换方法,transConfigToPf中用对应文件链接替换掉对应的注释标签。

转换wxml中的自定义tag为virtual_dom

virtual-dom

转换wxss为css

其他

  1. wx小程序只能在工具内调试,而且不支持热更

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

web64