在快應用中整合華為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路徑：
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>
importagconnectfrom"@agconnect/api";
import"@agconnect/cloudstorage";
module.exports={
onCreate(){
console.info('ApplicationonCreate');
letagConnectConfig=require('./agconnect-services.json');
agconnect.instance().configInstance(agConnectConfig);
},
onDestroy(){
console.info('ApplicationonDestroy');
},
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(){
letthat=this;
media.pickFile({
success:function(data){
console.log("handlingsuccess:"+data.uri);
letagconnect=that.$app.$def.agc;
letref=agconnect.cloudStorage().storageReference();
letpath=that.currentPath+that.getName(data.uri);
constchild=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:`putFilesuccess`,
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(){
letagconnect=this.$app.$def.agc;
letref=agconnect.cloudStorage().storageReference();
letpath=this.selected===''?this.currentPath:this.selected;
constchild=ref.child(path);
child.list({maxResults:10}).then((res)=>{
this.currentPath=path;
this.selected='';
this.setList(res);
})
},
getListAll(){
letagconnect=this.$app.$def.agc;
letref=agconnect.cloudStorage().storageReference();
letpath=this.selected===''?this.currentPath:this.selected;
constchild=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:`onlyfilecangetDownloadURL`,
duration:3500,
gravity:'center'
});
return;
}
letagconnect=this.$app.$def.agc;
letref=agconnect.cloudStorage().storageReference();
constchild=ref.child(this.selected);
child.getDownloadURL().then((res)=>{
this.result=res;
prompt.showToast({
message:`getDownloadURLsuccess`,
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