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

简介: 【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)



一、宿主环境

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、 页面渲染完成;

总结

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

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

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

相关文章
|
2月前
|
机器学习/深度学习 小程序 前端开发
微信小程序——实现对话模式(调用大模型图片生成)
微信小程序——实现对话模式(调用大模型图片生成)
213 3
|
2月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
16天前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
13 0
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
25 4
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
18 0
|
2月前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【4月更文挑战第12天】本文探讨了小程序全栈开发中WebSocket实时通信的实践,WebSocket作为实现双向实时通信的协议,其长连接特性和双向通信能力在实时聊天、推送、游戏和监控等场景中发挥关键作用。开发者需注意安全性、性能和兼容性问题,以优化用户体验并确保小程序稳定运行。通过掌握WebSocket,开发者能提升小程序的功能性和用户体验。
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
9天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
20 7
|
9天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
21 7
|
9天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章