小程序框架Mina

逃离我推掉我的手 2022-12-11 12:27 183阅读 0赞

[分享我的原创文章，欢迎点赞和关注][Link 1]

# 小程序框架介绍 #

## 1.MINA框架 ##

> [渲染层和逻辑层][Link 2]

小程序的运行环境分成渲染层和逻辑层，它们分别由2个线程管理：渲染层的界面使用了WebView线程进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转。小程序的通信模型如下图所示：

![渲染层和逻辑层.png][.png]

小程序的MINA框架有着接近原生App的运行速度。其实他实际上应用的就是目前IT界最被推崇的MVVM模式。view层对应渲染层，model层对应逻辑层，viewmodel层对应native层。

native层主要做了两件事情：数据绑定和事件监听。逻辑层发送网络请求也经由Native转发。

### 1-1.渲染层（视图层View） ###

WXML 模板和 WXSS 样式工作在渲染层，.wxml 用于描述页面结构，而 .wxss 用于描述页面样式。

视图层以给定的样式来展现数据并反馈事件给逻辑层，而数据展现是以组件来进行的。组件（Component）是视图的基本组成单元。

### 1-2.逻辑层(APP Service) ###

JS 工作在逻辑层。在逻辑层处理数据并发送至视图层，同时接受视图层发回的事件请求。

微信团队对JavaScript做出了一些优化，以便更高效的开发小程序，这些优化包括：

1.  增加app方法用来注册程序，增加page方法用来注册页面。
2.  提供丰富的API接口。
3.  页面的作用域相对独立，并拥有了模块化的能力。

但是需要注意的是，小程序的逻辑层由js编写，但并不是在浏览器中运行的，所以JavaScript在Web中的一些能力都不能使用，比如 Dom、Window等。

### 1-3.setData函数 ###

在页面page()中，我们使用setData函数来将数据从逻辑层发送到视图层，同时改变对应的this.data的值。单次设置的数据有一个大小限制，不能超过1024KB，避免一次性设置过多的数据。

## 2.界面渲染 ##

### 2-1.界面是如何渲染出来的？ ###

首先，我们需要知道，wxml等价于一棵DOM树，也可以使用一个JS对象来模拟（虚拟DOM）

![构建dom树.png][dom_.png]

### 2-2.如果数据发生改变了，又是如何渲染的呢？ ###

1.  会新生成一个JS对象
2.  此时可以对比前后两个JS对象得到变化的部分
3.  然后把这个差异应用到原来的Dom树上
4.  从而达到更新 UI 的目的，这就是 "数据驱动"的原理

![js数据diff更新.png][js_diff_.png]

[Link 1]: https://www.jianshu.com/p/38b8df88c685
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#%E6%B8%B2%E6%9F%93%E5%B1%82%E5%92%8C%E9%80%BB%E8%BE%91%E5%B1%82
[.png]: /images/20221123/2368a3d32403487a8618f0f5196b6b87.png
[dom_.png]: /images/20221123/a9d6aedd018f41ddab1adc016b7bc7d8.png
[js_diff_.png]: /images/20221123/962a0b73c26b4d1399d37974db56e61b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关基于PHP+小程序(MINA框架)+Mysql数据库的失物招领小程序系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序失物招领系统，前台用户使用小程序，后台管理使用基PHP+MySql的B/S架构；通过后台管理资讯

た入场券/ 2024年04月03日 08:43/ 0 赞/ 88 阅读

相关基于PHP+小程序(MINA框架)+Mysql数据库的小说小程序系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序的在线免费小说平台，前台用户使用小程序，后台管理使用基PHP+MySql的B/S架构；管理员通过

梦里梦外;/ 2024年04月03日 08:43/ 0 赞/ 85 阅读

相关基于PHP+小程序(MINA框架)+Mysql数据库的美食菜谱小程序系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信美食菜谱点评小程序系统，前台用户使用小程序，小程序使用微信开发者工具开发；后台管理使用基PP+MySq

悠悠/ 2024年04月03日 08:38/ 0 赞/ 74 阅读

相关基于PHP+小程序(MINA框架)+Mysql数据库的积分商城小程序系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序商城系统，前台用户使用小程序，小程序使用微信开发者工具开发；后台管理使用基PP+MySql的B/

矫情吗；*/ 2024年04月03日 08:37/ 0 赞/ 80 阅读

相关基于PHP+小程序(MINA框架)+Mysql数据库的干洗店洗衣小程序系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信校园洗衣小程序系统，前台用户使用小程序，小程序使用微信开发者工具开发；后台管理使用基PP+MySql的

叁歲伎倆/ 2024年04月03日 08:37/ 0 赞/ 67 阅读

相关基于PHP+小程序(MINA框架)+Mysql数据库的评选投票小程序系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序评选投票系统，前台用户使用小程序，后台管理使用基PHP+MySql的B/S架构；通过后台添加资讯

今天药忘吃喽~/ 2024年04月03日 08:35/ 0 赞/ 72 阅读

相关基于Java后台(Springboot框架)+小程序(MINA框架)+Mysql数据库的小程序商城系统设计与实现

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序商城系统，前台用户使用小程序，小程序使用微信开发者工具开发；后台管理使用基JAVA+MySql的

逃离我推掉我的手/ 2024年04月03日 08:19/ 0 赞/ 111 阅读

相关小程序框架Mina

[分享我的原创文章，欢迎点赞和关注][Link 1] 小程序框架介绍 1.MINA框架 > [渲染层和逻辑层][Link 2] 小程序的运行环境分成渲染层和逻辑

逃离我推掉我的手/ 2022年12月11日 12:27/ 0 赞/ 184 阅读

相关微信小程序的mina框架

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 2018年2月9日16:12:33 微信小程序Mina框架 Mina is not

今天药忘吃喽~/ 2022年01月17日 07:51/ 0 赞/ 225 阅读

相关微信小程序MINA框架、运行加载机制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我会带着你远行/ 2021年07月25日 02:42/ 0 赞/ 287 阅读