什么是小程序?特点和技术架构详解
小程序是一种新的移动应用程序格式,一种结合了 Web 技术以及客户端技术的混合解决方案。
传统的原生应用运行起来比较流畅,但是也有天然的基因缺陷:
- 不支持动态化,发布周期长
- 需要开发Android和iOS两套代码,开发成本高
相比较之下,Web 技术有这方面的优势,但是其劣势也比较明显:
- 无法离线使用
- 性能表现差
- 无法方便地调用原生能力
因此,小程序应运而生。它整合两项技术的优势,提供一个简单、高效的应用开发框架和丰富的组件及 API,你可以使用你熟悉的 Web 技术,快速开发出具备原生体验的应用。
特点
小程序与普通网页开发的区别
小程序的主要开发语言是 JavaScript,小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者之间存在一些区别。
| 编号 | 普通网页开发 | 小程序开发 |
|---|---|---|
| 1 | 网页开发渲染线程和脚本线程是互斥关系,因此,长时间的脚本运行可能会导致页面失去响应。 | 开发渲染和脚本相互独立,分别运行在不同的线程中。 |
| 2 | 可以使用各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。 | 逻辑层和渲染层分开,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的 DOM API 和 BOM API。前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中无法运行。同时,JSCore 的环境同 Node.js 环境也不尽相同,所以,一些 NPM 的包在小程序中也无法运行。 |
| 3 | 需要面对的环境是各式各样的浏览器: - PC 端:IE、Chrome、QQ 浏览器等; - 移动端:Safari、Chrome 以及 iOS、Android 系统中的各式 WebView。 | 需要面对的是两大操作系统 iOS 和 Android 的客户端,以及用于辅助开发的小程序开发者工具。小程序中三大运行环境也有所区别,如下表所示。 |
| 4 | 只需要使用到浏览器,并且搭配上一些辅助工具或者编辑器。 | 需要经过申请小程序帐号、安装小程序开发者工具、配置项目等过程。 |
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| iOS | Quickjs | WKWebView |
| 安卓 | Quickjs | Chrome WebView |
| Tuya MiniApp Tools | Chrome WebView | Chrome WebView |
小程序和PWA的区别
小程序的目的并不是取代渐进式 Web 应用程序 (PWA)、原生应用或 Web。
从广义上讲,这些技术之间的显着差异之一是执行环境。PWA 几乎可以在浏览器中的任何支持 Web 的环境中运行,而小程序则绑定到特定平台。另一个本质区别是分发机制,小程序是打包且独立的,而 PWA 的资源分布在整个 Web 上。
两种技术在编码方面都使用类似的编程和标记语言以及基于 CSS 的样式表。小程序基于 HTML子集以及数据绑定和事件管理的特定机制实现专用的领域特定语言。
PWA 依赖于标准 Web API,而小程序则实现非标准 API 以最大限度地发挥平台的功能,例如设备特定的功能和涂鸦专有的服务。
技术架构
小程序采用视图层和逻辑层分离的架构。视图层负责渲染页面,包括Web组件和原生组件显示,可以认为是混合渲染。逻辑层是用JS引擎实现的, 负责小程序的事件处理、API 调用和生命周期管理。

Tuya MiniApp
Tuya MiniApp 是涂鸦基于小程序,集合开发工具,研发框架,开发平台, 容器SDK等设施打造的完整的移动应用研发体系。
你可以使用 Tuya MiniApp Tools 进行小程序的开发调试,使用小程序开发者平台做小程序的管理配置。
小程序需要运行在 MiniApp SDK之上,它作为小程序的运行容器。涂鸦系的 App 内置了该SDK。
在开发阶段,你可以使用小程序原生语法开发,也可以使用涂鸦自研的Ray框架,体验React的研发模式。后续我们也会支持其他前端框架。
由于应用场景的差异,在运行态,分成智能小程序和面板小程序两种形式。其中面板小程序用来开发设备面板,它有特定的研发模式,并且我们推荐使用Ray进行面板小程序的研发,因为涂鸦在该模式上做了大量的实践积累,可以帮助你大大提升面板小程序的研发效率。

