HarmonyOS 应用开发之通过数据管理服务实现数据共享静默访问

场景介绍

典型跨应用访问数据的用户场景下,数据提供方会存在多次被拉起的情况。

为了降低数据提供方拉起次数,提高访问速度,OpenHarmony提供了一种不拉起数据提供方直接访问数据库的方式,即静默数据访问。

静默数据访问通过数据管理服务进行数据的访问和修改,无需拉起数据提供方。

数据管理服务仅支持数据库的基本访问或数据托管,如果有业务处理,需要将业务处理封装成接口,给数据访问方调用。

如果业务过于复杂,无法放到数据访问方,建议通过DataShareExtensionAbility 拉起数据提供方实现功能。

运作机制

可以通过数据管理服务进行代理访问的数据分为以下三种:

  • 持久化数据:归属于数据提供方的数据库,这类数据存储于数据提供方的沙箱,可以在数据提供方中通过声明的方式进行共享,按表为粒度配置为可以被其他应用访问的数据表。

  • 过程数据:托管在数据管理服务上的过程数据,这类数据存储于数据管理服务的沙箱,格式为json或byte数据,无人订阅10天后自动删除。

  • 动态数据:托管在设备上的动态数据,这类数据存储于内存中,设备重启之后自动删除。只限于调用enableSilentProxy和disableSilentProxy接口设置的数据。

数据类型存储位置数据格式有效期适用场景
持久化数据数据提供方的沙箱数据库中的数据表永久存储适用于数据格式类似关系型数据库的相关场景,如日程,会议等
过程数据数据管理服务的沙箱json或byte数据无人订阅10天后自动删除适用于数据有时效性且数据格式较简单的相关场景,如步数,天气,心率等
动态数据数据管理服务的内存key-value数据设备重启之后自动删除适用于动态关闭/打开静默访问通道的场景。例如:升级过程中为了保证数据正确性可以动态关闭静默访问,升级结束后再调用相关接口打开静默访问。调用接口生成的开启关闭状态,设备重启之后会清除。只限于调用enableSilentProxy和disableSilentProxy接口设置的数据

图1 静默数据访问视图

  • 和跨应用数据共享方式不同的是,静默数据访问借助数据管理服务通过目录映射方式直接读取数据提供方的配置,按规则进行预处理后,并访问数据库。

  • 数据访问方如果使用静默数据访问方式,URI需严格按照如下格式:
    datashareproxy://{bundleName}/{dataPath}

    数据管理服务会读取对应bundleName作为数据提供方应用,读取配置,进行权限校验并访问对应数据。

    dataPath为数据标识,可以自行定义,在同一个数据提供方应用中需要保持唯一。

约束与限制

  • 目前持久化数据中仅关系型数据库支持静默数据访问方式。
  • 整个系统最多同时并发16路查询,有多出来的查询请求需要排队处理。
  • 持久化数据不支持代理创建数据库,如果需要创建数据库,需要拉起数据提供方。
  • 数据提供方如果是normal级别签名的应用,配置的数据读写权限必须为system_basic及以上权限。

接口说明

以下是静默数据访问的相关接口,大部分为异步接口。异步接口均有callback和Promise两种返回形式,下表均以callback形式为例,更多接口及使用方式请见 数据共享。

通用接口

接口名称描述
createDataShareHelper(context: Context, uri: string, options: DataShareHelperOptions, callback: AsyncCallback<DataShareHelper>): void创建DataShareHelper实例。

持久化数据

