鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇

最新推荐文章于 2024-08-20 16:55:29 发布
最新推荐文章于 2024-08-20 16:55:29 发布
阅读量715 收藏 11
点赞数 4
分类专栏： 鸿蒙应用 笔记 文章标签： harmonyos ArkTS 端云一体化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45793745/article/details/140777443
版权

一、获取昵称和头像

TODO：用户通过邮箱登录后跳转到用户信息页，用户信息页展示用户头像和用户昵称信息，用户头像和用户昵称在用户信息页中均可修改，在点击下方的更新信息按钮后，新的用户信息将重新传递到云端。

方法一：云端API
// 获取用户信息的两种方法:

cloud.auto().getCruuentUser()

方法二：AppStorage
// 方法二：在用户登录时，将返回的用户信息存储在AppStorage中，在用户信息页中在取出展示。

// 登录页主要代码：
 const result = await cloud.auth().signIn({
         credentialInfo: {
           kind: 'email',
           email: this.phone,
           verifyCode: this.verifCode
         }
       })
const user = result.getUser()
 AppStorage.setOrCreate("user",user) // 存
// 用户信息页：
// 注意 Authuse 和null是不兼容的，所以需要联合类型
 @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }

示例

TODO：用户通过邮箱登录后，获取到用户昵称和头像

  1. 登录页：
import cloud from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
import router from '@ohos.router';

@Entry
@Component
struct PageTest {
  @State verificationBtnStr:string= "验证码"
  @State phone:string = ""
  @State verifcationBtnStatus:boolean = true
  @State timer :number = 0
  @State countDown:number = 60
  @State data:string = ""
  @State verifCode:string = ""
  // 注销
  loginOut(){
    cloud.auth().signOut().then(() => {
      //登出成功
      AlertDialog.show({
        title: "提示",
        message: "注销用户成功",


      })
    }).catch(() => {
      //登出失败
    });
  }
  //登录
  async login(){
    
    
     this.data = this.verifCode

     try{
       const result = await cloud.auth().signIn({
         credentialInfo: {
           kind: 'email',
           email: this.phone,
           verifyCode: this.verifCode
         }
       })

       const user = result.getUser()

       AppStorage.setOrCreate("user",user)
       router.replaceUrl({url:'pages/UserInfo'})
     } catch (e) {
       this.data= JSON.stringify(e)
       AlertDialog.show({
         title: "提示",
         message: JSON.stringify(e),

       })
     }

     

  }
  // 云端获取
  getCloudQrCode(){
    cloud.auth().requestVerifyCode({
      action: VerifyCodeAction.REGISTER_LOGIN,
      lang: 'zh_CN',
      sendInterval: 60,
      verifyCodeType: {
        email: this.phone,
        kind: "email",
      }
    }).then(verifyCodeResult => {
      //验证码申请成功
      console.log(JSON.stringify(verifyCodeResult))
      this.data = JSON.stringify(verifyCodeResult)
      AlertDialog.show({
        title: "提示",
        message: "获取验证码成功",
      })
    }).catch((error: Promise<Result>) => {
      AlertDialog.show({
        title: "提示",
        message: "获取验证码失败",
      })
      //验证码申请失败
    });

  }
  // 初始化参数：
  initData(){
    clearInterval(this.timer)
    this.verifcationBtnStatus = true
    this.verificationBtnStr  = "验证码"
    this.countDown  = 60
  }
  // 发送验证码
  getCode(){
    if(this.phone==''){
      AlertDialog.show({
        title: "提示",
        message: "请输入用户邮箱",

      })
      return;
    }
    this.verifcationBtnStatus = false

    this.getCloudQrCode()


    this.timer  = setInterval(()=>{
      this.verificationBtnStr = `${this.countDown}s`
      if(this.countDown===0){
        this.initData()
        return;
      }

      this.countDown --

    },1000)
  }
  build() {
    Column({space:20}){
      TextInput({placeholder:'请输入用户邮箱：'}).width("100%").height(60).margin({top:20})
        .onChange((value)=>{
          this.phone = value
        })
      Row(){
        TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
          .onChange((value)=>{
            this.verifCode =value
          })
        Button(this.verificationBtnStr).width(120).onClick(()=>{
          this.getCode()

        }).enabled(this.verifcationBtnStatus)

      }.width("100%").height(60)
      Button("登录").onClick( ()=>{
        this.data = "1aaaaaa"
        this.login()

      }).width("100%").height(40).padding({
        left:50,right:50
      }).backgroundColor("#ff08be4b")

      Button("注销").onClick( ()=>{
        this.data = "1aaaaaa"
        this.loginOut()

      }).width("100%").height(40).padding({
        left:50,right:50
      }).backgroundColor("#ff08be4b")


      Text(this.data).width("100%").height(200).backgroundColor(Color.Pink)
    }.width("100%").height("100%").padding({left:10,right:10})
  }
}

