微信小程序实现原理
微信小程序实现原理
微信小程序采用wxml
、wxss
、javascript
进行开发,本质是一个单页应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口。微信的架构,是数据驱动视图的MVVM
模式,其视图UI
和数据是分离的,所有的页面更新,都需要通过对数据的变更来实现。小程序分为两个部分Webview
和AppService
,Webview
主要用来展现渲染界面,AppService
用来处理业务逻辑、数据及接口调用,通过系统层JSBridge
实现通信,实现UI
的渲染与事件的处理。
目录结构
打包前
Project
├── pages
│ ├── index
│ │ ├── index.js // index 逻辑
│ │ ├── index.json // index 配置
│ │ ├── index.wxml // index 结构
│ │ └── index.wxss // index 样式表
│ └── logs
│ ├── logs.js // logs 逻辑
│ ├── logs.json // logs 配置
│ ├── logs.wxml // logs 结构
│ └── logs.wxss // logs 样式表
├── app.js // 逻辑
├── app.json // 公共配置
├── app.wxss // 公共样式表
├── project.config.json // 项目配置
└── sitemap.json // 页面收录配置
打包后
Project
├── app-config.json // 小程序工程全部json配置信息
├── app-service.js // JS业务逻辑打包到此处
├── page-frame.html // 视图的模板文件
└── pages
├── index.html // index 页面
└── logs.html // logs 页面
架构方案
微信小程序的框架包含两部分View
视图层与AppService
逻辑层,View
层用来渲染页面结构,AppService
层用来逻辑处理、数据请求、接口调用,它们在两个进程里运行,具体实现是在两个Webview
中运行。
视图层和逻辑层通过系统层的JSBridge
进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。
----------------------- -----------------------
| View | | AppService |
| | | |
| Page1 Page2 Page3 | | Manager Api |
----------------------- -----------------------
| ↑ | ↑
| Event | Data | Data | Event
↓ | ↓ |
-------------------------------------------------------------------------
| JSBridge |
| |
| Native Storage Network ... |
-------------------------------------------------------------------------
微信将所有的视图都将加载到一个Webview
中,称之为View
层。将所有进行逻辑处理的JS
代码全部加载到另一个WebView
中,称之为AppService
层,每个小程序只有一个并且整个生命周期常驻内存。在JSBridge
中封装了消息通信以及通过App
访问OS
能力的实现,对于消息通信通过在不同平台调用相应的方法进行通信,开发环境为window.postMessage
, IOS
下为WKWebview
的window.webkit.messageHandlers.invokeHandler.postMessage
,Android
下为WeixinJSCore.invokeHandler
。在Js
引擎方面,Android
中使用X5
内核,IOS
中使用JavaScriptCore
引擎,开发工具中使用nwjs Chrome
内核。
通过使用View
视图层与AppService
逻辑层就实现了双线程的小程序运行方案,通过两个线程,可以做到将代码放入沙箱执行,从而做到对于代码执行的安全与管控,当然对于双线程只是一个小程序的解决方案,倘若要在一个App
上运行多个小程序,就应该采用多线程方案去执行,不仅是对于性能方面的考虑,也是为了防止小程序之间相互影响。
底层支持
微信小程序开发工具中拥有一些编译支持模板以及小程序底层支持文件。
-
transWxmlToJs
:wxml
转js
-
transWxssToCss
:wxss
转css
-
transConfigToPf
: 模板页配置 -
transWxmlToHtml
:wxml
转html
-
transManager
: 管理器 -
WAConsole.js
: 框架JS
库,控制台能力 -
WAWebview.js
: 框架JS
库,提供视图层基础的API
能力,主要功能有将消息通信封装为JSBridge
消息,日志组件Reporter
封装,wx
对象下部分渲染视图方面的Api
,小程序组件实现和注册,VirtualDOM
与diff
和Render UI
的实现,页面事件触发处理 -
WAService.js
: 框架JS
库,提供逻辑层基础的API
能力,主要功能有消息通信封装为JSBridge
消息,日志组件Reporter
封装,wx
对象下面的大部分Api
方法,App()
小程序入口,Page()
页面的入口,getApp
等全局方法,数据绑定,事件分发,生命周期管理,路由管理,模块化能力等
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.zhihu.com/question/50920642
https://kangzubin.com/wxapp-decompile-1/
https://github.com/berwin/Blog/issues/49
https://segmentfault.com/a/1190000018631528
http://eux.baidu.com/blog/fe/微信小程序架构原理
https://juejin.im/post/5da444ab6fb9a04e054d93d8
https://cloud.tencent.com/developer/article/1029663
- 如何正确并快速理解MapReduce
- mysqldump的简单使用
- mac:在当前文件夹打开terminal终端
- 斯诺登研发黑客警报App上架 监测功能引发争议
- JMS + jboss EAP 6.2 示例
- Maven Compilation error [package org.testng.annotations does not exist]
- 查看jar包的jdk版本并降级
- ejb3: message drive bean(MDB)示例
- java提示找不到或无法加载主类
- 学Java有什么好方法?刻苦学技术让我最终成为自信的码农
- expect+scp传输文件发现文件丢失
- IBM WebSphere MQ 7.5基本用法
- QPS的计算
- Django----中间件详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker体验(一)
- (二)Hadoop集群配置安装
- 压缩视频
- (四)Java读写文件,合并成新的文件
- 【小白学金融】—— 用 STATA 计算 CAR 值
- 3行核心CSS代码的rate评分组件,秀到你怀疑人生
- 用 Rust 和 N-API 开发高性能 NodeJS 扩展
- 教你 Linux 免密登录配置
- Linux阅码场 - Linux内核月报(2020年08月)
- 事务的本质和死锁的原理
- 深度神经网络conda环境下载
- 隧道构建:端口转发的原理和实现
- SAP Spartacus注入自定义的CurrentProductService
- Redis系列(十一)redis命令全集
- Jinkens+gitlab针对k8s集群实现CI/CD