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

前言

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

渲染案例

渲染“Hello World”案例
WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量
JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”

小程序模型

面试：小程序模型
- 渲染层（wxml、wxss）和逻辑层（js）的分离
模型的基本工作方式
- 1.数据驱动：渲染层和数据相关
- 2.脚本逻辑：逻辑层负责产生、处理数据
- 3.通信模型：逻辑层通过 Page 实例的 setData 方法传递数据到渲染层

模型—数据驱动

场景：
- 在开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。随着界面越来越复杂，需要维护很多变量状态，同时要处理很多界面上的交互事件，整个程序变得越来越复杂。
- 通常界面视图和变量状态是相关联的，如果有某种“方法”可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），那就可以省去手动修改视图的工作，这个方法就是“数据驱动”。
- 小程序的数据驱动基本原理
- WXML结构实际上等价于一棵DOM树，通过一个JS对象也可以来表达DOM树的结构，如下图所示
WXML可以先转成JS对象，然后再渲染出真正的DOM树，回到“Hello World”例子，可以看到转换的过程如图所示。
通过setData把msg数据从“Hello World”变成“Goodbye”，产生的JS对象对应的节点就会发生变化，此时可以对比前后两个JS对象变化的部分，然后把这个差异应用到原来的DOM树上，从而达到更新UI的目的，这就是“数据驱动”的原理

模型—通信模式

线程：
- 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。
Native微信客户端：
- 一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（常用Native代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发
- 小程序的通信模式如下图所示

WebView

Web view含义：
- WebView也就是我们熟悉的“网络视图”，能加载并显示网页，可以将其视为一个浏览器。主要用于展示网络请求后的内容，就是将网络地址请求的内容展示在里面。
使用场景：
- 比如你自己写个APP，想要访问网络（如百度页面），可以不使用手机自带的浏览器，只需APP内部展示百度页面，这时候就可以用webView。
- 即在其他APP内部浏览百度页面
通俗理解：
- WebView（网络视图）能加载显示网页，可以将其视为一个浏览器，它使用了WebKit渲染引擎加载显示网页。
优点：
- ①可以直接显示和渲染web页面，直接显示网页
- ②可以直接使用html文件（网络上或本地文件）作布局
- ③可以和JavaScript交互调用

JsCore

本质：
- JsCore全称为JavaScriptCore ，是一款 JavaScript 引擎，通常会被叫做虚拟机，专门设计来解释和执行 JavaScript 代码。
常用引擎：
- 目前 JavaScript 引擎还有 Google 的 V8 ，Mozilla 的 SpiderMonkey，这些主要涉及 JS 的解析和处理方式。
- 拓展：Mozilla（缩写MF或MoFo）全称Mozilla基金会，是为支持和领导开源的Mozilla项目而设立的一个非营利组织，Firefox便由 Mozilla 打造。

宿主环境小结

线程管理：
- 小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本。
双向绑定：
- 在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，在经过对比前后差异，把差异应用到原来的DOM树上，渲染出正确的UI界面。

完毕，如有疑问请随时联系小编！

微信小程序（小程序模型与宿主环境）相关推荐

微信小程序|小程序的构成(初识小程序详细简介)
小程序的构成目录小程序的构成 1.项目结构 1.1 项目的基本组成结构 1.1.1 pages(目录)\textcolor{MediumBlue}{pages(目录)}pages(目录) 1.1. ...
微信小程序--黑马程序员
小程序的页面,都存放在pages的目录里 ,以单独的文件夹存在 .js文件 (页面的脚本文件,存放页面的数据,事件处理函数) .json(当前的配置文件,配置窗口的外观 ) .wxml文件(页面的模板 ...
微信小程序（一）初步，包括（初步了解微信小程序，小程序项目结构，小程序宿主环境，发布与上线等）
文章目录前言一微信小程序 1. 小程序与普通网页开发的区别 2. 注册小程序开发帐号 3. 安装开发者工具 4. 创建小程序项目 5. 查看项目效果 6. 主界面的 5 个组成部分二项目结构 ...
Python+微信小程序开发（二）代码构成和宿主环境
一.小程序代码构成在上一篇文章中,我们通过开发者工具载入模板快速创建了一个QuickStart项目.这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 ...
微信小程序一小程序的创建、宿主环境、常用组件、开发上线等
小程序简介 1. 小程序与普通网页开发的区别运行环境不同网页运行在浏览器环境中小程序运行在微信环境中 API 不同由于运行环境的不同,所以小程序中, 无法调用 DOM 和 BOM 的 API. ...
微信小程序开发自学笔记 —— 三、理解小程序宿主环境
理解小程序宿主环境小程序可以调用宿主环境提供的微信客户端的能力. 渲染层和逻辑层小程序的运行环境分成渲染层和逻辑层,WXML模板和WXSS样式工作在渲染层,JS 脚本工作在逻辑层. 小程序如何把脚 ...
微信小程序开发——小程序的宿主环境API，协同工作和发布
一.小程序API概述小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API ,开发者可以方便的调用微信提供的能力,例如:获取用户信息.本地存储.支付功能等. 二.小程序API的3大分类 ...
微信小程序（json文件作用、WXML模板、宿主环境、通信模型、运行机制、常用组件、宿主API、协同工作和发布）
简介黑马程序员视频学习记录视频链接:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战文章目录简介 ---- json文件的作用 ---- 1. app.json ...
微信小程序01---小程序初始
目录今日总结 1.小程序的介绍 ①小程序是什么 ②小程序的发展史 ③小程序的优势和不足 ④如何学习微信小程序 2.项目的目录结构 3.常用配置 ①配置导航窗口 ②配置页面 ③配置tabBar 4.W ...

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

目录

前言

渲染案例

小程序模型

模型—数据驱动

模型—通信模式

WebView

JsCore

宿主环境小结

微信小程序（小程序模型与宿主环境）相关推荐

最新文章

热门文章