image.png

  1. 用户信息页：
import { AuthUser } from '@hw-agconnect/cloud'


@Entry
@Component
struct UserInfo {
  @State message: string = 'Hello World'
  @State UserImgUrl:string = 'app.media.user_dark'
  @State UserName:string = 'test'
  // 注意 Authuse 和null是不兼容的，所以需要联合类型

  @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }

 
  build() {
      Column({space:20}){
        Image(this.UserImgUrl?this.UserImgUrl:$r("app.media.user_dark")).width(100).height(100).margin({top:20})
          .onClick(()=>{
            this.UserImgUrl = "https://img0.baidu.com/it/u=4218602670,1294229692&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
          })
        TextInput({placeholder:"请设置昵称",text:this.UserName}).width("100%").height(40).margin({left:20,right:20})
          .onChange((value)=>{
            this.UserName = value
          })
        Text(this.UserImgUrl).width("100%").height(200)

      
      }.width("100%").height("100%")
  }
}

image.png

二、云存储服务

本项目在创建项目时就开通了云存储业务，所以就不演示了。
image.png
注意点1：免费额度为：5G（超过则需要付费）
注意点2：如果是需要点击开通该服务的，在操作完开通流程后，记得更新agconnect-services.json文件
image.png

三、云存储上传文件

TODO：用户登录后，通过点击头像打开相册，将相册中的图片上传到云存储中，并更新用户信息。:

// 示例代码

 // 步骤1：打开相册
const options = new picker.PhotoSelectOptions()
options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
options.maxSelectNumber=1 // 选择图片数量
const result = await new picker.PhotoViewPicker().select(options)
//步骤2：上传
await cloud.storage().upload({
  localPath:result.photoUris[0],
  cloudPath:`images/${this.user?.getUid()}.jpg`
})
//步骤3：回显
const url = await cloud.storage().getDownloadURL(`images/${this.user?.getUid()}.jpg`)
this.UserImgUrl = url // 赋值给UserImgUrl显示到用户信息页上

完整示例：

  1. 用户信息页：
import cloud, { AuthUser } from '@hw-agconnect/cloud'
import { picker } from '@kit.CoreFileKit'


@Entry
@Component
struct UserInfo {
  @State message: string = 'Hello World'
  @State UserImgUrl:string = 'app.media.user_dark'
  @State UserName:string = 'test'
  // 注意 Authuse 和null是不兼容的，所以需要联合类型

