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

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



一、宿主环境

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

总结

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

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

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

相关文章
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
1059 0
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
5126 3
|
vr&ar 图形学 UED
电子沙盘VR模型大屏平板手机微信使用方案
数字孪生电子沙盘和VR模型被广泛应用在房地产等行业,为不同设备定制不同版本的模型是常见做法。然而,通过实时云渲染技术,可以将PC端的VR模型转化为网页版,使用户能够在平板或手机上流畅浏览详细信息,无需开发多个版本。这不仅提升了用户体验,还简化了模型提供商的工作流程,降低了成本。尤其在新楼盘发布时,可通过公众号或广告链接快速吸引潜在客户。成本主要取决于并发用户数及显卡性能要求,但该技术显著提高了跨设备访问的便利性。
419 1
|
监控 小程序 数据处理
揭秘支付宝小程序性能优化秘籍:从加载到运行,每一步都快人一步!
【8月更文挑战第27天】本文深入探讨了支付宝小程序性能优化的关键技术和策略,包括减少网络请求、利用CDN加速、代码按需加载、图片压缩、懒加载以及性能监控等多方面内容,并提供了实用的示例代码,帮助开发者显著提升小程序的加载速度与运行效率,创造更佳用户体验。
800 1
|
缓存 小程序 开发者
小程序,运行测试时卡在等待界面,持续加载不到资源
小程序,运行测试时卡在等待界面,持续加载不到资源
500 0
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【4月更文挑战第12天】本文探讨了小程序全栈开发中WebSocket实时通信的实践,WebSocket作为实现双向实时通信的协议,其长连接特性和双向通信能力在实时聊天、推送、游戏和监控等场景中发挥关键作用。开发者需注意安全性、性能和兼容性问题,以优化用户体验并确保小程序稳定运行。通过掌握WebSocket,开发者能提升小程序的功能性和用户体验。
568 0
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4556 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5112 1
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
4099 11
技术小白如何利用DeepSeek半小时开发微信小程序?