鸿蒙ARKTS--简易的购物网站

已于 2024-03-30 20:23:47 修改
阅读量1.4k 收藏 17
点赞数 5
分类专栏： 鸿蒙 文章标签： 鸿蒙 ArKTS语言
于 2024-03-30 19:51:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64304713/article/details/137126392
版权

目录

一、media

二、string.json文件

三、pages

3.1 登录页面：gouwuPage.ets

3.2 PageResource.ets

3.3 商品页面：shangpinPage.ets 

3.4 我的页面：wodePage.ets

3.5 注册页面：zhucePage.ets

3. 购物网站主页面：gwPage.ets

一、media

图片位置：entry > src > main > resources > base > media

百度网盘链接：https://pan.baidu.com/s/1JZn-U5Sqk6hOSHKz6D_98Q 
提取码：bosg

二、string.json文件

以下三个文件均需要添加。

{
  "string": [
    {
      "name": "mylove",
      "value": "我的最爱"
    },
    {
      "name": "historyrecord",
      "value": "历史记录"
    },
    {
      "name": "message",
      "value": "消息"
    },
    {
      "name": "shoppingcart",
      "value": "购物栏"
    },
    {
      "name": "mygoal",
      "value": "我的目标"
    },
    {
      "name": "group",
      "value": "圈子"
    },
    {
      "name": "favorites",
      "value": "收藏"
    },
    {
      "name": "recylebin",
      "value": "回收站"
    },
    {
      "name": "yifu",
      "value": "衣服"
    },
    {
      "name": "yan",
      "value": "烟"
    },
    {
      "name": "jiu",
      "value": "酒"
    },
    {
      "name": "huazhuangpin",
      "value": "化妆品"
    },
    {
      "name": "xie",
      "value": "鞋"
    },
    {
      "name": "daifukuan",
      "value": "待付款"
    },
    {
      "name": "daifahuo",
      "value": "待发货"
    },
    {
      "name": "daishouhuo",
      "value": "待收货"
    },
    {
      "name": "daipinjia",
      "value": "待评价"
    }
  ]
}

三、pages

3.1 登录页面：gouwuPage.ets

import router from '@ohos.router'
import prompt from '@ohos.promptAction';
@Entry
@Component
struct GouwuPage{
  //定义SwiperController类型的变量
  private controller: SwiperController =new SwiperController()
  private intervalID=0
  private startPlay(swiper:SwiperController){
    this.intervalID=setInterval(function (){
      swiper.showNext()
    },3000)
  }
aboutToAppear() {
  this.startPlay(this.controller)
}

  @State zhanghao:string|number =''
  @State mima:string|number =''
  @State show:boolean=false
  private timeOut:number=-1


  //登录方法
  login():void {
    if (this.zhanghao == '' || this.mima == '') {
      prompt.showToast({
        message: '账号密码不能为空'
      })

    } else {
      AlertDialog.show({
        message:'loading.....'
      })
      this.show = true
      if (this.timeOut = -1) {
        this.timeOut = setTimeout(() => {
          this.show = false
          this.timeOut = -1
          router.pushUrl({
            url: 'pages/gwPage'
          })
        },2000)
      }
    }
  }



  build() {
    Row() {
      Column({space:15}) {
        Swiper(this.controller){
          Image($r('app.media.img1'))
          Image($r('app.media.img2'))
          Image($r('app.media.img3'))
        }
        .width('100%')
        .height(150)
        //默认显示第一页
        .index(0)
        .indicator(true)


        Image($r("app.media.gw"))
          .height(125)
          .width(300)
          .borderRadius(15)

        Text("欢迎登录")
          .fontSize(25)
          .fontColor("#696969")

        TextInput({ placeholder:"账号"})
          .width(400)
          .height(50)
          .margin(10)
          .borderRadius(10)
          .type(InputType.Normal)
          .onChange(value =>{
            this.zhanghao = value;})

        TextInput({ placeholder:"密码"})
          .width(400)
          .height(50)
          .margin(10)
          .borderRadius(10)
          .type(InputType.Password)
          .onChange(value =>{
            this.mima = value;})

        Text('还没有账号？去注册')
          .fontSize(18)
          .fontColor('#1296db')
          .decoration({ type: TextDecorationType.Underline, color:('#1296db') })
          .textAlign(TextAlign.Start)
          .onClick(()=>{
                router.pushUrl({
                    url:"pages/zhucePage"
                })
          })
        Row() {
          Button('登录', { type: ButtonType.Capsule })
            .backgroundColor('#1296db')
            .width(200)
            .height(55)
            .fontSize(30)
            .margin(30)
            .borderRadius(30)
            .onClick(() => {
              //处理单机事件
              this.login()

            })

          if (this.show) {
            // 加载组件
            LoadingProgress()
              .color(Color.Blue)
              .height(50)
              .width(50)
          }
        }

      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .padding({left:20,right:20,top:10})
    }
    .width('100%')
    .height('105%')
    .backgroundImage($r('app.media.beijing'))
    .backgroundImageSize(ImageSize.Cover)
  }

}

 

3.2 PageResource.ets

export default class PageResource {
  title:Resource;
  img:Resource;
  others?:Resource;

