💌 所属专栏：【微信小程序开发教程】
😀 作 者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
文章目录
- 前言
- 一、宿主环境
- 1、宿主环境建介绍
- 2、小程序的宿主环境
- 二、通信模型
- 1、通信的主体
- 2、小程序的通信模型
- 三、运行机制
- 1、小程序启动的过程
- 2、页面渲染的过程
- 总结
前言
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第5篇文章;
今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
一、宿主环境
1、宿主环境建介绍
宿主环境（host environment）指的是程序运行所必须的依赖环境。生活中比较常见的 Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件就嘎了！隔壁老王听了都哭闷了。
2、小程序的宿主环境
微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。比如经常用到的功能：微信扫码、微信支付、微信登录、地理定位等。
程序宿主环境包含的内容：通信模型、运行机制、组件和API。
二、通信模型
1、通信的主体
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
| 渲染层 | 逻辑层 |
|---|---|
| WXML 模板 WXSS 样式 | JS 脚本 |
2、小程序的通信模型
小程序中的通信模型分为两部分：
- 渲染层和逻辑层之间的通信，由微信客户端进行转发
- 逻辑层和第三方服务器之间的通信，由微信客户端进行转发
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程.
三、运行机制
1、小程序启动的过程
其启动流程可以分为五个步骤：
- Step1、把小程序的代码包下载到本地
- Step2、解析
app.json全局配置文件，知道pages字段就可以知道你当前小程序的所有页面路径:
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/CshPage1/CshPage1"
]
}
- Step3、执行
app.js小程序入口文件，App实例的onLaunch回调会被执行，整个小程序只有一个 App 实例，是全部页面共享的。
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
- Step4、渲染小程序首页，在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
- Step5、小程序启动完成。
2、页面渲染的过程
可以观察到 pages/CshPage1/lCshPage1 下其实是包括了4种文件的，其渲染可以分为四个步骤：
- Step1、 加载解析页面的
.json配置文件； - Step2、 加载页面的 .wxml 模板和
.wxss样式； - Step3、 执行页面的
.js文件，调用 Page() 创建页面实例； - Step4、 页面渲染完成；
总结
感谢观看，这里就是宿主环境 & 通信模型 & 运行机制的简单介绍，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解（持续更新中）】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记（华为云）】
- 🦄 【程序错误解决方法（建议收藏）】
- 🚀 【软件安装教程】
订阅更多，你们将会看到更多的优质内容！！