接口名称描述
insert(uri: string, value: ValuesBucket, callback: AsyncCallback<number>): void向目标表中插入一行数据。
delete(uri: string, predicates: dataSharePredicates.DataSharePredicates, callback: AsyncCallback<number>): void从数据库中删除一条或多条数据记录。
query(uri: string, predicates: dataSharePredicates.DataSharePredicates, columns: Array<string>, callback: AsyncCallback<DataShareResultSet>): void查询数据库中的数据。
update(uri: string, predicates: dataSharePredicates.DataSharePredicates, value: ValuesBucket, callback: AsyncCallback<number>): void更新数据库中的数据记录。
addTemplate(uri: string, subscriberId: string, template: Template): void添加一个指定订阅者的数据模板。
on(type: ‘rdbDataChange’, uris: Array<string>, templateId: TemplateId, callback: AsyncCallback<RdbDataChangeNode>): Array<OperationResult订阅指定URI和模板对应的数据变更事件。

过程数据

接口名称描述
publish(data: Array<PublishedItem>, bundleName: string, version: number, callback: AsyncCallback<Array<OperationResult>>): void发布数据,将数据托管至数据管理服务。
on(type: ‘publishedDataChange’, uris: Array<string>, subscriberId: string, callback: AsyncCallback<PublishedDataChangeNode>): Array<OperationResult>订阅已发布数据的数据变更通知。

动态数据

接口名称描述
enableSilentProxy(context: Context, uri?: string): Promise<void>数据提供方动态开启静默访问。
当访问方通过静默访问调用DataShare相关接口的时候,校验静默访问的开关状态。
如果静默访问的是开启的,DataShare相关接口会执行原逻辑。
disableSilentProxy(context: Context, uri?: string): Promise<void>数据提供方来动态关闭静默访问。
当访问方通过静默访问调用DataShare相关接口的时候,校验静默访问的开关状态。
如果静默访问的是关闭的,DataShare相关接口接口将会直接返回。

持久化数据实现说明

首先,以共享一个关系型数据库为例,说明开发步骤。

数据提供方应用的开发

  1. 数据提供方需要在module.json5中的proxyData节点定义要共享的表的标识,读写权限和基本信息, 配置方法可考参考配置文件。

    表1 module.json5中proxyData节点对应的属性字段

    属性名称备注说明必填
    uri数据使用的URI,是跨应用数据访问的唯一标识。
    requiredReadPermission标识从该数据代理读取数据时所需要的权限,不配置默认不允许其他APP访问数据。支持权限可参考权限列表。
    requiredWritePermission标识从该数据代理修改数据时所需要的权限,不配置默认不允许其他APP修改数据。支持权限可参考权限列表。
    metadata数据源的信息,包含name和resource字段。
    name类型固定为"dataProperties",是配置的唯一标识。
    resource类型固定为"$profile:{fileName}",表示配置文件的名称为{fileName}.json。

    module.json5配置样例:

    "proxyData":[{"uri": "datashareproxy://com.acts.ohos.data.datasharetest/test","requiredReadPermission": "ohos.permission.GET_BUNDLE_INFO","requiredWritePermission": "ohos.permission.KEEP_BACKGROUND_RUNNING","metadata": {"name": "dataProperties","resource": "$profile:my_config"}}
    ]
    

    表2 my_config.json对应属性字段

    属性名称备注说明必填
    path指定数据源路径,目前支持关系型数据库,配置为库名/表名
    type标识数据库类型,目前支持配置为rdb,表示关系型数据库。
    scope数据库所在范围。
    1.module表示数据库位于本模块下;
    2.application表示数据库位于本应用下。

    my_config.json配置样例

    {"path": "DB00/TBL00","type": "rdb","scope": "application"
    }
    

