什么是小程序?特点和技术架构详解

小程序是一种新的移动应用程序格式,一种结合了 Web 技术以及客户端技术的混合解决方案。
传统的原生应用运行起来比较流畅,但是也有天然的基因缺陷:

  1. 不支持动态化,发布周期长
  2. 需要开发Android和iOS两套代码,开发成本高

相比较之下,Web 技术有这方面的优势,但是其劣势也比较明显:

  1. 无法离线使用
  2. 性能表现差
  3. 无法方便地调用原生能力

因此,小程序应运而生。它整合两项技术的优势,提供一个简单、高效的应用开发框架和丰富的组件及 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只需要使用到浏览器,并且搭配上一些辅助工具或者编辑器。需要经过申请小程序帐号、安装小程序开发者工具、配置项目等过程。
运行环境逻辑层渲染层
iOSQuickjsWKWebView
安卓QuickjsChrome WebView
Tuya MiniApp ToolsChrome WebViewChrome 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进行面板小程序的研发,因为涂鸦在该模式上做了大量的实践积累,可以帮助你大大提升面板小程序的研发效率。

立即开发小程序

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/631081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

本地电脑远程控制工控现场一台丰炜PLC上,实现读写与监控PLC程序

准备工作 一台可联网操作的电脑一台单网口的远程透传网关及博达远程透传配置工具网线一条,用于实现网络连接和连接PLC一台丰炜 PLC及其编程软件一张4G卡或WIFI天线实现通讯(使用4G联网则插入4G SIM卡,WIFI联网则将WIFI天线插入USB口) 第一步…

【C语言基础考研向】05 scanf读取标准输入超详解

文章目录 一.scanf函数的原理 样例问题原因解决方法 二.多种数据类型混合输入 错误样例正确样例 一.scanf函数的原理 C语言未提供输入/输出关键字,其输入和输出是通过标准函数库来实现的。C语言通过scanf函数读取键盘输入,键盘输入又被称为标准输入。…

khbc靶场小记(upload 666靶场)

尝试上传正常的png jpg gif php的格式的文件发现老是提示烦人的消息(上传不成功); 通过抓包对MIME进行爆破没爆出来,当时可能用成小字典了; 猜测可能是把后缀名和MIME绑定检测了; 反正也没思路,…

Linux shell美化 zsh+oh-my-zsh+power10k

文章目录 安装zsh安装on-my-zsh安装power10k主题安装power10k将oh-my-zsh主题改为power10k字体 设置安装字体配置字体 power10k配置相关插件安装zsh-autosuggestionszsh-syntax-highlighting安装插件完成,重新加载配置文件 美化效果示意: 安装zsh 安装…

学生护眼台灯哪种好一点?分享专业的学生护眼台灯

当代孩子的学业依旧繁重,而随着孩子年龄的增长,作业功课也会越来越多,每天用眼的时间也会越来越长。而且现在很多孩子晚上都会学习到很晚,如果光源不合适是很容易导致视力下降的! 因此我认为一款好的台灯是每个家庭必备…

Peter算法小课堂—并查集

我们先来看太戈编程467题 攀亲戚 题目描述: 最近你发现自己和古代一个皇帝长得很像:都有两个鼻子一个眼睛,你想知道这皇帝是不是你的远方亲戚,你是不是皇亲国戚。目前你能掌握的信息有m条,关于n个人:第i条…

vscode开发java项目

安装java扩展 创建项目 vscode命令行面板搜索java命令行 出现如下提示 No build tools构建项目如下 java项目使用vscode单独打开文件夹(工作区中运行有问题),vscode中可直接点击右上角运行按钮执行 maven中spring boot项目 代码错误可以点…

利用IP应用场景API识别真实用户

引言 在当今数字化时代,随着互联网的普及和应用的广泛,验证用户身份的重要性变得越来越突出。在许多场景中,特别是在涉及安全性、用户体验以及个人隐私保护方面,确定用户的真实身份至关重要。而IP应用场景API则是一种强大的工具&…

机器学习与数据科学-专题1 Python正则表达式-【正则表达式入门-1】

文章目录 第一关相关知识任务要求代码 第二关相关知识任务要求代码 第三关相关知识注意任务描述代码 第一关 相关知识 为了完成本关任务,你需要掌握: 在 Python 中使用正则表达式; 最基础正则表达式; 正则匹配函数。 在 Python…

