目前華為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