HarmonyOS鸿蒙应用开发——ArkTS的“内置组件 + 样式 + 循环和条件渲染”

一、内置组件是咩?

学过前端的都知道,一个组件就是由多个组件组成的,一个组件也可以是多个小组件组成的,组件就是一些什么导航栏、底部、按钮......啥的,但是组件分为【自定义组件】跟【内置组件】

【自定义组件】就是我们想要一个什么样的一块元素,就用一堆内置组件通过我们自己设置属性啥的,组合成一个【自定义组件】。

【内置组件】就是ArkTS原本就有的组件:图片、按钮、行元素、块元素、视频、音频.....

二、内置组件的简单写法

组件名( )

有的组件需要往“( )”里带参数,比如图片组件要带“路径参数”;有的就不用,但是不用参数也必须带上“( )”

然后如果要调整它的样式,就在【组件名( )】后.属性1( 值 ).属性2( 值 )......但是注意,有些属性是所有组件通用的,有些是各个组件自己特有的

例子:

三、各个内置组件

1、图片

图片组件【Image( )】,只需要往( )里传入图片路径即可用,但是有三种图片路径参数形式:

这里提示一下

我们的图片一般就放在【resources】目录下的【base.media】或【rawfile】

 $r() 一般对应【base.media】的图片,当然也可以是别的目录,写的时候就是【app.别的目录.图片名】

 $rawfile() 则是对应【rawfile】的图片,这个目录就不能改了,要真的用到【rawfile】里有的图片

示例:

第一种网络图片路径例子

但其实只是在这个模拟运行器里可以显示这个网络地址的图片,要是在真的模拟器或者手机上,就会显示不出来,这是因为没有申请网络访问权限

怎么申请网络访问权限?

官方文档:文档中心

找到在module.json5配置文件,在module下面复制这块配置代码(要了解为什么这么配置以后再说)

"requestPermissions": [{"name": "ohos.permission.INTERNET"}
],

第二种少用,就不演示了;

第三种本地路径的例子:

然后我们会发现有时候图片放大会有矩尺模糊、不好看,就需要用到图片组件的一个【特有属性】:.interpolation( )

当然如果我们记不住这么多属性,可以查看鸿蒙的内置API文档

点击【Help】——>点击【API Reference】就出来了API文档

然后搜索组件名,点到【ArkTS】就能看到属性详情

看外边框能看出一点差别

2、文字

文字组件【Text( )】

然后这里先提一下【resouces】这个目录的文件结构

【base】可以理解为一个默认基础陌路

下面的【en_US(英文)】【zh_CN(中文)】就是限定词目录,根据我们有什么限定词目录,将来翻译一些文本文件时,就可以找到对应的限定词目录的json文件的对应的内容

然后【限定词目录】的string.json文件里有的变量,在【base】也必须要有

第一种静态文字例子:

第二种根据本地源文件的变量显示的文字例子:

那我们刚刚设置了MyName这个变量的英文版,怎么看英文版?看下图

3、输入框

输入框组件【TextInput】

其中.type()属性有以下属性值

(注意,这些属性只是输入的【约束】,而非【校验】,校验需要我们自己手动)

名称描述
InputType.Normal基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
InputType.Password密码输入模式。支持输入数字、字母、下划线、空格、特殊字符
InputType.Email邮箱地址输入模式。支持数字,字母,下划线,以及@字符
InputType.Number纯数字输入模式
InputType.PhoneNumber电话号码输入模式。支持输入数字、+、-、*、#     长度不限

例子:

然后我们来做一个案例,用输入框输入的不同数字,当成一个变量,这个变量根据输入的数字来动态改变,同时还作为图片的宽度来控制图片大小

那么我们首先第一步:挂载、声明当前页面的这个变量

第二步:在用的地方 this.变量 就行了

看到这里,老铁们是不是觉得很熟悉,跟vue的data差不多

然后注意这里有个报错:输入的是一个string类型,不能让number类型的这个变量接收。可是我明明输入框的类型是数字啊

这是因为输入框其实一个“ 文本框 ”,即使输入的是数字,也只是字符串类型的数字,所以要把输入的 “ 字符串数字 ”转化成 “ 真数字 ” ,方法跟java的字符串转数字差不多【parseInt(字符串)】

还有,数字转字符串是 .toFix() ,括号里的参数值是保留的小数点位,0就是没有小数

