# 设计理念
小程序的渲染层使用 WebView 进行渲染,开发者的 JS 逻辑运行在一个独立的 Jscore 线程中。
渲染层提供了带有数据绑定语法的 WXML,逻辑层提供了setData 等 API,开发者需要更新界面时,通过 setData 把变化的数据传递过去,小程序框架会根据 Dom Diff 的流程把正确的结果更新在 DOM 树上.
# 了解Webview
,一个小程序有多个界面,所以渲染层对应存在多个webview。这两个线程之间由Native层进行统一处理。无论是线程之间的通讯、数据的传递、网络请求都由Native层做转发。
那么首先有一个问题需要解释,这里的webview是什么呢?
平常我们浏览网页都是在浏览器中,可以想象webview是一个嵌入式的浏览器,是嵌入在原生应用中的。webview 用来展示网页的 view 组件,该组件是你运行自己的浏览器或者在你的线程中展示线上内容的基础。使用 webkit 渲染引擎来展示,并且支持前进后退、浏览历史、放大缩小、等更多功能。
简单来说 webview 是手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装的一个组件。不过没有提供地址栏和导航栏,只是单纯的展示一个网页界面。
这里比较容易弄混的概念是iframe,iframe为页面中嵌入页面的方式,有别于webview嵌入原生应用的概念,这里需要注意一下。
紧接上文架构,那么为什么要做多个webview呢,为了更加接近原生应用APP的用户体验。多个webview可以理解为多页面应用,有别于单页面应用SPA,SPA渲染页面是通过路由识别随后动态将页面挂载到root节点中去,如果单页面应用打开一个新的页面,需要先卸载掉当前页面结构,并且重新渲染。很显然原生APP并不是这个样子,比较明显的特征为从页面右侧向左划入一个新的页面,并且我们可以同时看到两个页面。
多页面应用就很好达到这个效果,新页面直接滑动出来并且覆盖在旧页面上即可,这也是小程序现在所做的形式。这样的用户体验是非常好的。