目前华为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路径：
2、查看NodeJS版本； 查看npm版本
3、安装快应用IDE并且配置环境
1、下载并且安装快应用IDE，与快应用加载器
https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-installtool
2、IDE操作： 在IDE创建一个快应用项目：
3、点击 Npm > 启动第三方NPM库，此时IDE会自动向项目中添加fa-toolkit以及package.json。
4、SDK集成
1、下载agconnect-services.json文件，并且放到src目录下
2、执行npm命令，添加云存储依赖项：npm install --save @agconnect/cloudstorage
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”，添加界面布局。
可以按照下图进行UI设计。
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, " "); 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，运行该快应用，可以在右侧查看相应的效果
6、总结
CloudStorage之前的JS SDK，已经无缝支持华为快应用，多场景的覆盖更加全面。另外在快应用的使用上方便快捷，API接口齐全满足各种使用情况，
云存储快应用Demo：
https://github.com/AppGalleryConnect/agc-demos/tree/main/Quickapp/CloudStorage
原文链接：https://developer.huawei.com/...
原作者：Mayism