在快應用中整合華為AGC雲端儲存服務

目前華為 AGC雲端儲存服務已經支援在快應用中整合了，你可以使用雲端儲存服務儲存圖片、影片、音訊等，整合的Demo可以 參考Github。

1 、安裝Node.js 環境：

1 、下載Node.js 安裝包：

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 依賴，用於獲取本地檔案

{
  "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/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-getstarted-quickapp

雲端儲存快應用 Demo ：

 

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0203477576229380396?fid=0101271690375130218

原作者：Mayism