toyminiprogram

玩具版小程序的实现，仅仅用于练习和学习小程序的实现，暂无实际用途。

目前基于nw.js(原node-webkit.js)实现了一小部分调试器的核心功能：
1.logic和view分离及通信
2.wxml、wxss展示
3.wxml与logic中data的mvvm联动
4.bingtap事件
由于刚刚起步，待实现的部分还很多，这里就不列了...

演示

1.wxml、wxss、js代码

2.点击事件演示

(1)模拟器调试

(2)iOS真机调试

(3)Android真机调试

调试程序执行方法

运行开发工具： ./run_devtools.sh

移动端工程目录:
1. iOS：./mobile/iOS
2. 安卓：./mobile/android

小程序调试原理解释

小程序实现原理

小程序原理和背景可以参看微信官方文档微信开发者工具

玩具调试器的实现原理

开发工具使用nw.js实现，该工具是一个电脑端的hybrid开发框架。
模拟器调试时，所有逻辑都在电脑端，logic相关的js逻辑跑在一个webview tag中（逻辑进程），wxml和wxss被解析成DOM和style（被虚拟化为VDOM方便通信），跑在另一个webview tag中做展示（视图进程），中间通过chrome的事件进行消息通信和Data更新。
真机调试时，logic其实还是跑在电脑端（这个非常重要！），而视图进程跑在手机端的webview中，中间消息通信和Data更新使用websocket实现。具体是在电脑端使用webview tag运行一个websocket(server)，桥接电脑端logic(client)和手机端view(client)的通信。
真机运行时，logic就跑在了手机端的JSC和V8中，中间的消息通信和Data的更新是基于原生bridge调用。
最核心的部分其实是消息通信的实现，针对不同场景的不同实现（chrome事件/websocket通信/原生bridge）。
以上都是逻辑js部分的调试，wxml和wxss的调试实际上基于消息通信组件，自己在nw.js中给devtools实现了一个wxml解析插件。消息通信组件用于同步插件和视图之间的行为和数据。目前本项目还没实现，后续有空会补上。

其他(TODO List)

WXML与WXSS文件的调试插件

待实现

有没有让logic直接运行到客户端去调试的方法？

调研了谷歌官方的safari桥接调试工具 ios-webkit-debug-proxy 及相关工具，chrome的调试接口协议能找到可用的实现都是基于USB链接设备调试的场景。不能满足远程调试的需求。
但是有没有办法基于chrome的调试接口协议来调试真机上的logic部分呢？由于没有深究，也许是有的...。一个思路是将移动设备上safari的webkit debug protocol适配到chrome的调试协议上，再基于代理来调试。
猜测大家没这么做的原因可能是除了读USB外，没有其他办法读取移动设备上safari或chrome的调试信息（不然为什么safari真机调试非要连USB线呢）。不过这只是一个猜测，还得继续深究...

monkeybad/toyminiprogram