# 小程序的架构原理
## 概述
本文将介绍小程序的架构原理，并提供一步一步的指导，帮助初学者实现一个简单的小程序。
## 流程图
```mermaid
flowchart TD
subgraph 小程序开发
A[编写页面结构] --> B[编写样式]
B --> C[编写逻辑]
C --> D[测试和调试]
D --
原创
2023-09-15 22:38:54
66阅读
目录小程序的由来架构：渲染与逻辑的分离问题微信客户端打开一个小程序会新开一个进程吗？JavascriptCore是什么？小程序的数据是存储在哪个位置？ 小程序包有限制吗？小程序的由来在传统WEB开发中，在渲染网页的过程中， 执行Javascript，和解析HTML是两个互斥的过程。这意味着执行复杂Javascript代码，可能则会阻塞UI渲染，导致网页交互会卡顿或者白屏。（参见浏览器渲染
转载
2024-05-27 11:00:32
41阅读
开发模式由于小程序宿主是客户端的App，如果采用纯客户端的原生技术来编写，那小程序的代码需要和App代码一起发布，这种开发节奏不符合小程序的需求所以要像 web 技术一样存放一份随时可以更新的资源包放在云端，下载到本地动态执行后即可渲染出页面。选择Hybrid的渲染方式。双线程模型可以阻止开发者使用一些浏览器提供的跳转页面，操作 DOM ，动态执行脚本等开放性接口。渲染层： 多个 WebView
转载
2024-01-10 22:35:11
83阅读
小程序的 Http Rquest 请求是不是用的浏览器 Fetch API?不是， http request是由逻辑层发起，通过native去触发的，且不支持promise。小程序渲染再同一个线程么？小程序是双线程设计，即视图渲染与业务逻辑分别在运行在不同的线程中。这个设计主要是解决web技术中的一个痛点： web页面开发渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应或者白屏，
转载
2024-08-12 21:12:31
48阅读
概述作为一名前端开发，假设你还停留在应用开发层面，那你就OUT了，快来跟我一起探讨下小程序框架本身底层实现的一些技术细节吧，让我们从小程序的执行机制来深度了解小程序。小程序是基于WEB规范，採用HTML,CSS和JS等搭建的一套框架，微信官方给它们取了一个非常牛逼的名字：WXML,WXSS，但本质上还是在整个WEB体系之下构建的。 WXML，个人推測在取这个名字的是微信的Xml，说究竟就是xml的
转载
2023-09-11 10:16:00
143阅读
本文将介绍小程序的核心视图层逻辑层分离架构，并通过iOS的代码来模拟这种双线程模型。什么是小程序小程序是一种新的移动应用程序格式，是一种依赖Web技术，但也集成了原生应用程序功能的混合解决方案。 目前市面上小程序平台微信、支付宝、百度、头条、京东、凡泰等；小程序一些特性有助于填补Web和原生平台之间的鸿沟，因此小程序受到了一些超级应用程序的欢迎。它不需要安装，支持热更新。具备多个Web视图以提高性
转载
2024-01-20 02:09:04
81阅读
一. 运行机制首先了解下小程序的运行机制，小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。大致运行机制如下图。小程序生命周期图接下来我们是图中概念讲解，项目中也会经常遇到。1）小程序的启动通常来说，小程序启动可以分为两种情况，一种是冷启动，一种是热启动。冷启动： 如果用户首次打开，或者小程序销毁后被用户再次打开，此时小程序需要重新加载启动，就是冷启动。热启动： 如
转载
2023-11-02 10:51:06
80阅读
本文将介绍小程序的核心视图层逻辑层分离架构，并通过 iOS 的代码来模拟这种双线程模型。什么是小程序小程序是一种新的移动应用程序格式，是一种依赖 Web 技术，但也集成了原生应用程序功能的混合解决方案。目前市面上小程序平台微信、支付宝、百度、头条、京东、凡泰等；小程序一些特性有助于填补 Web 和原生平台之间的鸿沟，因此小程序受到了一些超级应用程序的欢迎。它不需要安装，支持热更新。具备多个 Web
从小程序的定位来讲，它就不可能用纯原生技术来进行开发，因为那样它的编译以及发版都得跟随微信，所以需要像Web技术那样，有一份随时可更新的资源包放在远程，通过下载到本地，动态执行后即可渲染出界面。
原创
2022-12-18 00:19:17
102阅读
文件结构在我们新建小程序项目的时候，工具会默认给我们新建一些文件，这也是小程序的基本文件结构。除了一些基本结构以外，我们可以根据自己的需求新建目录。小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。1.一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：文件必填作用app.js是小程序逻辑,设置全局属性、方法，小程序的生命周期app.json是小程序公共设置，所有的页
转载
2023-07-27 16:01:04
200阅读
小程序上线以来，一向被称为“便携版”的APP，关于两者之间的区别，无外乎小程序相对轻便、开发成本低，下面让我们来看一下小程序的“庐山真面目”！一、app的分类大致可以分为这3种：native app（原生app）、web app、hybrid app（混合app），关系如下图：二、什么是小程序小程序是介于web网页应用和原生应用的一种产物；小程序的特点：三、小程序架构视图层和逻辑层分离，通过数据驱
转载
2023-07-10 11:40:57
239阅读
一.什么是小程序1.小程序是微信推出的一种新的公众号的形态 2.不需要下载安装即可在微信中使用的应用 3.小程序、订阅号、服务号、企业号是并行的体系二.小程序为开发者提供了什么 小程序提供了一个框架，微信称之为MINA ，这个框架主要分两个层面，视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML 中的动态数据均来自对应 Page 的 da
转载
2023-08-11 11:05:52
661阅读
index.js 是页面的脚本文件（必须），在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。index.wxml是页面结构文件（必须）。index.wxss是页面样式表文件（非必须），当有页面样式表时，页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的
转载
2023-08-11 19:47:55
48阅读
你有没有发现，支付宝也有小程序了？最近，我们把之前做的微信小程序“扫码入库”移植到了支付宝小程序平台，今天在这里分享下其中的一些体验，供各位参考。另外也借机会谈一谈，怎么能做一个“正儿八经”的项目。特别申明：此文仅是客观的技术和产品讨论，不吹不黑。如果你有什么不同观点，可以留言提出，但务必请先看完内容，不要乱杠。什么是小程序？你在微信里应该或多或少都用过小程序，比如微信里的摩拜单车、大众点评、猫眼
一、小程序基础知识 小程序是基于WEB规范，采用HTML、CSS和JS等搭建的一套框架，官方给它们取的名字：WXML、WXSS，但本质上还是在整个WEB体系之下构建的。WXML说到底就是xml的一个子集。WXML采用自定义的少量标签WXSS，大家可以理解为就是自定义的CSS。实现逻辑部分的J
转载
2021-04-16 15:50:00
805阅读
2评论
参考了几篇文章, 了解下, 小程序的运行和设计流程
参考文档小程序底层实现原理及一些思考为了安全和管控, 双线程执行Web Worker执行用户的代码; UI线程执行大部分的功能.微信小程序架构原理只通过mvvm模板语法动态改变页面, 不支持BOM操作编译过程:
wcc可执行程序编译.xml文件生成js脚本, js脚本在传入正确路径, 得到了一个virt
转载
2024-05-20 19:02:15
48阅读
导语通过这篇文章和大家一起分析小程序的架构，分享开发经验。 一、小程序介绍 1、小程序特点 2、小程序演示 视频地址：https://v.qq.com/x/page/w0353d7co6y.html 3、小程序为什么那么快 Page Frame Native预先额外加载一个WebView 当打开指定页面时，用默认数据直接渲染，请求数据回来时局部更新 返回显示历史View 退出小程序，Vi
转载
2024-03-12 14:20:04
54阅读
框架小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。响应的数据绑定框架的核心是一
转载
2023-08-29 14:14:06
164阅读
小程序底层架构与浏览器对比以微信小程序为例，与浏览器中的对应关系：js 开发逻辑代码 -> js -> v8wxss （多了rpx单位）控制样式 -> css -> 浏览器渲染器wxml xml语言 控制渲染层展示 -> html -> 浏览器渲染器 -> dom浏览器单线程 存在阻塞小程序双线程架构
js 逻辑层wxml、wxss 视图层JSBri
转载
2023-07-07 15:30:14
267阅读
小程序是基于WEB规范，采用HTML,CSS和JS等搭建的一套框架，微信官方给它们取的名字：WXML,WXSS，但本质上还是在整个WEB体系之下构建的。 WXML，说到底就是xml的一个子集。WXML采用微信自定义的少量标签WXSS，大家可以理解为就是自定义的CSS。实现逻辑部分的JS还是通用的ES规范，并且runtime还是Webview（IOS WKWEBVIEW, ANDROID X5）一个
转载
2023-11-12 13:11:16
61阅读
