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

小程序是一种新的移动应用程序格式,一种结合了 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进行面板小程序的研发,因为涂鸦在该模式上做了大量的实践积累,可以帮助你大大提升面板小程序的研发效率。

立即开发小程序

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用原生input模拟器样式正常,但是真机上 input框溢出

目录 一、问题 二、解决方法 三、总结 tiips:如嫌繁琐,直接移步总结即可! 一、问题 1.使用原生input写了一个搜索框,在模拟器和pc上一切正常。但是打包放到手机上,样式就有问题:这个搜索框的布局是正常的&#xf…

pycharm管理仓库(Manager Repository)不见了

经常使用pycharm的大佬们都知道,pycharm中内置了很多库和包,很好用 但是下载来用自带的源很麻烦,于是就用国内的源 可以当我们添加管理仓库的时候,却没有了按钮,如何解决呢? 回到pycharm的主界面&#xf…

【C++】STL 算法 - 累加填充算法 ( 元素累加算法 - accumulate 函数 | 元素填充算法 - fill 函数 )

文章目录 一、元素累加算法 - accumulate 函数1、函数原型分析2、代码示例 二、元素填充算法 - fill 函数1、函数原型分析2、代码示例 一、元素累加算法 - accumulate 函数 1、函数原型分析 在 C 语言 的 标准模板库 ( STL , STL Standard Template Library ) 中 , 提供了 accu…

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时,而C#语言易受反编译影响,存在代码泄露风险。本文通过《QQ乐团》项目实践,提出一种适用于Unity引擎的代码混淆方案,以保护代码逻辑。 引言 在Unity引擎下,为了防止代码被轻易反编译&a…

AVL树 -- C++实现

AVL树 – C实现 1. AVL树的概念 二叉搜索树虽可以缩短查找的效率,但如果数据有序或接近有序二叉搜索树将退化为单支树,查找元素相当于在顺序表中搜索元素,效率低下。因此,两位俄罗斯的数学家G.M.Adelson-Velskii和E.M.Landis在1…

组件v-model(.sync)记录使用(vue3)

示例(演示地址) 以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码: 首先,让我们来了解一下Vue3中v-model的用法。在Vue3中,v-model 指令可以用于自定义组件上,用于实现组件的双向数据绑定。与Vue2…

为什么选择HelpLook而不是Document360:知识库工具分析

在现今的信息化时代,企业们越来越倾向于使用知识库工具来收集、组织和分享他们的知识资源。HelpLook和Document360是市面上两款不错的知识库管理工具。那如果非要在他们之中选一个,还是建议HelpLook。以下是一些对比分析,希望可以给大家提供参…

Python通过HTTP代理进行数据传输

在Python中,HTTP代理是一种常用的技术,用于控制和修改HTTP请求和响应。通过使用HTTP代理,我们可以更好地控制网络请求的行为,提高安全性、隐私性和效率。下面我们将详细介绍如何在Python中使用HTTP代理进行数据传输。 一、设置HT…

tinyxml2

使用tinyxml2,得知道一些xml基础 xml tutorial--菜鸟 tinyxml2类对象 链接 结构 XMLNode 什么是节点 节点:元素、声明、文本、注释等。 XMLDocument xml文档(文件)对象。 作用: 加载xml文件, tinyxml2作用 先定义两个宏 …

Elasticsearch各种高级文档操作

本文来记录下Elasticsearch各种文档操作 文章目录 初始化文档数据查询所有文档匹配查询文档关键字精确查询文档多关键字精确查询文档字段匹配查询文档指定查询字段查询文档过滤字段查询文档概述指定想要显示的字段示例指定不想要显示的字段示例 组合查询文档范围查询文档概述使…

Redis+lua 解决秒杀超卖问题

商品超卖的原因是在高并发场景下,业务层面扣库存和库存的判断会出现并发情况,但是使用lua 脚本,就会避免超卖的发生。 1.在项目resources文件夹创建一个名为 stock.lua的脚本 if (redis.call(hexists, KEYS[1], KEYS[2]) 1) thenlocal stock tonumber…

HarmonyOS—构建第一个ArkTS应用(Stage模型)

创建ArkTS工程 构建第一个页面 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发,选择模板“Empty Ability”&am…

Intel Quartus II IP之DP1.4 工程的创建与使用

前述: Win10电脑安装了Quartus 21.4,这可以满足绝大多数工程,特别是对于简单调用fifo/ram等的工程,但是想要学习Quartus的HDMI/DP等高速接口类IP,首先需要创建HDMI/DP IP的设计demo工程,此时还需要安装Ecl…

android studio从空白开始

对我来说,真正的第一步是清理电脑C盘。从剩余8G清理到25G,把原来看不顺眼又不敢删的文件夹和软件全删了,删爽了的后果就是,用两天的时间在把一些环境配置慢慢装回来,node.js,jdk,npm。努力把它们…

SG3225HBN(晶体振荡器)

SG3225HBN晶体振荡器是一款低抖动、HCSL输出晶振,频率范围100MHz ~ 325MHz,3.2 2.5 1.05mm封装常规有源晶振,具有小尺寸,高稳定性,可以在G:-40℃至 85℃,H:-40℃至 105℃ 的温度内…

网页版短信平台主要功能有哪些|短信系统开发搭建源码

网页版短信平台主要功能有哪些|短信系统开发搭建源码 网页版短信平台是一种方便用户进行在线短信管理和发送的工具。它具有多项实用的功能,使用户能够更高效地进行短信通讯。以下是网页版短信平台的主要功能: 1. **短信发送和接收:** 用户可…

linux第一个小程序 --- 进度条【简洁】

行缓冲区的概念 结果:先输入hello world然后休眠三秒后结束 当去掉’\n“ 后,结果就变成了先休眠三秒,然后打印hello world后结束。 该现象就证明了缓冲区的存在。 当缓冲区中遇到’‘\n’或者缓冲区被写满后才会被打印出来,在第…

vue2项目导入高德地图

1、看官网新手入门链接导入原生高德地图: 展示地图-入门教程-地图 JS API 2.0 | 高德地图API 2、uniapp开发h5,使用map组件,使用高德地图: 在配置文件中配置地图为高德,(默认使用的是腾讯)&am…

港科夜闻|香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力,这种新型感测器阵列方法可能优化感测器阵列…

SpringBoot-基础篇

学了好久springBoot但是每一次使用都没有一个固定的方法或者是代码的模版,于是乎使用的时候吗,每次都会遇到很多的问题,所以,总结一篇博客用于日后方便自己开发使用,其中包含项目创建,坐标导入,…