目前华为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 , "\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,运行该快应用,可以在右侧查看相应的效果
6、总结
CloudStorage之前的JS SDK,已经无缝支持华为快应用,多场景的覆盖更加全面。另外在快应用的使用上方便快捷,API接口齐全满足各种使用情况,
云存储快应用Demo:
https://github.com/AppGalleryConnect/agc-demos/tree/main/Quickapp/CloudStorage
原文链接:https://developer.huawei.com/...
原作者:Mayism