  constructor(title:Resource,img:Resource,others?:Resource) {
    this.title=title
    this.img=img
    this.others=others
  }
}

3.3 商品页面：shangpinPage.ets 

import itemData from './PageResource'


@Entry
@Component
export default  struct ShangpinPage {

  private swiperController:SwiperController =new SwiperController()
  //商品图片类型
  getSwiperImages():Array<Resource>{
    let swiperImages:Resource[]=[
    $r('app.media.img1'),
    $r('app.media.img2'),
    $r('app.media.img3')
    ]

    return swiperImages;
  }

  //获取第一部分商品分类数据
  getFirstData():Array<itemData>{
    let firstData:itemData[]=[
      new itemData($r('app.string.mylove'), $r('app.media.love')),
      new itemData($r('app.string.historyrecord'), $r('app.media.record')),
      new itemData($r('app.string.message'), $r('app.media.message')),
      new itemData($r('app.string.shoppingcart'), $r('app.media.shopping')),
      new itemData($r('app.string.mygoal'), $r('app.media.target')),
      new itemData($r('app.string.group'), $r('app.media.circle')),
      new itemData($r('app.string.favorites'), $r('app.media.favorite')),
      new itemData($r('app.string.recylebin'), $r('app.media.recycle'))
    ]
    return firstData;
  }

  //获取的人部分商品列表展示
  getSecondGridData(): Array<itemData> {
    let secondGridData: itemData[] = [
      new itemData($r('app.string.yifu'), $r('app.media.yifu'), $r('app.media.img3')),
      new itemData($r('app.string.yan'), $r('app.media.yan'), $r('app.media.img3')),
      new itemData($r('app.string.jiu'), $r('app.media.jiu'), $r('app.media.img3')),
      new itemData($r('app.string.huazhuangpin'), $r('app.media.hauzhuangpin'), $r('app.media.img3')),
      new itemData($r('app.string.xie'), $r('app.media.xie'), $r('app.media.img3'))

    ];
    return secondGridData;


  }