数据访问方应用的开发

  1. 导入基础依赖包。

    import dataShare from '@ohos.data.dataShare';
    import dataSharePredicates from '@ohos.data.dataSharePredicates';
    import UIAbility from '@ohos.app.ability.UIAbility';
    import { ValuesBucket } from '@ohos.data.ValuesBucket';
    import window from '@ohos.window';
    import { BusinessError } from '@ohos.base';
    
  2. 定义与数据提供方通信的URI字符串。

    let dseUri = ('datashareproxy://com.acts.ohos.data.datasharetest/test');
    
  3. 创建工具接口类对象。

    let dsHelper: dataShare.DataShareHelper | undefined = undefined;
    let abilityContext: Context;export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage) {abilityContext = this.context;dataShare.createDataShareHelper(abilityContext, dseUri, {isProxy: true}, (err, data) => {dsHelper = data;});}
    }
    
  4. 获取到接口类对象后,便可利用其提供的接口访问提供方提供的服务,如进行数据的增、删、改、查等。

    // 构建一条数据
    let key1 = 'name';
    let key2 = 'age';
    let key3 = 'isStudent';
    let key4 = 'Binary';
    let valueName1 = 'ZhangSan';
    let valueName2 = 'LiSi';
    let valueAge1 = 21;
    let valueAge2 = 18;
    let valueIsStudent1 = false;
    let valueIsStudent2 = true;
    let valueBinary = new Uint8Array([1, 2, 3]);
    let valuesBucket: ValuesBucket = { key1: valueName1, key2: valueAge1, key3: valueIsStudent1, key4: valueBinary };
    let updateBucket: ValuesBucket = { key1: valueName2, key2: valueAge2, key3: valueIsStudent2, key4: valueBinary };
    let predicates = new dataSharePredicates.DataSharePredicates();
    let valArray = ['*'];
    if (dsHelper != undefined) {// 插入一条数据(dsHelper as dataShare.DataShareHelper).insert(dseUri, valuesBucket, (err, data) => {console.info(`dsHelper insert result:${data}`);});// 更新数据(dsHelper as dataShare.DataShareHelper).update(dseUri, predicates, updateBucket, (err, data) => {console.info(`dsHelper update result:${data}`);});// 查询数据(dsHelper as dataShare.DataShareHelper).query(dseUri, predicates, valArray, (err, data) => {console.info(`dsHelper query result:${data}`);});// 删除指定的数据(dsHelper as dataShare.DataShareHelper).delete(dseUri, predicates, (err, data) => {console.info(`dsHelper delete result:${data}`);});
    }
    
  5. 对指定的数据进行订阅。

    function onCallback(err: BusinessError, node: dataShare.RdbDataChangeNode) {console.info("uri " + JSON.stringify(node.uri));console.info("templateId " + JSON.stringify(node.templateId));console.info("data length " + node.data.length);for (let i = 0; i < node.data.length; i++) {console.info("data " + node.data[i]);}
    }let key21: string = "p1";
    let value21: string = "select * from TBL00";
    let key22: string = "p2";
    let value22: string = "select name from TBL00";
    let template: dataShare.Template = {predicates: {key21: value21,key22: value22,},scheduler: ""
    }
    if(dsHelper != undefined)
    {(dsHelper as dataShare.DataShareHelper).addTemplate(dseUri, "111", template);
    }
    let templateId: dataShare.TemplateId = {subscriberId: "111",bundleNameOfOwner: "com.acts.ohos.data.datasharetestclient"
    }
    if(dsHelper != undefined) {// 使用数据管理服务修改数据时触发onCallback回调,回调内容是template中的规则查到的数据let result: Array<dataShare.OperationResult> = (dsHelper as dataShare.DataShareHelper).on("rdbDataChange", [dseUri], templateId, onCallback);
    }
    

过程数据实现说明

以托管一份过程数据为例,说明开发步骤。

数据提供方应用的开发(可选)

数据提供方需要在module.json5中的proxyData节点定义过程数据的标识,读写权限和基本信息, 配置方法可考参考配置文件。

注意:

  • 该步骤为可选,可以不对module.json5中的proxyData进行配置。
  • 不配置proxyData时,托管数据不允许其他应用访问。
  • 不配置proxyData时,数据标识可以为简写,发布、订阅、查询数据可以使用简写的数据标识,如weather,可以不用全写为datashareproxy://com.acts.ohos.data.datasharetest/weather

表3 module.json5中proxyData节点对应的属性字段

