微信小程序实现原理（iOS）

小程序出来很久了，一直没有去碰，昨天开始看微信小程序的文档，我感觉自己像着了魔，一边看文档一边想微信是如何实现的，文档还没看完，我已经有了若干种假设，现在脑子里又兴奋又混乱，因为时间有限，在这里做个记录，以后有时间再做验证。

是原生还是webView。当我下载微信web开发工具之后，整个界面跟前端开发是极其类似的，还可以用鼠标去选择当前的element，就像这样。

选择标签

这种div的大小和style都出来了，你敢跟我说这是原生？好吧，是webView。但是在真机运行过程中，微信iOS的导航栏明显是原生的，神马？怎么玩的？我昨天下午刚运行小程序测试版的时候就提出了一种假设，它是多个webView的原生界面，一个page对应一个webView，跳转到下个page当然又是一个webView，避免了一个webView反复刷新，而是原生webView的push到下一个原生webView界面。

当我读到他们文档路由的一项的时候，是这么说的

页面栈

提出了页面栈的概念，以前我们玩lua的时候也是这么个概念，我们以前是lua+xhtml+css来实现一个自定义的浏览器，当然这个浏览器不是webView，而是全部是原生控件，我们自己解析自己布局，玩的还可以。跑题了，继续说页面栈，栈顶页面就是当前用户看到的页面，在lua的堆栈里从上往下index是-1、-2、-3，从下往上index依次是1、2、3，根据用户操作来push（入栈）pop（出栈），手动画个图来说明，如下

页面栈

微信那句话大概就是这个意思，但是他们的index从上而下不是-1、-2，而是数组的index。

那我就想，难道跟我们以前是一样的玩法？哈哈。。其实人家确实是WebView啦，WKWebView，这个很多网友也有说明的，官方文档在后面也有说明，看到这样的说明时，疑惑解开了，摘抄几段官方的话：

性能-优化建议

性能-优化建议

JsCore中运行

工作原理

其实，并不完全是webView，小程序是原生和webView混合使用的，有几个控件就是原生控件

原生

借用下其他作者的话，你那么聪明，不用我多说什么了，有这几个原文的截图已经知道是怎么回事了，最后附上我画的草图。

逻辑层调用

到iOS那边webView截获自定义的路由，如果是调用原生，比如地图或者使用sqlite数据库，就会调用原生界面或者原生API，如果完全是显示，就丢给webView进行展示。

大体的一个流程，这里面每一步都包含了比较多的内容，我暂时还有好几种猜想，所以不敢说具体是怎样的，后续有时间再补上。

具体前端原理可以参考

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

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

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