  @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }

  async updateInfo(){
    await this.user?.updateProfile({
      displayName:this.UserName,
      photoUrl:this.UserImgUrl
    })
    AlertDialog.show({
      title: "提示",
      message: "用户信息更新成功",

    })
  }
  build() {
      Column({space:20}){
        Image(this.UserImgUrl?this.UserImgUrl:$r("app.media.user_dark")).width(100).height(100).margin({top:20})
          .onClick(async ()=>{
            // this.UserImgUrl = "https://img0.baidu.com/it/u=4218602670,1294229692&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"

            try{
              // 打开相册
              const options = new picker.PhotoSelectOptions()
              options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
              options.maxSelectNumber=1 // 选择图片数量
              const result = await new picker.PhotoViewPicker().select(options)
              // 上传
              await cloud.storage().upload({
                localPath:result.photoUris[0],
                cloudPath:`images/${this.user?.getUid()}.jpg`
              })
              // 回显
              const url = await cloud.storage().getDownloadURL(`images/${this.user?.getUid()}.jpg`)
              this.UserImgUrl = url

            } catch (e) {
            }

          })
        TextInput({placeholder:"请设置昵称",text:this.UserName}).width("100%").height(40).margin({left:20,right:20})
          .onChange((value)=>{
            this.UserName = value
          })
        Text(this.UserImgUrl).width("100%").height(200)

        Button("更新信息")
          .onClick(()=>{
            this.updateInfo()
          })
      }.width("100%").height("100%")
  }
}
  1. 效果

image.png
image.png
image.png
image.png

四、图片缓存问题

问题说明：
因为本次实例是以登录用户的UUID作为图片的名称上传的，所以如果切换图片上传的话，
新的图片地址和旧的图片地址都是一样的，系统就会认为是同一张图片，从而只显示系统中存在
图片，而并不会重新更新云存储中新的图片。

解决方法：
// 在每次上传成功后，重新更新存储图片的RUL即可。
// 方法1：可以修改上传时的图片名称
// 方法2：在url后添加一个随机的参数

// 方法1：`images/${this.user?.getUid()}${new Date().getTime().toString()}.jpg`
// 打开相册
const options = new picker.PhotoSelectOptions()
options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
options.maxSelectNumber=1 // 选择图片数量
const result = await new picker.PhotoViewPicker().select(options)
// 上传

const imgName = `images/${this.user?.getUid()}${new Date().getTime().toString()}.jpg`
await cloud.storage().upload({
  localPath:result.photoUris[0],
  cloudPath:imgName
})
// 回显
const url = await cloud.storage().getDownloadURL(imgName)
this.UserImgUrl = url

image.png

五：初始化页面判断（自动登录）

TODO：在应用的登录界面，初始化Auth实例，获取AGC的用户信息，检查是否有已经登录的用户。如果有，则可以直接进入用户界面，否则显示登录界面。

// 在生命周期方法内判断，如果存在user信息就直接跳转到用户信息页中
aboutToAppear(): void {

    cloud.auth().getCurrentUser().then(user=>{
      if(user){
        //业务逻辑
        AppStorage.setOrCreate("user",user)
        router.replaceUrl({url:'pages/UserInfo'})
      }
    });
  }

六：上传进度功能实现

TODO：点击头像框时，跳转到图库中，选择需要的头像并点击确定后，返回到用户信息页中，加载文件上传的进度，到100%时，头像上传成功，并显示选择的图片。


// 使用层叠布局将上传进度显示在头像框上
// 通过头像框是否可用判断是否显示进度框
import cloud, { AuthUser } from '@hw-agconnect/cloud'
import { picker } from '@kit.CoreFileKit'


@Entry
@Component
struct UserInfo {
  @State message: string = 'Hello World'
  @State UserImgUrl:string = 'app.media.user_dark'
  @State UserName:string = 'test'
  @State loadingText:string = "0" // 上传进度
   @State UserImgEnable:boolean = true // 头像是否可用
  // 注意 Authuse 和null是不兼容的，所以需要联合类型

