在快应用中集成华为AGC云存储服务

目前华为AGC云存储服务已经支持在快应用中集成了,你可以使用云存储服务存储图片、视频、音频等,集成的Demo可以参考Github

1、安装Node.js环境:

1、下载Node.js安装包:https://nodejs.org/en/download/

2、Window环境安装Node.js

3、安装好以后,系统会弹出一个cmd框提示你自动安装所需的插件

 

2、检查PATH环境变量内是否配置了NodeJS:

1、我的电脑 – 右键选择属性 – 选择高级系统设置 – 选择环境变量 – 查看系统变量

      在系统变量界面选择Path:查看是否有安装的NodeJS路径:

       在快应用中集成华为AGC云存储服务 

2、查看NodeJS版本; 查看npm版本

       在快应用中集成华为AGC云存储服务

3、安装快应用IDE并且配置环境

1、下载并且安装快应用IDE,与快应用加载器

      https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-installtool

2、IDE操作: 在IDE创建一个快应用项目:

在快应用中集成华为AGC云存储服务

3、点击 Npm > 启动第三方NPM库,此时IDE会自动向项目中添加fa-toolkit以及package.json。

 在快应用中集成华为AGC云存储服务

 

4、SDK集成

1、下载agconnect-services.json文件,并且放到src目录下

 在快应用中集成华为AGC云存储服务

2、执行npm命令,添加云存储依赖项:npm install --save @agconnect/cloudstorage

在快应用中集成华为AGC云存储服务

               

3、安装依赖,点击IDE菜单“Npm > 安装依赖”

 

5、功能开发

a) 界面设计与前置步骤

1、在src/manifest.json文件中,features下添加system.media依赖,用于获取本地文件

1 2 3 {   "name": "system.media" }

 

2、在src/Hello/hello.ux文件中,添加登录按钮,并且添加匿名登录的相关代码:

3、点击IDE菜单“文件 > 新建页面”,页面路径为“Main”,页面文件名为“index”,添加界面布局。

在快应用中集成华为AGC云存储服务

可以按照下图进行UI设计。

在快应用中集成华为AGC云存储服务

 

b) 创建引用

1、src/app.ux文件中,添加编译依赖配置和onCreate函数下初始化agc

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script> import agconnect from "@agconnect/api";   import "@agconnect/cloudstorage";      module.exports = {     onCreate() {       console.info('Application onCreate');       let agConnectConfig = require('./agconnect-services.json');       agconnect.instance().configInstance(agConnectConfig);     },     onDestroy() {       console.info('Application onDestroy');     },     dataApp: {       localeData: {}     },     agc: agconnect   } </script>

 

c) 上传文件

putFile为上述UI中putFile按钮绑定函数,可根据自身设计代码调整。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 putFile() {   let that = this;   media.pickFile({     success: function (data) {       console.log("handling success: " + data.uri);       let agconnect = that.$app.$def.agc;       let ref = agconnect.cloudStorage().storageReference();       let path = that.currentPath + that.getName(data.uri);       const child = ref.child(path);       child.put4QuickApp(data.uri, {         cacheControl: 'helloworld',         contentDisposition: 'helloworld',         contentEncoding: 'helloworld',         contentLanguage: 'helloworld',         contentType: 'helloworld',         customMetadata: {           hello: 'kitty'         }       }).then((res) => {         that.result = JSON.stringify(res, null"\t");         prompt.showToast({           message: `putFile success`,           duration: 3500,           gravity: 'center'         });       })     },

 

d) 获取文件列表

getList、getListAll为上述UI中对应按钮的绑定函数,可根据自身设计代码调整。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 getList() {   let agconnect = this.$app.$def.agc;   let ref = agconnect.cloudStorage().storageReference();   let path = this.selected === '' this.currentPath : this.selected;   const child = ref.child(path);   child.list({ maxResults: 10 }).then((res) => {     this.currentPath = path;     this.selected = '';     this.setList(res);   }) }, getListAll() {   let agconnect = this.$app.$def.agc;   let ref = agconnect.cloudStorage().storageReference();   let path = this.selected === '' this.currentPath : this.selected;   const child = ref.child(path);   child.listAll().then((res) => {     this.currentPath = path;     this.selected = '';     this.setList(res);   }) },

 

e) 获取文件下载地址

getDownloadURL为上述UI中对应按钮的绑定函数,可根据自身设计代码调整。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 getDownloadURL() {   if (this.selected === '' || this.selected.endsWith('/')) {     prompt.showToast({       message: `only file can getDownloadURL`,       duration: 3500,       gravity: 'center'     });     return;   }   let agconnect = this.$app.$def.agc;   let ref = agconnect.cloudStorage().storageReference();   const child = ref.child(this.selected);   child.getDownloadURL().then((res) => {     this.result = res;     prompt.showToast({       message: `getDownloadURL success`,       duration: 3500,       gravity: 'center'     });   }) }

 

5、现象与验证

在快应用IDE中间点击Run,运行该快应用,可以在右侧查看相应的效果

在快应用中集成华为AGC云存储服务 在快应用中集成华为AGC云存储服务 在快应用中集成华为AGC云存储服务

 

6、总结

CloudStorage之前的JS SDK,已经无缝支持华为快应用,多场景的覆盖更加全面。另外在快应用的使用上方便快捷,API接口齐全满足各种使用情况,

 

详细开发指南:https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-getstarted-quickapp

云存储快应用Demo:

https://github.com/AppGalleryConnect/agc-demos/tree/main/Quickapp/CloudStorage

 

原文链接:https://developer.huawei.com/...
原作者:Mayism

上一篇:如何解决Eclipse集成华为AGC SDK工具包运行失败问题


下一篇:Android平台 | 零代码快速集成AGC云托管服务