什么是小程序?特点和技术架构详解
小程序是一种新的移动应用程序格式,一种结合了 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 七、练习小结࿱…...
终极指南:如何在Windows上简单快速实现SSH远程文件系统挂载
终极指南:如何在Windows上简单快速实现SSH远程文件系统挂载 【免费下载链接】sshfs-win SSHFS For Windows 项目地址: https://gitcode.com/gh_mirrors/ss/sshfs-win SSHFS-Win是一个革命性的开源工具,它让你能够在Windows操作系统中通过SSH协议直…...
Adobe-GenP:5分钟解锁Adobe全家桶的终极方案
Adobe-GenP:5分钟解锁Adobe全家桶的终极方案 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP 还在为Adobe Creative Cloud的高昂订阅费用发愁吗ÿ…...
淘宝淘金币自动化脚本终极指南:每天节省25分钟的高效神器
淘宝淘金币自动化脚本终极指南:每天节省25分钟的高效神器 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本,包含蚂蚁森林收取能量,芭芭农场全任务,解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi 在…...
长期使用 Taotoken 后对账单追溯与成本分析的实际体验
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 长期使用 Taotoken 后对账单追溯与成本分析的实际体验 在项目开发中引入大模型能力后,成本控制与资源优化是团队负责人…...
为什么angular-dragdrop是AngularJS开发者的必备工具?
为什么angular-dragdrop是AngularJS开发者的必备工具? 【免费下载链接】angular-dragdrop Implementing jQueryUI Drag and Drop functionality in AngularJS (with Animation) is easier than ever 项目地址: https://gitcode.com/gh_mirrors/an/angular-dragdro…...
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
完整可运行代码<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>面积图 - 男孩姓名出生人数</t…...
【更新 v 2.7.5 版本】桌面版 Open Claw 本地一键部署指南
✨ 核心亮点 零代码门槛|全程可视化|无需手动配环境|内置所有依赖|28 万 Tokens 额度 🔗 下载地址 https://xiake.yun/api/download/package/16?promoCodeIV8E496E2F7A 📝 前言 开源圈热门的「数字员…...
3分钟快速上手:Buzz音频转录软件完整使用指南
3分钟快速上手:Buzz音频转录软件完整使用指南 【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Trending/buz/buzz 还在为音频转录烦恼…...
如何突破Switch游戏限制:Ryujinx开源模拟器的5大实战解决方案
如何突破Switch游戏限制:Ryujinx开源模拟器的5大实战解决方案 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 你是否渴望在PC上畅玩Switch独占游戏,却受限于硬件…...
深度解析EdiZon:Switch游戏存档管理与内存编辑的进阶实战指南
深度解析EdiZon:Switch游戏存档管理与内存编辑的进阶实战指南 【免费下载链接】EdiZon 💡 A homebrew save management, editing tool and memory trainer for Horizon (Nintendo Switch) 项目地址: https://gitcode.com/gh_mirrors/ed/EdiZon 在…...