  @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }

  async updateInfo(){
    await this.user?.updateProfile({
      displayName:this.UserName,
      photoUrl:this.UserImgUrl
    })
    AlertDialog.show({
      title: "提示",
      message: "用户信息更新成功",

    })
  }
  build() {
      Column({space:20}){
        Stack(){
          Image(this.UserImgUrl?this.UserImgUrl:$r("app.media.user_dark")).width(100).height(100).borderRadius(100)
            .enabled(this.UserImgEnable)
            .onClick(async ()=>{
              try{
                // 打开相册
                const options = new picker.PhotoSelectOptions()
                options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
                options.maxSelectNumber=1 // 选择图片数量
                const result = await new picker.PhotoViewPicker().select(options)
                // 上传
                const imgName = `images/${this.user?.getUid()}${new Date().getTime().toString()}.jpg`
                await cloud.storage().upload({
                  localPath:result.photoUris[0],
                  cloudPath:imgName,
                  onUploadProgress:(value)=>{
                    this.UserImgEnable = false
                     this.loadingText =  Math.floor(100* value.loaded/value.total).toString()
                  }
                })
                this.UserImgEnable = true
                // 回显
                const url = await cloud.storage().getDownloadURL(imgName)
                this.UserImgUrl = url

              } catch (e) {
              }
            })
        // 判断头像框可用状态
         if(!this.UserImgEnable){
           Text(`${this.loadingText}%`).width(100).height(100).borderRadius(100).backgroundColor(Color.Black).opacity(.5)


             .fontWeight(700)
             .fontSize(24)
             .fontColor(Color.Black)
             .textAlign(TextAlign.Center)
         }

        }.margin({top:20})



        TextInput({placeholder:"请设置昵称",text:this.UserName}).width("100%").height(40).margin({left:20,right:20})
          .onChange((value)=>{
            this.UserName = value
          })
        Text(this.UserImgUrl).width("100%").height(200)

        Button("更新信息")
          .onClick(()=>{
            this.updateInfo()
          })
      }.width("100%").height("100%")
  }
}
  • 效果图：

image.png
image.png
image.png
image.png