立即开发小程序
相关文章:
什么是小程序?特点和技术架构详解
小程序是一种新的移动应用程序格式,一种结合了 Web 技术以及客户端技术的混合解决方案。 传统的原生应用运行起来比较流畅,但是也有天然的基因缺陷: 不支持动态化,发布周期长需要开发Android和iOS两套代码,开发成本高…...
边缘计算的挑战和机遇——数据安全与隐私保护
边缘计算的挑战和机遇 边缘计算面临着数据安全与隐私保护、网络稳定性等挑战,但同时也带来了更强的实时性和本地处理能力,为企业降低了成本和压力,提高了数据处理效率。因此,边缘计算既带来了挑战也带来了机遇,需要我…...
linux-等保三级脚本(1)
该脚本主要是针对 CentOS Linux 7 合规基线加固的一些配置操作,包括创建用户、安全审计配置、入侵防范配置、访问控制配置、身份鉴别策略配置等。如果您需要在脚本中添加公司网址,您可以在适当的位置添加相应的内容。不过请注意,在实际生产环…...
K8s面试题——情景篇
文章目录 一、考虑一家拥有分布式系统的跨国公司,拥有大量数据中心,虚拟机和许多从事各种任务的员工。您认为这样公司如何以与 Kubernetes 一致的方式管理所有任务?二、考虑一种情况,即公司希望通过维持最低成本来提高其效率和技术运营速度。…...
.NET 8.0 发布到 IIS
如何在IIS(Internet信息服务)上发布ASP.NET Core 8? 在本文中,我假设您的 Windows Server IIS 上已经有一个应用程序池。 按照步骤了解在 IIS 环境下发布 ASP.NET Core 8 应用程序的技巧。 您需要设置代码以支持 IIS 并将项目配…...
当前vscode环境下 多进程多线程运行情况探究
我的代码 其中在“打开图片时”、“进入子进程之前”、“子进程join前”、“进入子进程区域后”,“子进程join后”、“进入子线程区域后”分别打印了进程线程的编号和数量。 # -*- coding: utf-8 -*-# Form implementation generated from reading ui file test2.…...
使用WAF防御网络上的隐蔽威胁之命令注入攻击
命令注入攻击是网络安全领域的一种严重威胁,它允许攻击者在易受攻击的应用程序上执行恶意命令。 这种攻击通常发生在应用程序将用户输入错误地处理为操作系统命令的情况下。 什么是命令注入攻击 定义:命令注入攻击发生在攻击者能够在易受攻击的应用程…...
blender 导入到 Marvelous Designer
1) 将模型的所有部分合并为一个单独的mesh 2) 先调整计量单位: 3)等比缩放,身高调整到180cm左右 4)应用当前scale 首先,选中你要修改的物体,然后按下Ctrl-A键,打开应用…...
【Redis】AOF 源码
在上篇, 我们已经从使用 / 机制 / AOF 过程中涉及的辅助功能等方面简单了解了 Redis AOF。 这篇将从源码的形式, 进行深入的了解。 1 Redis 整个 AOF 主要功能 Redis 的 AOF 功能概括起来就 2 个功能 AOF 同步: 将客户端发送的变更命令, 保存到 AOF 文件中AOF 重写: 随着 Red…...
【小笔记】算法训练基础超参数调优思路
【学而不思则罔,思维不学则怠】 本文总结一下常见的一些算法训练超参数调优思路(陆续总结更新),包括: batchsize学习率epochsdropout(待添加) Batch_size 2023.9.29 简单来说,较…...
Blender——将模型及其所有纹理与材质导入unity
前期准备 参考视频:7分钟教会你如何将Blender的模型材质导入unity_哔哩哔哩_bilibili 实验模型官网下载地址:Hoi An Ancient House Model free VR / AR / low-poly 3D model CSDN下载链接: 【免费】Blender三维模型-古代房屋模型ÿ…...
docker-compose和docker compose的区别
在docker实际使用中,经常会搭配Compose,用来定义和运行多个 Docker 容器。使用时会发现,有时候的指令是docker-compose,有时候是docker compose,下面给出解释。 docker官方文档:https://docs.docker.com/c…...
Android NDK Crash信息收集捕获和日志异常定位分析(addr2line)
Android NDK 闪退日志收集与分析 我们在开发过程中,Android JNI层Crash问题或者我们引用的第三方.so库文件报错,都是一个比较头疼的问题。相对Java层来说,由于c/c++造成的crash没有输出如同Java的Exception Strace堆栈信息,所以定位问题也是个比较艰难的事情。 Google Br…...
5、NumPy 高级索引和切片
目录 一、切片(Slicing) 二、NumPy 高级索引详解 1. 布尔型索引 2. 列表/数组索引 3. 花式索引 (Fancy Indexing) 4. 元组索引 三、结合切片与高级索引 一、切片(Slicing) 切片操作允许访问数组的子集。在 NumPy 中…...
.Net 全局过滤,防止SQL注入
问题背景:由于公司需要整改的老系统的漏洞检查,而系统就是没有使用参数化SQL即拼接查询语句开发的程序,导致漏洞扫描出现大量SQL注入问题。 解决方法:最好的办法就是不写拼接SQL,改用参数化SQL,推荐新项目…...
string 模拟实现
string的数据结构 char* _str; size_t _size; size_t _capacity; _str 是用来存储字符串的数组,采用new在堆上开辟空间; _size 是用来表示字符串的长度,数组大小strlen(_str); _capacity 是用来表示_str的空间大小, _capacity…...
医院网络安全建设:三网整体设计和云数据中心架构设计
医院网络安全问题涉及到医院日常管理多个方面,一旦医院信息管理系统在正常运行过程中受到外部恶意攻击,或者出现意外中断等情况,都会造成海量医疗数据信息的丢失。由于医院信息管理系统中存储了大量患者个人信息和治疗方案信息等,…...
Cloudflare cdn 基本使用
个人版免费试用,一个邮箱账号只能缓存一个网站cdn。 地址:cloudflare.com 创建站点 在网站创建站点,填上你的域名 点击进入网站 缓存全局配置 可清除缓存,设置浏览器缓存时间 我设置了always online,防止服务器经常不稳定 缓…...
Oracle21C + PLSQL Developer 15 + Oracle客户端21安装配置完整图文版
一、Oracle21C PLSQL Developer 15 Oracle客户端文件下载 1、Oracl21C下载地址:Database Software Downloads | Oracle 中国 2、 PLSQL Developer 15下载地址:Registered download PL/SQL Developer - Allround Automations 3、 Oracle 客户端下载地址…...
编程笔记 html5cssjs 038 CSS背景
编程笔记 html5&css&js 038 CSS背景 一、CSS 背景属性二、CSS background-color三、不透明度 / 透明度四、使用 RGBA 的透明度五、CSS 背景图像六、CSS 背景重复CSS background-repeatCSS background-repeat: no-repeatCSS background-position 七、练习小结࿱…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
#Uniapp篇:chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器:Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