  build() {
    Scroll(){
      Column({space:12}){
        Column(){
          Row({space:6}) {
            Image($r("app.media.tubiao"))
              .width(50)
              .height(50)

            Text('首页')
              .fontSize('24fp')
              .fontWeight(FontWeight.Bold)
              .margin({ top: '12vp' })
              .padding({ left: '12vp' })
            Image($r("app.media.search"))
              .width(40)
              .height(40)
              .margin({left:160})
          }

        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        //轮播图
        Swiper(this.swiperController){
          ForEach(this.getSwiperImages(),(img:Resource)=>{
            Image(img).borderRadius('16vp')
          },(img:Resource)=>JSON.stringify(img.id))
        }
        .autoPlay(true)
        .margin({ top: '1vp' })

        // 第一部分 商品分类
        Grid() {
          ForEach(this.getFirstData(), (item: itemData) => {
            GridItem() {
              Column() {
                Image(item.img)
                  .width('32vh')
                  .height('32vh')
                Text(item.title)
                  .fontSize('12fp')
                  .margin({ top: '4vh' })
                  .fontWeight(FontWeight.Bold)
              }
            }
          }, (item: itemData) => JSON.stringify(item))
        }
        .columnsTemplate('1fr 1fr  1fr  1fr')
        .rowsTemplate('1fr 1fr')
        .columnsGap('8vp')
        .rowsGap('12vp')
        .padding({ top: '12vp', bottom: '12vp' })
        .height('124vp')
        .borderRadius('24vp')

        Row({space:10}){
          Image($r('app.media.data'))
            .width(25)
            .height(33)

          Text("商品列表")
            .fontSize('20fp')
            .fontWeight(FontWeight.Bold)
            .width('100%')
            .margin({ top: '12vp' })
        }
        .margin({left:'15vp'})

        Grid() {
          ForEach(this.getSecondGridData(), (item: itemData) => {
            GridItem() {
              Column() {
                Image(item.img)
                  .width('124vh')
                  .height('124vh')
                Text(item.title)
                  .fontSize('18fp')
                  .margin({ top: '5vh' })
                  .fontWeight(FontWeight.Bold)
              }
            }
          }, (item: itemData) => JSON.stringify(item))
        }
        .columnsTemplate('1fr  1fr')
        .rowsTemplate('1fr 1fr 1fr')
        .columnsGap('12vp')
        .rowsGap('12vp')
        .padding({ top: '12vp', bottom: '12vp' })
        .height('550vp')
        .borderRadius('24vp')
      }
      .width('100%')

    }
  }
}

 

3.4 我的页面：wodePage.ets

import itemData from './PageResource'
import router from '@ohos.router'

@Entry
@Component
export default struct WodePage {

  @State value:number =3

  getFirstData(): Array<itemData> {
    let firstData: itemData[] = [
      new itemData($r('app.string.daifukuan'), $r('app.media.daifukuan')),
      new itemData($r('app.string.daifahuo'), $r('app.media.daifahuo')),
      new itemData($r('app.string.daishouhuo'), $r('app.media.daishouhuo')),
      new itemData($r('app.string.daipinjia'), $r('app.media.daipinjia'))
    ]
    return firstData;
  }

  build() {
    //   标题部分
    Column({space:12}) {
      Row() {
        Row({ space: 10 }) {
          Image($r('app.media.rentou'))
            .width(80)
            .height(80)
            .borderRadius(50)
          Text('用户ID：m0_64304713')
            .margin({ left: 5 })
            .fontColor('#010101')
        }
        .margin({ top: 20, left: 20 })
      }
      .width('100%')
      .height(180)
      .border({width:1})
      .backgroundColor("#ff8c8686")

      Row({ space: 8 }) {
        //余额及金钱所在row
        Row() {
          Text('余额:')
            .fontSize(16)
            .padding({left:20})

          Text('￥'+this.value)
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
        }
        .justifyContent(FlexAlign.Start)

        Button('提现')
          .margin({ right: 40 })
          .backgroundColor('#ff000000')
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            if(this.value<=0){
              AlertDialog.show({message:'余额不足,请充值'})
              this.value=0
            }else{
              AlertDialog.show({message:'提现成功'})
              this.value-=1
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      Column({ space: 20 }) {
        Row() {
          Text('我的订单')
            .fontSize(20)
            .onClick(() => {

            })
          Text('查看所有订单')
            .fontSize(18)
            .fontColor('#ffb3a8a8')
        }.width('100%')
        // .border({width:1,})
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ left: 20, right: 20 })


        Grid() {
          ForEach(this.getFirstData(), (item: itemData) => {
            GridItem() {
              Column() {
                Image(item.img)
                  .width('32vh')
                  .height('32vh')
                Text(item.title)
                  .fontSize('16fp')
                  .margin({ top: '4vh' })
              }
            }
          }, (item: itemData) => JSON.stringify(item))
        }
        .border({ width: 1, })

        .columnsTemplate('1fr 1fr  1fr  1fr')
        .rowsTemplate('1fr')
        .columnsGap('12vp')
        .rowsGap('12vp')
        .padding({ bottom: '18vp',top:'18vp' })
        .height('90vp')
        .borderRadius('24vp')

        Column(){
          Row({ space: 50 }) {
            Image($r('app.media.gwtuabiao'))
              .width(50)
              .height(50)
              .borderRadius('24vp')
            Text('去购物')
              .fontSize(18)
          }
          .width('90%')
          .backgroundColor("#789")
          .margin({  bottom: 20 })
          .padding({ left: 20, right: 20, top: 10, bottom: 10 })
          .borderRadius('16vp')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/gwPage',
            })
          })