whltaoin
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
Varin
07-27 744
鸿蒙 HarmonyOS NEXT 的端云一体化开发是一种全新的开发模式，它允许开发者使用一套统一的技术栈（如 ArkTS）来构建客户端和云端服务，从而实现无缝的跨设备体验。通过这种方式，开发者可以简化开发流程，提高效率，并确保应用程序在不同平台上具有一致性。端云一体化还支持便捷地调用云函数和服务，使得数据同步、云存储等功能更加容易实现。这一特性不仅降低了开发复杂度，还增强了应用的功能性和可扩展性。
鸿蒙Next开发之-保存base64图片到本地沙盒
zzz777qqq的博客
04-19 1726
Base64 是一种基于64个 ASCII 字符来表示二进制数据的表示方法大、小写字母（AZaz52个数字。09）10个两个特殊字符。）2个。
鸿蒙 HarmonyOS NEXT端云一体化开发-认证服务篇
Varin
07-28 747
鸿蒙 HarmonyOS NEXT 的端云一体化开发是一种全新的开发模式，它允许开发者使用一套统一的技术栈（如 ArkTS）来构建客户端和云端服务，从而实现无缝的跨设备体验。通过这种方式，开发者可以简化开发流程，提高效率，并确保应用程序在不同平台上具有一致性。端云一体化还支持便捷地调用云函数和服务，使得数据同步、云存储等功能更加容易实现。这一特性不仅降低了开发复杂度，还增强了应用的功能性和可扩展性。
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
Varin
07-30 799
鸿蒙 HarmonyOS NEXT 的端云一体化开发是一种全新的开发模式，它允许开发者使用一套统一的技术栈（如 ArkTS）来构建客户端和云端服务，从而实现无缝的跨设备体验。通过这种方式，开发者可以简化开发流程，提高效率，并确保应用程序在不同平台上具有一致性。端云一体化还支持便捷地调用云函数和服务，使得数据同步、云存储等功能更加容易实现。这一特性不仅降低了开发复杂度，还增强了应用的功能性和可扩展性。
【HarmonyOS】云开发-云数据库（一）
最新发布
包包熊的博客
08-20 787
华为云服务提供了云数据库的云服务，支持用户快速定义数据库表和管理数据库，并且提供了免费使用的额度。可以使用端云一体化模板实现端侧通过SDK修改数据库等操作，这样子方便中小企业或者项目快速的开发工作。
HarmonyOS云开发简介
wu347771769的专栏
12-12 193
HarmonyOS云开发是DevEco Studio新推出的功能，可以让您在一个项目工程中，使用一种语言完成端侧和云侧功能的开发。基于AppGallery Connect Serverless构建的云侧能力，让您无需构建和管理云端资源，随需使用，大大提高构建应用/元服务的效率。认证服务：可以为应用快速构建安全可靠的用户认证系统。云函数：一方面将开发测试的对象聚焦到函数级别，可以大幅简化应用开发与运维相关的事务；另一方面通过云函数SDK，可以便捷操作云数据库、云存储等，提升业务功能构建的便利性。
HarmonyOS端云体化开发—创建端云一体化开发工程
m0_70749039的博客
02-28 1593
端云一体化开发工程目录分为三个子工程：端开发工程（Application）、云开发工程（CloudProgram）、端侧公共库（External Libraries）。
鸿蒙【云端一体化】
pacong的博客
03-23 999
开发云函数调用云函数。
HarmonyOS Next开发学习手册——保存用户文件
maniuT的博客
07-25 930
在从网络下载文件到本地、或将已有用户文件另存为新的文件路径等场景下，需要使用FilePicker提供的保存用户文件的能力。picker获取的uri只具有临时权限，获取持久化权限需要通过 FilePicker设置永久授权 方式获取。对音频、图片、视频、文档类文件的保存操作类似，均通过调用对应picker的save()接口并传入对应的saveOptions来实现。通过Picker访问相关文件，无需申请权限。
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5036
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
DevEco Studio 是一款专为鸿蒙 HarmonyOS 设计的一体化集成开发环境(IDE)，支持应用程序的开发、调试、测试等功能。DevEco Studio 的下载地址如下： - **官方网站**: [https://developer.huawei.com/consumer/cn/]...
HarmonyOS应用开发者高级认证 word试题及答案
12-21
以上内容详细解析了 HarmonyOS 应用开发者高级认证涉及的诸多知识点，包括但不限于端云一体化开发、组件和布局、服务与函数调用、应用发布流程、测试管理以及安全性等。掌握这些知识点对于成为一名合格的HarmonyOS...
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于PhotoViewPicker对图片进行操作
hongxiaomeng的博客
05-09 381
HarmonyOS NEXT星河版之实战商城App瀑布流(含加载更多)
小洋人最happy的专栏
04-17 687
【代码】HarmonyOS NEXT星河版之实战商城App瀑布流(含加载更多)
【HarmonyOS NEXT】使用picker组件从相册获取到图片之后存储到沙盒中，图片无法使用
Mayism123的博客
06-05 220
通过@ohos.file.picker选图后，通过fs将图片写入到沙盒中，图片无法使用。divice file browser中存在该图片文件，但是破损无法使用。FilePicker / 保存图片 / 加载图片。
HarmonyOS NEXT图片选择和下载保存案例
shudaoshanQAQ的博客
03-24 2025
本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。
HarmonyOS NEXT Beta 版报名答题-先锋用户
06-23
HarmonyOS NEXT Beta版的报名答题活动通常是为了邀请热情的开发者和用户提前体验新版本的系统，并收集他们的反馈，以便优化和完善。作为"先锋用户"，你可能会有机会： 1. 试用新功能：首先，你可以抢先体验到尚未正式发布的HarmonyOS的新特性和改进，感受其性能和用户体验。 2. 参与测试：你需要参与到系统测试中，对新版本的各种功能进行实际操作，发现并报告可能存在的 bug 或提供建设性的使用建议。 3. 提供反馈：通过完成问卷调查或提交问题报告，你将帮助华为了解用户的真实需求，对产品的未来发展起到关键作用。 4. 社区交流：成为先锋用户往往意味着你会加入到一个早期采用者社区，与其他用户一起分享心得，探讨技术问题，甚至可能会参与官方的开发者论坛讨论。 如果你对参加这样的活动感兴趣，通常需要关注华为的官方渠道（如官网、社交媒体、开发者社区等）获取报名信息和相关考试题目的公告。具体步骤可能包括注册账号、填写申请表、通过知识问答考核，然后等待审核通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值