微信小程序架构分析 (上)

相信不少上手试用了微信小程序开发者工具的开发者都会对其实现有些疑惑， 本文试图对其架构模型进行一些解析。

本文分为以下几个部分：

• 小程序调试技巧
• 小程序主要模块构成
• 小程序模块间通信
• 设计理念分析

小程序调试技巧

微信开发者工具默认禁用了右键打开调试面板功能，我们可以修改开发者工具部分代码移除该限制。

• 找到 app.nw 项目根目录，Mac 下为/Applications/wechatwebdevtools.app/Contents/Resources/app.nw
• 使用 js-beautify 对代码批量格式化：cd /Applications/wechatwebdevtools.app/Contents/Resources/app.nw
  find . -type f -name '*.js' -not -path "./node_modules/*" -not -path "./modified_modules/*" -exec js-beautify -r -s 2 -p -f '{}' \;
  
• 注释掉文件 app/dist/app.js 44 行和app/dist/components/simulator/webviewbody.js 149 行preventDefault 调用。101100 版本还需要修改 package.json 文件，去掉 --disable-devtools。

执行完以上操作就可以右键打开页面的调试面板了，需要特别注意的是，使用 view 页面的面板后会导致 wxml 面板不可用，touch 事件无法响应等种种问题，请慎重使用。