属性名称备注说明必填
uri数据使用的URI,是跨应用数据访问的唯一标识。
requiredReadPermission标识从该数据代理读取数据时所需要的权限,不配置默认不允许其他APP访问数据。支持权限可参考权限列表。
requiredWritePermission标识从该数据代理修改数据时所需要的权限,不配置默认不允许其他APP访问数据。支持权限可参考权限列表。

module.json5配置样例:

"proxyData": [{"uri": "datashareproxy://com.acts.ohos.data.datasharetest/weather","requiredReadPermission": "ohos.permission.GET_BUNDLE_INFO","requiredWritePermission": "ohos.permission.KEEP_BACKGROUND_RUNNING"}
]

数据访问方应用的开发

  1. 导入基础依赖包。

    import dataShare from '@ohos.data.dataShare';
    import UIAbility from '@ohos.app.ability.UIAbility';
    import window from '@ohos.window';
    import { BusinessError } from '@ohos.base';
    
  2. 定义与数据提供方通信的URI字符串。

    let dseUri = ('datashareproxy://com.acts.ohos.data.datasharetest/weather');
    
  3. 创建工具接口类对象。

    let dsHelper: dataShare.DataShareHelper | undefined = undefined;
    let abilityContext: Context;export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage) {abilityContext = this.context;dataShare.createDataShareHelper(abilityContext, dseUri, {isProxy : true}, (err, data) => {dsHelper = data;});}
    }
    
  4. 获取到接口类对象后,便可利用其提供的接口访问提供方提供的服务,如进行数据的增、删、改、查等。

    // 构建两条数据,第一条为免配置的数据,仅自己使用
    let data : Array<dataShare.PublishedItem> = [{key:"city", subscriberId:"11", data:"xian"},{key:"datashareproxy://com.acts.ohos.data.datasharetest/weather", subscriberId:"11", data:JSON.stringify("Qing")}];
    // 发布数据
    if (dsHelper != undefined) {let result: Array<dataShare.OperationResult> = await (dsHelper as dataShare.DataShareHelper).publish(data, "com.acts.ohos.data.datasharetestclient");
    }
    
  5. 对指定的数据进行订阅。

    function onPublishCallback(err: BusinessError, node:dataShare.PublishedDataChangeNode) {console.info("onPublishCallback");
    }
    let uris:Array<string> = ["city", "datashareproxy://com.acts.ohos.data.datasharetest/weather"];
    if (dsHelper != undefined) {let result: Array<dataShare.OperationResult> = (dsHelper as dataShare.DataShareHelper).on("publishedDataChange", uris, "11", onPublishCallback);
    }
    

动态数据实现说明

动态数据实现静默访问只针对数据提供方。以动态开启静默访问为例,说明开发步骤。

数据提供方应用的开发

数据提供方调用开启动态开启静默访问接口,来开启静默访问功能。此接口是搭配data_share_config.json文件中isSilentProxyEnable字段进行工作的。支持的配置可参考data_share_config.json配置

注意:

  • 该步骤为可选,可以不对data_share_config.json文件中isSilentProxyEnable字段进行配置,默认为true,默认为开启静默访问功能。
  • 校验静默访问是否开启,会优先校验enableSilentProxy/disableSilentProxy接口设置的开关状态,其次会校验data_share_config.json文件中isSilentProxyEnable字段。
  • 不调用enableSilentProxy/disableSilentProxy接口时,优先会校验data_share_config.json文件中isSilentProxyEnable字段。
  • 不调用enableSilentProxy/disableSilentProxy接口,也不配置data_share_config.json文件中isSilentProxyEnable字段时,默认静默访问是开启的。
  1. 导入基础依赖包。

    import dataShare from '@ohos.data.dataShare';
    import UIAbility from '@ohos.app.ability.UIAbility';
    import window from '@ohos.window';
    
  2. 定义与数据提供方通信的URI字符串。

    let dseUri = ('datashare:///com.acts.datasharetest/entry/DB00/TBL00');
    
  3. 创建工具接口类对象。

    let abilityContext: Context;export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage) {abilityContext = this.context;dataShare.enableSilentProxy(abilityContext, dseUri);}
    }
    

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

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

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