1308. 全排列的结果-深度优先搜索-DFS

代码&#xff1a; #include <iostream> using namespace std; int n; int a[10]; bool r[10]; void print(int k) {for(int i1; i<k; i){cout<<a[i]<<" ";}cout<<endl; } void fun(int k) {for(int i1; i<n; i){if(r[i] false){a[k…

第一讲_HarmonyOS应用开发环境准备

HarmonyOS应用开发环境准备 1. 知识储备2. 环境搭建2.1 安装node.js2.2 配置node.js2.3 安装命令行工具2.4 安装DevEco Studio2.5 配置DevEco Studio 1. 知识储备 HarmonyOS提供了一套UI开发框架&#xff0c;即方舟开发框架&#xff08;ArkUI框架&#xff09;。方舟开发框架可…

给WordPress网站增加一个带时间的led广告牌

WordPress 后台》外观》小工具》自定义html》添加到合适位置 其他系统可自行添加合适位置 <style type"text/css">.studytextgzbox {background: #F9F9F9; border: 1px solid #999999;margin: 1px;text-align:center; float: left;line-height: 28px;hei…

Qt中ComboBox的简单使用

1.相关说明 combobox中item的文字、data、图片设置 2.界面绘制 3.相关主要代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete …

回归预测 | Matlab实现MSADBO-CNN-LSTM基于改进蜣螂算法优化卷积神经网络-长短期记忆神经网络多特征回归预测

回归预测 | Matlab实现MSADBO-CNN-LSTM基于改进蜣螂算法优化卷积神经网络-长短期记忆神经网络多特征回归预测 目录 回归预测 | Matlab实现MSADBO-CNN-LSTM基于改进蜣螂算法优化卷积神经网络-长短期记忆神经网络多特征回归预测预测效果基本描述程序设计参考资料 预测效果 基本描…

从0开始python学习-48.pytest框架之断言

目录 1. 响应进行断言 1.1 在yaml用例中写入断言内容 1.2 封装断言方法 1.3 在执行流程中加入断言判断内容 2. 数据库数据断言 2.1 在yaml用例中写入断言内容 2.2 连接数据库并封装执行sql的方法 2.3 封装后校验方法是否可执行 2.4 使用之前封装的断言方法&#xff0c…

关于VScode的这个ssh的配置的经验

1.首先&#xff0c;我是因为重装了ubantu系统&#xff0c;不得不重新配置ssh 2.第一步&#xff0c;在本机的终端安装ssh插件&#xff1a; &#xff08;1&#xff09; &#xff08;2&#xff09;restart开启这个ssh端口 3.然后&#xff0c;就在vscode里面&#xff0c;安装哪个…

使用CSS计算高度铺满屏幕

前言 今天写项目时出现高度设置百分百却不占满屏幕&#xff0c;第一反应看自己设置的是块级元素还是行级元素。看了几篇博客&#xff0c;发现并不能解决问题。脱离文档流的做法都没考虑&#xff0c;前期模板搭建脱离文档流&#xff0c;后面开发会出现很多问题。 以上图片是我…

FindMy技术与相机结合

FindMy是苹果公司提供的设备追踪服务&#xff0c;用来帮助用户定位丢失的设备。自苹果公司开放Findmy网络之后&#xff0c;FindMy技术便与各种生活设备相结合&#xff0c;比如与相机的结合。 想象一下&#xff0c;你正在外出办事或者旅行时&#xff0c;突然意识到相机丢了&…

SSR服务端渲染解决了什么问题?有做过SSR吗?

面试官&#xff1a;SSR解决了什么问题&#xff1f;有做过SSR吗&#xff1f;你是怎么做的&#xff1f; 一、是什么 Server-Side Rendering 我们称其为SSR&#xff0c;意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术&#xff0c;发送到浏览器&#xff0c;然…

Unity关于新手引导中实现遮罩镂空效果

在新手引导每一步中实现可以遮掉其他部分而显示当前需要点击的部分&#xff0c;只需要在每一步引导的时候设置对应的镂空区域的RectTransform.效果如下图&#xff1a; 代码&#xff1a; public class SelfMaskSet : MaskableGraphic, ICanvasRaycastFilter {[SerializeField]p…