原生微信小程序的原理

最新推荐文章于 2024-05-10 13:43:51 发布

头头不会敲代码

最新推荐文章于 2024-05-10 13:43:51 发布

阅读量966

点赞数 20

分类专栏：技术分享文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/olderandyanger/article/details/134787770

版权

技术分享专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前言

微信小程序是一种在微信内部运行的轻量级应用，它可以让用户在无需下载安装的情况下，快速地获取和使用各种服务。微信小程序的开发和普通的网页开发有很多相似之处，但也有一些独特的特点和原理。

一. 小程序的技术架构

微信小程序的技术架构是基于微信客户端的，它利用了微信客户端的原生能力，如网络、存储、界面等，来提供给小程序开发者使用。

微信小程序的技术架构可以分为两个部分：

小程序框架：是微信提供的一套开发框架，它包括了小程序的运行环境、开发语言、组件库、API等，它是小程序开发的基础。小程序框架的核心是MINA框架，它是一种类似于Vue或React的前端框架，它提供了一种声明式的数据绑定和组件化的开发方式，让开发者可以更高效和简单地开发小程序。
小程序服务：是微信提供的一套云服务，它包括了小程序的发布、管理、统计、调试等功能，以及一些云开发的能力，如云函数、云数据库、云存储等。小程序服务可以让开发者更方便地部署和运维小程序，以及利用云计算的资源和能力，提升小程序的性能和安全性。

二. 小程序的运行环境

小程序的运行环境是指小程序在不同的平台上运行时所依赖的底层环境，它决定了小程序的兼容性和稳定性。小程序的运行环境主要有三种：iOS、Android和小程序开发者工具。

这三种运行环境的逻辑层和渲染层所使用的技术是不同的，如表1所示。

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
Android	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

逻辑层是指小程序的业务逻辑和数据处理部分，它运行在一个JavaScript的执行环境中，如JavaScriptCore或V8。渲染层是指小程序的界面渲染和交互部分，它运行在一个Web的渲染环境中，如WKWebView或Chrome WebView。逻辑层和渲染层是分开的，它们分别运行在不同的线程中，通过一个通信机制来进行数据交换和事件触发。

三. 小程序的开发语言和工具

小程序的开发语言是基于Web的技术，它包括了JavaScript、WXML、WXSS和JSON四种语言。JavaScript是用来编写小程序的逻辑和数据处理部分的，它遵循了ES6的语法规范，并且支持了一些ES7的特性，如async/await等。WXML是用来编写小程序的界面结构和内容的，它是一种类似于HTML的标记语言，它提供了一些扩展的能力，如数据绑定、列表渲染、条件渲染、模板等。WXSS是用来编写小程序的样式和布局的，它是一种类似于CSS的样式语言，它提供了一些扩展的能力，如尺寸单位、样式导入、全局样式等。JSON是用来配置小程序的基本信息和页面路由的，它是一种轻量级的数据交换格式，它遵循了JSON的语法规范。

小程序的开发工具是指用来辅助开发和调试小程序的软件，它主要有两种：小程序开发者工具和微信开发者工具。小程序开发者工具是微信官方提供的一款专门用于开发小程序的桌面应用，它提供了一些功能，如代码编辑、项目管理、模拟器、调试器、编译器、上传器等。微信开发者工具是微信官方提供的一款用于开发微信相关产品的网页应用，它提供了一些功能，如小程序的注册、发布、管理、统计、云开发等。

四. 小程序的渲染和逻辑层

小程序的渲染和逻辑层是指小程序的界面渲染和业务逻辑的实现部分，它们是分开的，分别运行在不同的线程中，通过一个通信机制来进行数据交换和事件触发。

渲染层：使用WebView线程渲染WXML和WXSS，生成页面的视图，并接收用户的操作事件，转发给逻辑层处理。
逻辑层：使用JSCore线程执行JS代码，处理页面的业务逻辑，发送网络请求，调用微信提供的原生API等。

小程序的渲染层和逻辑层之间通过一个双向的通信机制来进行数据交换和事件触发，这个通信机制是基于微信客户端的原生能力实现的，它保证了通信的高效和安全。

五. 小程序的通信机制

小程序的通信机制是指小程序的渲染层和逻辑层之间的数据交换和事件触发的方式，它是基于微信客户端的原生能力实现的，它保证了通信的高效和安全

小程序的通信机制可以分为两种：

数据通信：是指小程序的逻辑层向渲染层发送数据，

或者渲染层向逻辑层请求数据的过程，它是通过setData和data属性来实现的。setData是小程序提供的一个API，它可以让逻辑层向渲染层发送数据，从而改变渲染层的视图状态。data属性是小程序提供的一个属性，它可以让渲染层向逻辑层请求数据，从而获取逻辑层的数据状态。

事件通信：是指小程序的视图层和逻辑层之间如何进行数据和事件的交互。

小程序的视图层使用WebView线程渲染WXML和WXSS，生成页面的视图。小程序的逻辑层使用JSCore线程执行JS代码，处理页面的业务逻辑。视图层和逻辑层分别运行在不同的线程中，通过微信客户端提供的JSBridge进行通信。JSBridge是一个提供调用原生功能的接口，以及构建原生和非原生间消息通信的通道。视图层和逻辑层可以通过JSBridge的发布订阅方法，发送和监听数据和事件。