微信小程序（小程序模型与宿主环境）

约定不等于承诺〃 2023-06-16 08:05 124阅读 0赞

###### 【本节大纲】 ######

（1）小程序模型  
（2）模型基本工作方式  
（3）数据驱动  
（4）通信模式  
（5）WebView  
（6）JsCore  
（7）宿主环境

###### 前言 ######

*  小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。
 *  小程序的运行环境分成**渲染层**和**逻辑层**， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。

# 渲染“Hello World”案例 #

①WXML模板使用 view 标签，其子节点用 \{ \{ \}\} 的语法绑定一个 msg 的变量

②JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”

/** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        this.setData({ 
          msg:'Hello World'
        })
      },

# 小程序模型 #

### 面试：小程序模型 ###

**渲染层（wxml、wxss）和逻辑层（js）的分离**

### 模型的基本工作方式 ###

1.  数据驱动：渲染层和数据相关
2.  脚本逻辑：逻辑层负责产生、处理数据
3.  通信模型：逻辑层通过 Page 实例的 setData 方法传递数据到渲染层

# 模型—数据驱动 #

###### 场景： ######

*  在开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。随着界面越来越复杂，需要维护很多变量状态，同时要处理很多界面上的交互事件，整个程序变得越来越复杂。
 *  通常界面视图和变量状态是相关联的，如果有某种“方法”可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），那就可以省去手动修改视图的工作，这个方法就是“**数据驱动**”。

### 小程序的数据驱动基本原理 ###

WXML结构实际上等价于一棵DOM树，通过一个JS对象也可以来表达DOM树的结构，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
WXML可以先转成JS对象，然后再渲染出真正的DOM树，回到“Hello World”例子，可以看到转换的过程如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

> WXML结构转JS对象，再转DOM树

通过setData把msg数据从“Hello World”变成“Goodbye”，产生的JS对象对应的节点就会发生变化，此时可以对比前后两个JS对象变化的部分，然后把这个差异应用到原来的DOM树上，从而达到更新UI的目的，这就是“数据驱动”的原理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

> 状态更新的时候，通过对比前后JS对象变化，进而改变视图层的Dom树

# 模型—通信模式 #

### 线程： ###

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了**WebView** 进行渲染；逻辑层采用**JsCore**线程运行JS脚本。

### Native微信客户端： ###

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由**微信客户端**（常用Native代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发

### 小程序的通信模式（渲染层和逻辑层通信模型）如下图所示 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

# WebView #

### Web view含义： ###

WebView也就是我们熟悉的“网络视图”，能加载并显示网页，可以将其视为一个**浏览器**。主要用于展示网络请求后的内容，就是将网络地址请求的内容展示在里面。

### 使用场景： ###

比如你自己写个APP，想要访问网络（如百度页面），可以不使用手机自带的浏览器，只需**APP内部展示百度页面**，这时候就可以用**webView**。  
即在其他APP内部浏览百度页面

### 通俗理解： ###

WebView（网络视图）能加载显示网页，可以将其视为一个浏览器，它使用了WebKit渲染引擎加载显示网页。

### 优点： ###

1.  可以直接显示和渲染web页面，直接显示网页
2.  可以直接使用html文件（网络上或本地文件）作布局
3.  可以和JavaScript交互调用

# JsCore #

### 本质： ###

JsCore全称为JavaScriptCore ，是一款 **JavaScript 引擎**，通常会被叫做虚拟机，专门设计来解释和执行 JavaScript 代码。

### 常用引擎： ###

目前 JavaScript 引擎还有 Google 的 V8 ，Mozilla 的 SpiderMonkey，这些主要涉及 JS 的解析和处理方式。  
拓展：Mozilla（缩写MF或MoFo）全称Mozilla基金会，是为支持和领导开源的Mozilla项目而设立的一个非营利组织，**Firefox便 由 Mozilla 打造**。

# 宿主环境小结 #

### 运行环境： ###

小程序的运行环境分成渲染层和逻辑层，WXML和WXSS工作在渲染层，JS脚本工作在逻辑层

### 作用： ###

*  渲染层和数据相关；逻辑层负责产生，处理数据
 *  逻辑层通过Page实例的setData方法传递到渲染层

### 线程管理： ###

小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用了**WebView**进行渲染；逻辑层采用**JsCore**线程运行JS脚本。

### 双向绑定： ###

在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从**逻辑层传递到渲染层**，，在经过对比前后差异，把差异应用到原来的DOM树上，渲染出正确的UI界面。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019112514470260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125144807340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191125144848988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191125145237426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70