4、按钮

按钮组件【Button】

其中.type( ) 有一下几种值

名称描述
ButtonType.Capsule胶囊型按钮(圆角默认为高度的一半)
ButtonType.Circle圆形按钮
ButtonType.Normal普通按钮(默认不带圆角)

过于简单,直接看代码演示吧:

5、滑动条组件

这个玩意我们学HTML的时候就没有了,ArkTS特有的滑动条组件【Slider()】

示例:

注意一点,粗细不是靠高度来调的

完整的

8、行容器跟列容器

这个更简单,记住了【Column列容器】从上往下纵向排元素,【Row行容器】从左往右横向排元素

用HTML理解:【Column】=【div】,【Row】=【block】

用uniapp理解:【Column】=【view】,【Row】=【text】

然后调整这两个容器的布局通过下面这些属性:

这一看,老铁们熟悉得不能再熟悉了,对,就是CSS里面的【Flex弹性布局】啊!

就是有一点不同,主轴的属性值要FlexAlign.排列值(center、SpaceBetween、SpaceEvenly......)

然后交叉轴Column容器HorizontaAlign.排列值,Row容器VerticalAlign.排列值

【Column容器的主轴方向排列参数】

【Column容器的交叉轴方向排列参数】

【Row容器的主轴方向排列参数】

【Row容器的交叉轴方向排列参数】

示例:

这里强调一点!!!!!!

想要这些排列值生效必须必须必须!!!把要排列的方向设置好宽或者高

比如我希望一个Row容器里的元素自左往右均匀排列,那么我首先必须设置主轴的长度,也就是宽度!!这样才能根据宽度这个值来做参照,自动横向排列;

我希望一个Column容器里的元素自上往下均匀排列,我就要先设置好高,这样才能根据高度值做参照,自动纵向排列。

总结

四、样式

这个ArkTS的样式真是不想吐槽,对于我这种习惯了css、less、Vue......语法的人来说,真的麻烦得要死,大致上有些语法还是能用,但是还是有很多地方不一样:

像素单位

相信各位注意到了,我前面那么多例子里,没有出现过【px】、【vh】、【rpx】、【upx】这些常见单位

在ArkTS语法里,像素单位不需要写了,“组件()”这里取而代之的单位有两种形式:

  - 要么直接填数值

.height(100)

  - 要么填百分比,但是百分比形式必须要是字符串形式

.width('100%')

外边距、内边距

1、直接设置4个边的外边距的话,跟css一样直接写一个值就好

//内边距
.padding(20)//外边距
.margin(20)

2、如果你只要设置一边的有边距,在css的写法是:margin-top: ...padding-left: ...、......

或者:margin:  上值 左值 下值 右值padding: 上值 左值 下值 右值......

但是在ArkTS的写法是往【.margin( )】传入个对象参数,要哪个方向的边距就在对象设置:{ 方向1:值 , 方向2:值 , ...... }

//左右有内边距
.padding({ left: 10 , right: 10 })//上边有外边距
.margin({ top: 10 })

边框

css的写法贼鸡儿简单:

四边都有边框的话就是:border: 粗细  类型(虚线、实现...)  颜色

只要一边有边框就是:border-left: 粗细  类型(虚线、实现...)  颜色、border-top: 粗细  类型(虚线、实现...)  颜色 ......

但是ArkTS贼麻烦,记住了:

1、四边都有边框的话,颜色、粗细、类型啥的都有对应的属性名:

.borderWidth(1)                    //粗细
.borderColor('#afefef')            //颜色
.borderStyle(BorderStyle.Solid)    //线类型

当然也可以通过传对象的方式,把这些值全都放到一个对象传给【border( )

.border({style: BorderStyle.Solid, width: 1,color: Color.Gray })

2、只要一个边的话,按各个属性名的方式写的话,每个属性里都传一个对象参数,对象里是对应的方向

.borderWidth({ bottom: 1 })
.borderColor({ bottom: '#afefef' })
.borderStyle({ bottom: BorderStyle.Solid })

或者按第二种传对象的方式,每个对象的值还是对象

.border({style: { bottom: BorderStyle.Solid }, width: { bottom: 1 },color: { bottom: Color.Gray }
})

3、然后圆角的话也是,四个角都是圆角的话就直接写一个值