          Row({ space: 50 }) {
            Image($r('app.media.chongzhi'))
              .width(50)
              .height(50)
              .borderRadius('24vp')
            Text('充值入口')
              .fontSize(18)
          }
          .width('90%')
          .backgroundColor("#789")
          .margin({ bottom: 20 })
          .padding({ left: 20, right: 20, top: 10, bottom: 10 })
          .borderRadius('16vp')
          .onClick(() => {
            AlertDialog.show({message:this.value.toString()})
          })

          Row({ space: 50 }) {
            Image($r('app.media.xiugai'))
              .width(50)
              .height(50)
              .borderRadius('24vp')
            Text('修改信息')
              .fontSize(18)
          }
          .width('90%')
          .backgroundColor("#789")
          .margin({ bottom: 20 })
          .padding({ left: 20, right: 20, top: 10, bottom: 10 })
          .borderRadius('16vp')

          Row({ space: 50 }) {
            Image($r('app.media.tuichu'))
              .width(50)
              .height(50)
              .borderRadius('20vp')
            Text('退出登录')
              .fontSize(18)
          }
          .width('90%')
          .backgroundColor("#789")
          .margin({ bottom: 20 })
          .padding({ left: 20, right: 20, top: 10, bottom: 10 })
          .borderRadius('16vp')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/gouwuPage',
            })
          })
        }.width('100%')
        .height('40%')
        // .border({width:1})


      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
      .height('100%')
    }
    .backgroundColor('#ffe1e7de')
  }

}

3.5 注册页面：zhucePage.ets

import router from '@ohos.router';
@Entry
@Component
struct ZhucePage {

  @State zhanghao:number|string = ''
@State mima1:number|string = ''
  @State mima2:number|string = ''
  @State mismessage:number|string = ''
  @State successmessage:number|string = ''

  build() {
    Row() {
      Column({space:18}) {

        Image($r('app.media.zhuce'))
          .width(300)
          .height(150)
          .margin({top:40})

        Column(){
          Text("新用户注册")
            .fontSize(25)
            .fontColor("#696969")
            .margin({top:20})

          TextInput({ placeholder:"账号"})
            .width(300)
            .height(50)
            .margin(10)
            .borderRadius(10)
            .type(InputType.Normal)
            .backgroundColor('#888')
            .onChange(value =>{
              this.zhanghao = value;})

           TextInput({ placeholder:"密码"})
            .width(300)
            .height(50)
            .margin(10)
            .borderRadius(10)
            .type(InputType.Password)
            .backgroundColor('#888')
             .onChange(value =>{
               this.mima1 = value;
               if(this.mima1!=this.mima2){
                 this.mismessage='密码不一致'
                 this.successmessage=''
               }else{
                 this.mismessage=''
                 if(this.mismessage==''&&this.successmessage==''){
                   this.successmessage='注册成功！'
                 }
               }
             })

          TextInput({ placeholder:"确认密码"})
            .width(300)
            .height(50)
            .margin(10)
            .borderRadius(10)
            .type(InputType.Password)
            .backgroundColor('#888')
            .onChange(value =>{
              this.mima2 = value;
              if(this.mima1!=this.mima2){
                this.mismessage='密码不一致'
                this.successmessage=''
              }else{
                this.mismessage=''
                if(this.mismessage==''&&this.successmessage==''){
                  this.successmessage='注册成功！'
                }
              }
            })
          if(this.mismessage){
            Text('两次密码不一致！')
              .fontSize(12)
              .fontColor("red")

          }

          Button('注册',{type:ButtonType.Capsule})
            .backgroundColor('#1296db')
            .width(200)
            .height(55)
            .fontSize(30)
            .margin(30)
            .borderRadius(30)
            .onClick(()=>{
              if(this.successmessage=="注册成功！" && this.zhanghao!=''){
                AlertDialog.show({message:this.successmessage,
                  primaryButton:{value:'去登录',action:()=>{
                    router.pushUrl({
                      url:"pages/gouwuPage",
                      /*params:{
                        src:"pages/zhucePage"
                      }*/
                    })
                  }}
                })
              }else
              {
                AlertDialog.show({message:'注册失败！'})
              }
            })

        }
          .border({
            width:6,
            color:0x000000,
            style:BorderStyle.Solid
          }

          )
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .height('100%')
    }
    .height('100%')
    .backgroundImage($r('app.media.beijing'))
    .backgroundImageSize(ImageSize.Cover)

  }
}

3. 购物网站主页面：gwPage.ets

import shangpinPage from './shangpinPage'
import wodePage from  './wodePage'
@Entry
@Component
struct   GwPage {
  @State currentIndex:number=0
  private TabsController:TabsController = new TabsController()

