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

朱雀 2024-03-30 11:09 57阅读 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 条评论，57人围观）

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

相关阅读

相关讲述微信小程序通信模型

我们 js 逻辑层需要沟通界面将数据渲染到渲染层上这个过程就是微信客户端进行服务转发的。我们 js 请求第三方服务器获取数据这个过程请求也是由微信客户端来...

傷城~/ 2024年04月22日 07:55/ 0 赞/ 72 阅读

相关讲述微信小程序宿主环境

这是软件的宿主环境但微信小程序并非安装在手机上的软件。就是手机没有微信这个APP 就无法使用小程序。那么本文我们就来说说小程序的一个宿主环境。首先...

矫情吗；*/ 2024年04月22日 07:53/ 0 赞/ 74 阅读

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

目录宿主环境 1. 什么是宿主环境 2. 小程序的宿主环境通行模型 1. 通信的主体 2. 小程序的通信模型运行机制 5. 小程序启动的过程 6. 页面

朱雀/ 2024年03月30日 11:09/ 0 赞/ 58 阅读

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

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

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

相关小程序运行机制

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

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

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

课程大纲（1）小程序模型（2）模型基本工作方式（3）数据驱动（4）通信模式（5）WebView(承载网页的容器。会自动铺满整个小程序页面，个人类

素颜马尾好姑娘i/ 2023年06月16日 08:08/ 0 赞/ 56 阅读

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

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

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

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

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

超、凢脫俗/ 2023年06月16日 07:52/ 0 赞/ 20 阅读

相关小程序运行环境区分

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

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

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

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

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