.borderRadius(20)

如果是只要单独某几个角,而不是四个角,还是传对象值

.borderRadius({ topLeft: 20,topRight: 20,bottomLeft: 20,bottomRight: 20
})

然后圆角的值也可以作为对象值,直接传入【border( )

属性值

还有,注意一些属性值,跟我们css理解的属性值不一样,比如:

颜色,单词类型的不是:blueblackwhiteyellow......,而是Color.BlueColor.BlackColor.WhiteColor.Yellow......

边框的线的类型不是: soliddotteddashed,而是BorderStyle.SolidBorderStyle.DottedBorderStyle.Dashed

主轴排列justifyContent也不是:centerstartendspaceBetweenspaceAroundspaceEvenly,而是FlexAlign.Center FlexAlign.StartFlexAlign.EndFlexAlign.SpaceBetweenFlexAlign.SpaceAroundFlexAlign.SpaceEvenly

这里只说常见的,还有很多我就不一一列举了,以后用到的时候翻阅文档就知道了

五、循环

也很简单,就是Vue里面的v-for,只不过Vue是在<标签>里用v-for绑定数组名,它这个直接用ForEach()循环包住整个要循环的元素,也没问题,转换一下思维就好理解了

然后呢这玩意其实就是v-key

做个简单示例:

首先定义一个简单类

然后定义一个成员都是这个“ Item ”对象的数组

接下来直接循环它

有点难看,我们再调整一下样式,根据前面学的【Column】、【Row】,我们把 “ 图片 ” 和 “ 文字 ” 放到一个【Row容器】里左右排列,然后把文字部分的 “ item.name手机名字 ” 和  “ item.price手机价格 ” 放到一个【Column容器】里上下排列,然后再加点背景颜色、边框、外边距啥的,就nice了

但是还有问题!其实我们的元素是在整个页面居中排列的,现在是因为数组的成员多才撑到了顶

我们去掉几个元素,就会发现它是居中排列的

可是咱们要的是从页面顶部自上往下排列啊,那就要设置整个包住中间这些元素的Column容器,沿着主轴方向从开头排列【FlexAlign.Start】

用List()跟ListItem组件让页面可滑动

还没完......我们发现写完这个案例,没办法拖动屏幕看下面挡住的内容

就要加一个【List( )】这个组件包住【循环】,【List()】这个组件就是把这一块作为可滑动的区域。然后这个【List( )】里面必须必须必须包含有一个【ListItem( )】组件,这两组件暂时了解这么多够了

说白了【List( )】就是代替【Column容器】

完整样例代码:

