【小程序】宿主环境之通信模型和运行机制

朱雀 2024-03-30 11:09 12阅读 0赞

**目录**

宿主环境

1. 什么是宿主环境

2. 小程序的宿主环境

通行模型

1. 通信的主体

2. 小程序的通信模型

运行机制

5. 小程序启动的过程

6. 页面渲染的过程

## 宿主环境 ##

### 1. 什么是宿主环境 ###

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如： Android 系统和 iOS 系

统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安

卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！![215d17619afd4e17b0e2a726f455890d.png][]

### 2. 小程序的宿主环境 ###

手机微信是小程序的宿主环境，如图所示：

![8dd14ab63dcb4eacbb09f9600fd1edc2.png][]

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如： 微信扫码、微

信支付、微信登录、地理定位、etc…

3. 小程序宿主环境包含的内容

通信模型 运行机制 组件 API

## 通行模型 ##

### 1. 通信的主体 ###

小程序中通信的主体是渲染层和逻辑层，其中： WXML 模板和 WXSS 样式工作在渲染层 JS 脚本

工作在逻辑层

![a8064153a939400dbf0e4940c38e1915.png][]

### 2. 小程序的通信模型 ###

小程序中的通信模型分为两部分： 渲染层和逻辑层之间的通信 由微信客户端进行转发 逻辑层和

第三方服务器之间的通信 由微信客户端进行转发 ![55a588d521fe4b1e8e801ca0ef462849.png][]

## 运行机制 ##

### 5. 小程序启动的过程 ###

把小程序的代码包下载到本地

解析 app.json 全局配置文件

执行 app.js 小程序入口文件，

调用 App() 创建小程序实例

渲染小程序首页

小程序启动完成

### 6. 页面渲染的过程 ###

加载解析页面的 .json 配置文件

加载页面的 .wxml 模板和 .wxss 样式

执行页面的 .js 文件，调用 Page() 创建页面实例

页面渲染完成

[215d17619afd4e17b0e2a726f455890d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b068c4bea8d847a5a63c3fa87a4fd7d2.png
[8dd14ab63dcb4eacbb09f9600fd1edc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7fc3b426b4804c478cc33abb23a04d0c.png
[a8064153a939400dbf0e4940c38e1915.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/846faa8d948344f6b067112b42c903b2.png
[55a588d521fe4b1e8e801ca0ef462849.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b967a249c6ad4731ab1f1491d0693795.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序的宿主环境(通信模型，运行机制，组件，API概述)

宿主环境简介 1、什么是宿主环境宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：Android 系统和 iOS 系统是两

ゝ一纸荒年。/ 2024年03月24日 11:43/ 0 赞/ 12 阅读

相关小程序运行机制

一切始于双线程 - 技术选型目前来说，页面渲染的方式主要有三种： 1.Web渲染 2.Native原生渲染 3.Web与Native两者掺杂，也就是我们常

逃离我推掉我的手/ 2023年07月25日 06:17/ 0 赞/ 68 阅读

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

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

约定不等于承诺〃/ 2023年06月16日 08:05/ 0 赞/ 54 阅读

相关小程序运行环境区分

微信小程序运行环境的区分 if (typeof __wxConfig == "object") { const version = __wxConfi

Bertha 。/ 2023年01月12日 14:58/ 0 赞/ 94 阅读

相关小程序textarea的行间距_小程序运行机制

(给前端大全加星标，提升前端技能) > 作者：被删 > > https://godbasin.github.io/2018/09/02/wxapp-technology-a

忘是亡心i/ 2023年01月02日 10:28/ 0 赞/ 230 阅读

相关小程序中的广播/监听机制（跨页面通信）

重点：小程序中并没有广播监听机制！！！要我们手动去实现一个哦应用场景：有pageA pageB pageC 三个页面 pageA打开了pageB，pageB打开了

妖狐艹你老母/ 2022年12月09日 02:52/ 0 赞/ 205 阅读

相关小程序区分各个运行环境

// 根据账户信息配置请求地址 const accountInfo = wx.getAccountInfoSync(); // env类型 co

本是古典何须时尚/ 2022年10月07日 14:55/ 0 赞/ 91 阅读

相关安卓 WIFI通信之聊天小程序

安卓 WIFI通信之聊天小程序一、简述记--使用WIFI实现的一个简单一对一聊天小程序。一台设备开启WIFI热点，另外一台设备进行连接，然后互相收发信

布满荆棘的人生/ 2022年05月14日 15:23/ 0 赞/ 250 阅读

相关 BOM（浏览器对象模型）和DOM(宿主对象模型)

一.什么是BOM（浏览器对象模型) BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、

古城微笑少年丶/ 2022年03月06日 12:10/ 0 赞/ 271 阅读

相关小程序前后台切换运行机制

文章目录首先微信官方文档有涉及一部分内容微信的方法前台、后

末蓝、/ 2022年02月03日 10:39/ 0 赞/ 1149 阅读