【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍（五）

一、宿主环境

1、宿主环境建介绍

  宿主环境（host environment）指的是程序运行所必须的依赖环境。生活中比较常见的 Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件就嘎了！隔壁老王听了都哭闷了。

2、小程序的宿主环境

  微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。比如经常用到的功能：微信扫码、微信支付、微信登录、地理定位等。

  程序宿主环境包含的内容：通信模型、运行机制、组件和API。

二、通信模型

1、通信的主体

  小程序的运行环境分成渲染层和逻辑层，其中 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、 页面渲染完成；

总结

  感谢观看，这里就是宿主环境 & 通信模型 & 运行机制的简单介绍，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。