//ArkTS的类的定义方法
class Item {//定义变量成员name: stringimgUrl: stringprice: numberdiscount: number//构造函数//换成java的写法:public Item(String name,String imgUrl,Int price)//discount: number = 0的意思是,可以不传这个参数,不传的话就默认是0constructor(name: string, imgUrl: string, price: number, discount: number = 0) {this.name = namethis.imgUrl = imgUrlthis.price = pricethis.discount = discount}
}
@Entry
@Component
struct Goods{private List: Array<Item> = [new Item('华为','https://gd-hbimg.huaban.com/a6d955ef4df395c734766c2ac56581123756c9c738a84-Jy0kKX_fw480webp',6999,500),new Item('苹果','https://gd-hbimg.huaban.com/6b9a7c00dc59e3d60aad6d714556414597ba8a1889ad8d-ECDC3P_fw480webp',7900),new Item('黄金手机','https://gd-hbimg.huaban.com/4569250f8d17c98d95a22914a2ca3a2e6edbb64b53233-J8uXwa_fw480webp',10000),new Item('小米','https://gd-hbimg.huaban.com/49626e33a18e743dd935d21f80c503917e14a4c612f5c-3wjWTv_fw480webp',2000),new Item('黑莓','https://gd-hbimg.huaban.com/cfa621505f7b96b05f66851639bf6c0b941f0e3e2c24e-b4Y08n_fw480webp',3450),new Item('诺基亚','https://gd-hbimg.huaban.com/dbce23ae86918485a72c3b568d2827e1fa77087cddca-UJdsZc_fw480webp',6000)]build() {Column({space: 20}) {Text('岑梓铭黑心手机店').width('100%').height(40).fontSize(34).fontWeight(500).margin({top: 20,left: 70})List({ space: 10 }){ForEach(this.List,(item:Item , index:Number) => {ListItem(){Row({space: 30}){Image(item.imgUrl).height(120).width(80).margin({left: 30})Column(){Text(item.name).fontSize(28)Text('$ '+item.price.toFixed(0)).fontSize(23).fontColor(Color.Red)}.height(130).justifyContent(FlexAlign.SpaceEvenly)}}.backgroundColor("#efefef").width('90%').borderRadius(20).borderWidth(1).borderColor('#afefef').borderStyle(BorderStyle.Solid).borderRadius(20).border({style: BorderStyle.Solid,width: 1,color: Color.Gray,radius: 20})})}.width('100%')//List按比例配高度,不写它的情况下就默认是0,那就默认自己配多高height就是多高//如果是1,那么就按比例,上面的元素是0,那么下面所有的高度都属于这个配了.layoutWeight(1)的元素.layoutWeight(1).alignListItem(ListItemAlign.Center)}.width('100%')//【第一】要想以Column的纵向排列,就必须设置高度,这样才能根据高度来排列.height('100%')//【第二】然后现在就可以根据Column的主轴的纵向,通过FlexAlign.Start从上往下排列了.justifyContent(FlexAlign.Start).backgroundColor('#afafaf')}
}

六、条件渲染

vue里的条件渲染是在<标签元素>里绑定 【v-if】、【v-else】、【v-show】

而ArkTS这里是直接在循环里写if-else,比较符合普通的编程语言的条件判断

那么我们在上面的案例增加一个条件渲染:当有折扣的时候,显示折扣,没有就照常按原样显示

修改后的完整代码:

//ArkTS的类的定义方法
class Item {//定义变量成员name: stringimgUrl: stringprice: numberdiscount: number//构造函数//换成java的写法:public Item(String name,String imgUrl,Int price)//discount: number = 0的意思是,可以不传这个参数,不传的话就默认是0constructor(name: string, imgUrl: string, price: number, discount: number = 0) {this.name = namethis.imgUrl = imgUrlthis.price = pricethis.discount = discount}
}
@Entry
@Component
struct Goods{private List: Array<Item> = [new Item('华为','https://gd-hbimg.huaban.com/a6d955ef4df395c734766c2ac56581123756c9c738a84-Jy0kKX_fw480webp',6999,500),new Item('苹果','https://gd-hbimg.huaban.com/6b9a7c00dc59e3d60aad6d714556414597ba8a1889ad8d-ECDC3P_fw480webp',7900),new Item('黄金手机','https://gd-hbimg.huaban.com/4569250f8d17c98d95a22914a2ca3a2e6edbb64b53233-J8uXwa_fw480webp',10000),new Item('小米','https://gd-hbimg.huaban.com/49626e33a18e743dd935d21f80c503917e14a4c612f5c-3wjWTv_fw480webp',2000),new Item('黑莓','https://gd-hbimg.huaban.com/cfa621505f7b96b05f66851639bf6c0b941f0e3e2c24e-b4Y08n_fw480webp',3450),new Item('诺基亚','https://gd-hbimg.huaban.com/dbce23ae86918485a72c3b568d2827e1fa77087cddca-UJdsZc_fw480webp',6000)]build() {Column({space: 20}) {Text('岑梓铭黑心手机店').width('100%').height(40).fontSize(34).fontWeight(500).margin({top: 20,left: 70})List({ space: 10 }){ForEach(this.List,(item:Item , index:Number) => {ListItem(){Row({space: 30}){Image(item.imgUrl).height(120).width(80).margin({left: 30})Column(){//当有discount这个成员时,显示折扣价这些if( item.discount ){Text(item.name).fontSize(28)Text('原价:$ ' + item.price.toFixed(0)).fontSize(19).fontColor(Color.Gray)//这是添加删除横线,TextDecorationType还有下划线、去掉线.......decoration({type: TextDecorationType.LineThrough})Text('折扣价:$ ' + (item.price - item.discount).toFixed(0)).fontSize(23).fontColor(Color.Red)Text('补贴:$ ' + item.discount.toFixed(0)).fontSize(20)}else{Text(item.name).fontSize(28)Text('$ '+item.price.toFixed(0)).fontSize(23).fontColor(Color.Red)}}.height(130).justifyContent(FlexAlign.SpaceEvenly)}}.backgroundColor("#efefef").width('90%').borderRadius(20).borderWidth(1).borderColor('#afefef').borderStyle(BorderStyle.Solid).borderRadius(20).border({style: BorderStyle.Solid,width: 1,color: Color.Gray,radius: 20})})}.width('100%')//List按比例配高度,不写它的情况下就默认是0,那就默认自己配多高height就是多高//如果是1,那么就按比例,上面的元素是0,那么下面所有的高度都属于这个配了.layoutWeight(1)的元素.layoutWeight(1).alignListItem(ListItemAlign.Center)}.width('100%')//【第一】要想以Column的纵向排列,就必须设置高度,这样才能根据高度来排列.height('100%')//【第二】然后现在就可以根据Column的主轴的纵向,通过FlexAlign.Start从上往下排列了.justifyContent(FlexAlign.Start).backgroundColor('#afafaf')}
}

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

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

相关文章

java继承使用细节二

构造器 主类是无参构造器时会默认调用 public graduate() {// TODO Auto-generated constructor stub也就是说我这里要用构造器会直接调用父类。它是默认看不到的 &#xff0c;System.out.println("graduate");} 但当主类是有参构造器如 public father_(int s,doubl…

K8S集群中Yaml文件详解

目录 一、Yaml概述 二、Yaml基本语法 三、Yaml数据结构 四、K8S资源清单描述方法 五、api资源版本标签 六、Yaml文件示例详解 1.deployment.yaml文件详解 2.Pod yaml文件详解 3.Service yaml文件详解 七、Yaml文件相关操作 1.试运行 2.生成yaml格式 3.生成json格式…

超大Sql文件切分工具SQLDumpSplitter —— 筑梦之路

官网&#xff1a;PLB PLB - SQLSplitter 用于将大型MySQL转储拆分为可独立执行的小型SQL文件。 显示100%时并不是已经处理完了&#xff0c;而是才开始 优点 软件程序小巧&#xff0c;不需要安装&#xff0c;直接点击运行就可以最厉害的是SQLDumpSplitter可以自动将结构语句&…

JVM学习-执行引擎

执行引擎 执行引擎是Java虚拟机核心组成部分之一虚拟机是一个相对于物理机的概念&#xff0c;这两种机器都有代码执行能力&#xff0c;其区别是物理机的执行引擎是直接建立在处理器、缓存、指令集和操作系统层面上的&#xff0c;而虚拟机的执行引擎是由软件自行实现的&#xf…

近临算法(个人总结版)

背景 近邻算法&#xff08;Nearest Neighbor Algorithm&#xff09;是一种基本但非常有效的分类和回归方法。最早由Fix和Hodges在1951年提出&#xff0c;经过几十年的发展和改进&#xff0c;已成为数据挖掘、模式识别和机器学习领域的重要工具。近邻算法基于相似性原则&#x…

vue源码2

vue之mustache库的机理其实是将模板字符串转化为tokens 然后再将 tokens 转化为 dom字符串&#xff0c;如下图 对于一般的将模板字符串转化为dom字符串&#xff0c;这样不能实现复杂的功能 let data {name:小王,age:18 } let templateStr <h1>我叫{{name}},我今年{{ag…

git分支常用命令

最近在用git提交代码的时候&#xff0c;发现有些命令不是很会&#xff0c;先记录几个常用分支命令&#xff0c;后续再补充&#xff0c;在执行git push命令提交代码的时候遇到报错&#xff0c;一并记录下。 1.git常用命令 新建分支&#xff1a; git branch <分支名称> 比…

2025第十届美陈展

展位又遭疯抢&#xff01;2025第十届美陈展释放“无界之美” 美是全球通用的语言&#xff0c;人类对美的追求始终如一&#xff0c;大众审美在经历了时代的变迁后开始趋同&#xff0c;东方文明深处的美学经济开始崛起。 在如今商业迈入存量阶段&#xff0c;以品牌为突破口打造…

Ai自动贴图直播项目的趋势,智享自动直播GMV增加工具

在当今社会&#xff0c;直播行业正在悄然地改变着人们的生活方式。无论是在闲暇时光中放松身心&#xff0c;还是在临睡前享受休闲娱乐&#xff0c;观众们越来越习惯于通过刷短视频或者观看直播来消遣自己。根据统计数据显示&#xff0c;到2023年全球将有超过10.74亿网民&#x…

前端日志收集(monitor-report v1)

为什么 为什么自己封装而不是使用三方 类似 Sentry 这种比较全面的 因为 Sentry 很大我没安装成功&#xff0c;所有才自己去封装的 为什么使用 可以帮助你简单解决前端收集错误日志、收集当前页面访问量&#xff0c;网站日活跃&#xff0c;页面访问次数&#xff0c;用户行…

海外仓储管理系统:提升效率,标准化海外仓管理,科技赋能业务

海外仓作为跨境物流的关键一环&#xff0c;完全可以说海外仓的效率直接决定了后续物流的整体运作效率。 对于海外仓而言&#xff0c;一套高效&#xff0c;易用的海外仓储系统&#xff0c;无疑将成为提升企业竞争力的重要工具&#xff0c;帮助海外仓实现从野蛮生长到标准化管理…

pytorch-13_2 模型结构选择策略:层数、激活函数、神经元个数

一、拟合度概念 在所有的模型优化问题中&#xff0c;最基础的也是最核心的问题&#xff0c;就是关于模型拟合程度的探讨与优化。根据此前的讨论&#xff0c;模型如果能很好的捕捉总体规律&#xff0c;就能够有较好的未知数据的预测效果。但限制模型捕捉总体规律的原因主要有两点…

02_前端三大件HTML

文章目录 HTML用于网页结构搭建1. 标签2. 客户端服务器交互流程3. 专业词汇4. html语法细节5. 安装VSCODE安装插件6. Live Server插件使用7. 标题&段落&换行&列表8. 超链接标签使用9. 图片10. 表格的写法11. 表单标签*(重点)12. 下拉框13. 页面布局标签14. 块元素和…

java —— 封装、继承、接口和多态

一、封装 封装是将数据和操作这些数据的方法整合成一个类。在这个类中&#xff0c;用 private 修饰符将某些数据隐藏起来&#xff0c;只通过特定的方法实现这些数据的访问和修改&#xff0c;以此实现数据的完整和安全性。 封装的步骤&#xff1a; 二、继承 继承是指把子类共有…

韵搜坊 -- Elastic Stack快速入门

文章目录 现有问题Elastic Stack介绍&#xff08;一套技术栈&#xff09;安装ES安装KibanaElasticsearch概念倒排索引Mapping分词器IK分词器&#xff08;ES插件&#xff09;打分机制 ES的几种调用方式restful api调用&#xff08;http 请求&#xff09;kibana devtools客户端调…

Creating Server TCP listening socket *:6379: listen: Unknown error

错误&#xff1a; 解决方法&#xff1a; 在redis安装路径中打开cmd命令行窗口&#xff0c;输入 E:\Redis-x64-3.2.100>redis-server ./redis.windows.conf结果&#xff1a;

Jenkins 构建 Web 项目:构建服务器和部署服务器分离的情况

构建命令 #!/bin/bash node -v pnpm -v pnpm install pnpm build:prod # 将dist打包成dist.zip zip -r dist.zip dist

微软密谋超级AI大模型!LangChain带你轻松玩转大模型开发

此前&#xff0c;据相关媒体报道&#xff0c;微软正在研发一款名为MAI-1的最新AI大模型&#xff0c;其参数规模或将达5000亿以上&#xff0c;远超此前微软推出的相关开源模型&#xff0c;其性能或能与谷歌的Gemini 1.5、Anthropic的Claude 3和OpenAI的GPT-4等知名大模型相匹敌。…

Android 自定义图片进度条

用系统的Progressbar&#xff0c;设置图片drawable作为进度条会出现图片长度不好控制&#xff0c;容易被截断&#xff0c;或者变形的问题。而我有个需求&#xff0c;使用图片背景&#xff0c;和图片进度&#xff0c;而且在进度条头部有个闪光点效果。 如下图&#xff1a; 找了…

深入探索:移动云服务器的强大之处

文章目录 一 什么是移动云二 移动云服务器的使用三 移动云服务器的优点四 在移动云上部署node.js项目五 移动云服务器的应用场景六 移动云服务器的使用体验总结 一 什么是移动云 移动云是指用户可以通过移动设备访问云端的数据和应用&#xff0c;无需在本地设备上进行存储和处…