相关文章

Incus:新一代容器与虚拟机编排管理引擎

Incus是什么&#xff1f; Incus是一个用于编排管理应用型容器、系统型容器及虚拟机实例的管理工具。它是对 Canonical LXD 的继承与发展&#xff0c;引入了更多的存储驱动支持。 Incus项目的产品地址&#xff1a;Linux Containers - Incus - Introduction 在 LXC-Incus 项目…

KnowLog:基于知识增强的日志预训练语言模型|顶会ICSE 2024论文

徐波 东华大学副教授 东华大学计算机学院信息技术系副系主任&#xff0c;复旦大学知识工场实验室副主任&#xff0c;智能运维方向负责人。入选“上海市青年科技英才扬帆计划”。研究成果发表在IJCAI、ICDE、ICSE、ISSRE、ICWS、CIKM、COLING等国际会议上&#xff0c;曾获中国数…

【turtle海龟先生】神奇的“圆”,画,太极圈,铜钱古币

turtle画圆三步法 步骤: 1、导入turtle库 2、确定半径&#xff0c;画圆(circle ) 3、结束(done ) turtle 库中提供一个直接画圆的函数 turtle.circle&#xff08;半径&#xff09;#半径单位为像素 例&#xff1a; turtle.circle ( 100 ) 表示绘制一个半径为100像素长度的圆形 …

基于ROS的地图发布和加载(GAZEBO仿真)

文章目录 环境配置启动仿真运动控制地图保存地图加载Q&A环境配置 cd ~/catkin_ws/src git clone https://github.com/wh200720041/warehouse_simulation_toolkit.git cd .. catkin_make source ~/catkin_ws/devel/setup.bash启动仿真 roslaunch warehou

【软件工程】详细设计(二)

这里是详细设计文档的第二部分。前一部分点这里 4. 学生端模块详细设计 学生端模块主要由几个组件构成&#xff1a;学生登录界面&#xff0c;成绩查询界面等界面。因为学生端的功能相对来说比较单一&#xff0c;因此这里只给出两个最重要的功能。 图4.1 学生端模块流程图 4.…

软考高级架构师:性能评价方法概念和例题

一、AI 讲解 性能评价是衡量计算机系统或其组件在指定条件下执行预期任务的有效性的一种方式。性能评价的方法主要可以分为几种&#xff0c;每种方法都有其特点和适用场景。 性能评价方法 方法描述时钟频率法通过计算机的时钟频率来评估性能&#xff0c;时钟频率越高&#x…

大话设计模式之状态模式

状态模式是一种行为设计模式&#xff0c;它允许对象在其内部状态发生变化时改变其行为。在状态模式中&#xff0c;对象将其行为委托给当前状态对象&#xff0c;从而在不同的状态下执行不同的行为&#xff0c;而不必在对象自身的代码中包含大量的条件语句。 通常&#xff0c;状…

Tensorboard使用教程

Pytorch(九) —— Tensorboard(当有了tensorboard日志文件怎么可视化它)(同时显示多个模型)(vscode的tensorboard)(TensorboardX)_tensorboard --logdir-CSDN博客文章浏览阅读9.7k次&#xff0c;点赞10次&#xff0c;收藏56次。tensorboard.pyfrom tensorboardX import Summary…

RuntimeError: Error compiling objects for extension虚拟环境和系统环境——添加、删除、修改环境变量

前言&#xff1a;因为一个报错RuntimeError: Error compiling objects for extension 没有配置cl.exe环境变量&#xff0c;我的应用场景是需要搞定虚拟环境变量配置 RuntimeError: Error compiling objects for extension手把手带你解决&#xff08;超详细&#xff09;-CSDN博…

