目前华为 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/…
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 依赖,用于获取本地文件
{"name": "system.media"}
2、在 src/Hello/hello.ux 文件中,增加登录按钮,并且增加匿名登录的相干代码:
3、点击 IDE 菜单“文件 > 新建页面”,页面门路为“Main”,页面文件名为“index”,增加界面布局。
能够依照下图进行 UI 设计。
b) 创立援用
1、src/app.ux 文件中,增加编译依赖配置和 onCreate 函数下初始化 agc
<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 按钮绑定函数,可依据本身设计代码调整。
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 中对应按钮的绑定函数,可依据本身设计代码调整。
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 中对应按钮的绑定函数,可依据本身设计代码调整。
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 接口齐全满足各种应用状况,
具体开发指南:https://developer.huawei.com/…
云存储快利用 Demo:
https://github.com/AppGallery…
原文链接:https://developer.huawei.com/…
原作者:Mayism