  @Builder TabBuilder(title:string,targetIndex:number,selectImg:Resource,normalImg:Resource) {
    Column(){
      Image(this.currentIndex ===targetIndex?selectImg:normalImg)
        .size({width:25,height:25})
      Text(title)
        .fontColor(this.currentIndex ===targetIndex?'#1698ce':'#6b6b6b')

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      this.currentIndex=targetIndex
      this.TabsController.changeIndex(this.currentIndex)
    })
  }


  build() {
    Tabs({barPosition:BarPosition.End,controller:this.TabsController}){
      TabContent(){
        shangpinPage()

      }
      .tabBar(this.TabBuilder('首页',0,$r('app.media.home_selected'),$r('app.media.home_normal')))

      TabContent(){
        wodePage()
        // Column().width('100%').height('100%').backgroundColor('#007dff')
      }
      .tabBar(this.TabBuilder('我的',1,$r('app.media.mine_selected'),$r('app.media.account')))


    }
    .barWidth('100%')
    .barHeight(50)
    .onChange((index:number)=>{
      this.currentIndex=index
    })
  }
}

    

Mortalz7
关注
专栏目录
鸿蒙开发已解决-arkts编译报错-arkts-limited-stdlib错误
一键难忘的博客
01-10 1399
在使用 Deveco Studio 4.0 beta2 开发应用时，报错。ERROR: ArkTS:ERROR File: D:/prRevivw/3792/applications_appsamgCSDNo”见台难忘Usage of standardlibrary is restricted (arkts-limited-stdlib)这是 ArkTS 新增的语法规则。
arkts编译报错-arkts-limited-stdlib错误【Bug已完美解决-鸿蒙开发】
一键难忘的博客
12-12 2806
在使用 Deveco Studio 4.0 beta2 开发应用时，报错。ERROR: ArkTS:ERROR File: D:/prRevivw/3792/applications_appsamgCSDNo”见台难忘Usage of standardlibrary is restricted (arkts-limited-stdlib)这是 ArkTS 新增的语法规则。
基于ark-ts的电商app的首页商品分类设计及部分商品展示
lzc20040506的博客
06-24 401
接上回我们完成了首页基础的轮播图以及搜索框的设计，接下来想到了作为电商平台app，一定要对商品进行很多的分类以及展示，基于这样的需求我又设计了一个顶部页签导航，来完成分类查找的目的。进入到代码实现的阶段，因为是顶部页签，我设计了一个Tabs组件，来存储不同的标签。并且因为是顶部，所以要设置一个Barposition.start来确保组件设置在顶部，每一个Tab设置一个tab content来代表不同的页签。
鸿蒙ArkTS小案例-购物车
小学生波波
08-29 415
鸿蒙应用开发-购物车小案例
鸿蒙ArkTS声明式组件：【Web】
2401_82772199的博客
07-04 1003
提供具有网页显示能力的Web组件，[@ohos.web.webview]提供web控制能力。
OpenHarmony开发实战：Web组件的使用（ArkTS）
shudaoshanQAQ的博客
04-07 1437
本篇文章使用ArkTS语言实现一个简单的免登录过程，向大家介绍基本的cookie管理操作。
OpenHarmony开发实战：购物应用（ArkTS），2024年最新字节跳动面试编程题
2401_84182793的博客
04-17 1112
从入口组件的代码中可以看出，我们定义了一个全局变量currentPage ，当currentPage发生变化的时候，会显示不同的页签。在ShopCartListItem中使用Toggle的单选框类型来实现每个item的选择和取消选择，在Toggle的onChage事件中来改变totalPrice的数值。在本任务中我们主要是构建一个购物车页签，给商品列表的每个商品设置一个单选框，可以选中与取消选中，底部Total值也会随之增加或减少，点击Check Out时会触发弹窗。
OpenHarmony开发实战：购物应用（ArkTS）(3)，2024年最新2024HarmonyOS鸿蒙高级面试题及答案
2401_84182793的博客
04-17 791
从入口组件的代码中可以看出，我们定义了一个全局变量currentPage ，当currentPage发生变化的时候，会显示不同的页签。在本任务中我们主要是构建一个购物车页签，给商品列表的每个商品设置一个单选框，可以选中与取消选中，底部Total值也会随之增加或减少，点击Check Out时会触发弹窗。在本任务中，把上面每一部分都封装成一个组件，然后再放到入口组件内，当点击顶部返回图标时返回到主页面的商品列表页签，点击底部Buy时，会触发进度条弹窗。MyInfo() //我的。.title(“购物车”)
HarmonyOS鸿蒙ArkTS证件照生成模板
02-04
HarmonyOS鸿蒙操作系统引入了一种新的编程语言——ArkTS，它是专门为HarmonyOS设计的，旨在提高开发效率和跨平台兼容性。 ArkTS是TypeScript的方言，它结合了JavaScript的灵活性和静态类型的强安全性，使得开发人员...
HarmonyOS-ArkTS-待办列表源码
12-21
ArkTS语法：ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。 Text组件：显示一段文本的组件。 Column组件：沿垂直方向布局的容器。 Row组件：沿水平方向布局的容器。
基于鸿蒙HarmonyOS，使用ArkTS开发纯净的浏览器（小狐狸浏览器）.zip
02-10
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
HarmonyOs 应用基础-ArkTS-核心-基础 -抽奖案例代码
最新发布
09-10
HarmonyOs 应用基础-ArkTS-核心-基础 -抽奖案例代码
ArkTS 网络请求
2401_82373036的博客
01-07 722
在发送请求后，可以使用Promise来处理响应。ArkTS - 网络请求是一种用于发送和接收数据的库，它可以帮助开发者在前端应用中进行网络请求。通过使用ArkTS - 网络请求，开发者可以轻松地发送HTTP请求，获取服务器响应，并处理返回的数据。ArkTS - 网络请求库提供了一些常见的方法，如GET、POST、PUT和DELETE，这些方法可以用来发送不同类型的请求。总的来说，ArkTS - 网络请求提供了一种简单而有效的方式来处理前端应用中的网络请求，帮助开发者与后端服务器进行通信，并获取所需的数据。
Arkts web组件的使用
程序三两行
11-27 1469
访问在线网页时您需要在module.json5文件中申明网络访问权限：ohos.permission.INTERNET。加载网页效果无法在预览器中查看，需要在模拟器或者真机中展示项目。Web组件的使用非常简单，只需要ArkTS文件中创建一个。组件，传入两个参数就可以了。指定引用的网页路径，为组件的控制器，通过。
如何利用鸿蒙arkts进行json数据和对象互转-使用JSON库
m0_70749039的博客
06-03 7740
JSON库中提供json数据和对象互转方式
OpenHarmony开发实战：备忘录（ArkTS）
shudaoshanQAQ的博客
04-10 1365
本篇Codelab基于用户首选项，实现了备忘录新增、更新、删除以及查找等功能
OpenHarmony分布式购物车案例展示~
1
02-26 1292
分布式购物车demo 模拟的是我们购物时参加满减活动，进行拼单的场景；实现两人拼单时，其他一人添加商品到购物车，另外一人购物车列表能同步更新，且在购物车列表页面结算时，某一人结算对方也能实时知道结算金额和优惠金额。整个操作效果分为3个小动画，拉起对方用户添加商品到购物车列表购物车列表勾选demo效果（HH-SCDAYU200）1）通过装饰器来创建自定义弹窗，使用方式可参考自定义弹窗；2）规则弹窗效果如下，弹窗组成由两个Text和两个Button竖向排列组成;
HarmonyOS应用开发ArkUI（TS）电商项目实战(1)，2024年最新HarmonyOS鸿蒙项目实例
2401_83947398的博客
04-09 771
视频，并且会持续更新**
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mortalz7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值