爬虫 红网时刻 获取当月指定关键词新闻 并存储到CSV文件

目标网站&#xff1a;红网 爬取目的&#xff1a;为了获取某一地区更全面的在红网已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#xff0c;Python3.10&#xff0c; 安装的包&#xff1a;requests&#xff0c;csv&#xff0c;bs4&…

如何在pgAdmin中用替换的值更新jsonb列?(二)

上一篇提到怎么替换jsonb&#xff0c;链接如下&#xff1a; 如何在pgAdmin中用替换的值更新jsonb列&#xff1f;-CSDN博客 那么当jsonb嵌套jsonb应该怎么替换呢&#xff1f;像这样&#xff0c;类型依然是jsonb&#xff0c;只不过嵌套一层&#xff0c;JsonData&#xff1a;&qu…

网络安全 | 什么是DDoS攻击?

关注WX&#xff1a;CodingTechWork DDoS-介绍 DoS&#xff1a;Denial of Service&#xff0c;拒绝服务。DDoS是通过大规模的网络流量使得正常流量不能访问受害者目标&#xff0c;是一种压垮性的网络攻击&#xff0c;而不是一种入侵手段。NTP网络时间协议&#xff0c;设备需要…

Springboot整合Milvus向量库

1. Milvus的Maven依赖&#xff0c; 配置如下 <dependency><groupId>io.milvus</groupId><artifactId>milvus-sdk-java</artifactId><version>2.3.4</version><exclusions><exclusion><artifactId>log4j-slf4j-imp…

百度语音识别

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、建号—获取试用KEY二、测试代码三、运行四、运行结果五、验证五、总结 一、建号—获取试用KEY https://console.bce.baidu.com/ai/#/ai/speech/overview/index…

记一次Cannot deploy POJO class [xxx$$EnhancerBySpringCGLIB$$xxx]的错误

最近项目上需要使用websocket做服务端&#xff0c;那好说啊&#xff0c;直接springboot集成的websocket 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><versi…

赛氪网在长沙宣布启动“徽文化外宣翻译大赛”

2024年3月30日下午&#xff0c;在美丽的星城长沙&#xff0c;赛氪网作为承办方&#xff0c;在中国翻译协会年会期间成功举办了备受瞩目的“AI科技时代竞赛与就业分论坛”。此次论坛汇聚了众多翻译界、科技界和教育界的专家学者&#xff0c;共同就科技、实践、就业与竞赛人才培养…

使用C++调用讯飞星火API的详细指南

正文&#xff1a; 科大讯飞是中国领先的人工智能公司&#xff0c;其讯飞星火API为开发者提供了丰富的接口和服务&#xff0c;支持各种语音和语言技术的应用。下面是使用C接入讯飞星火API的步骤和代码示例。 步骤一&#xff1a;注册账号并创建应用 首先&#xff0c;您需要访问科…

蓝色wordpress外贸建站模板

蓝色wordpress外贸建站模板 https://www.mymoban.com/wordpress/7.html

保护你的 Java 代码:深入了解代码混淆

在当今数字化时代&#xff0c;软件开发领域竞争激烈&#xff0c;而保护你的代码免受恶意攻击和盗用是至关重要的。代码混淆是一种常用的技术&#xff0c;用于增加攻击者分析和逆向工程代码的难度&#xff0c;从而提高代码的安全性。本文将介绍代码混淆的基本概念和详细办法&…

element-ui badge 组件源码分享

今日简单分享 badge 组件的源码实现&#xff0c;主要从以下两个方面&#xff1a; 1、badge 组件页面结构 2、badge 组件属性 一、badge 组件页面结构 二、badge 组件属性 补充几个标签的用途&#xff1a; sub&#xff1a;下标、sup&#xff1a;上标、var 变量 代码如下&am…