支付寶小程序 快速示例·相冊(cè)

圖片存儲(chǔ)，是所有應(yīng)用開(kāi)發(fā)里最常見(jiàn)的場(chǎng)景之一。在快速示例中，我們將借助小程序云開(kāi)發(fā)能力，提升功能開(kāi)發(fā)效率和數(shù)據(jù)隱私保護(hù)能力。

前提條件

• 已 開(kāi)通小程序云服務(wù)，并創(chuàng)建 服務(wù)空間 和 數(shù)據(jù)表。
• 已下載并安裝 小程序開(kāi)發(fā)工具。
• 已安裝 nodejs 開(kāi)發(fā)環(huán)境。

獲取模板代碼

下載 serverless-photo demo.zip 文件，并解壓至本地。

使用步驟

添加功能

1. 登錄 小程序開(kāi)發(fā)中心，在 我的小程序 中，選擇相應(yīng)的小程序，進(jìn)入該小程序詳情頁(yè)。
2. 在小程序詳情開(kāi)發(fā)管理頁(yè)面的 功能列表 中，點(diǎn)擊右上角 添加功能 按鈕，添加 獲取會(huì)員基礎(chǔ)信息 功能。

新建 / 打開(kāi)項(xiàng)目

在 IDE 啟動(dòng)界面新建 云與開(kāi)放能力 > 個(gè)人相冊(cè) 模板項(xiàng)目，或者打開(kāi)前面步驟下載的 zip 文件內(nèi)容。

快速體驗(yàn)

1. 在小程序開(kāi)發(fā)者工具打開(kāi)下載的工程，然后關(guān)聯(lián)對(duì)應(yīng)的小程序。

1. 將 client/pages/app.js 中對(duì)應(yīng)的如下小程序配置項(xiàng)改為用戶(hù)自己的參數(shù)。

   appId: '2021*********', // 小程序應(yīng)用標(biāo)識(shí)
   spaceId: 'ca8eb10f-26c1-4bee-**********', // 服務(wù)空間標(biāo)識(shí)
   clientSecret: 'Xckz2************', // 服務(wù)空間 secret key
   endpoint: 'https://api.************' // 服務(wù)空間地址，從小程序Serverless控制臺(tái)處獲得 

1. 進(jìn)入 管理云服務(wù)，點(diǎn)擊 前往產(chǎn)品控制臺(tái) 進(jìn)入 Serverless 控制臺(tái)，開(kāi)通擴(kuò)展能力，調(diào)用 Serverless 提供的內(nèi)置方法。

1. 保存文件后，打開(kāi) IDE 的模擬器，頁(yè)面會(huì)自動(dòng)刷新。至此，我們已經(jīng)完成了一個(gè)簡(jiǎn)單的小程序的搭建，并將最核心的能力使用小程序 Serverless 開(kāi)發(fā)完成，快使用支付寶開(kāi)發(fā)者工具體驗(yàn)吧。

前端配置 Serverless詳解

初始化

// client/app.jsimport MPServerless from '@alicloud/mpserverless-sdk';


const mpserverless = new MPServerless({
  uploadFile: my.uploadFile,
  request: my.request,
  getAuthCode: my.getAuthCode,}, {
  appId: ' ', // 小程序應(yīng)用標(biāo)識(shí)
  spaceId: ' ', // 服務(wù)空間標(biāo)識(shí)
  clientSecret: ' ', // 服務(wù)空間 secret key
  endpoint: ' ' // 服務(wù)空間地址，從小程序Serverless控制臺(tái)處獲得});

頁(yè)面加載時(shí)添加授權(quán)，否則會(huì)報(bào)錯(cuò)

// client/app.jsasync onSubmit() {await mpserverless.user.authorize({
      authProvider: 'alipay_openapi',
      // authType: 'anonymous'})},

全局使用 Serverless

// client/app.jsApp({
  mpserverless,});// 其他文件調(diào)用const { mpserverless } = getApp()// 添加文件數(shù)據(jù)
mpserverless.db.collection('files').insertOne( { name: '數(shù)據(jù)表名稱(chēng)', userId: '數(shù)據(jù)表ID' })

讀取文件數(shù)據(jù)

async onReady() {
  const result = await mpserverless.db.collection('files').find({ userId: '用戶(hù)id' })
  this.setData({
    files: result.result || [],
  })},

讀取云數(shù)據(jù)庫(kù)照片數(shù)據(jù)

 async onReady() {
    // 頁(yè)面加載完成
    const { id } = this.data
    await mpserverless.db.collection('photos').find({ fileId: '文件id' }).then((res) => {
      this.setData({ imgs: res.result });
    }).catch(console.error);
  },

選擇本地圖片

  attach() {
    my.chooseImage({
      chooseImage: 1,
      success: res => {
        const path = res.apFilePaths[0];
        const options = {
          filePath: path,
          headers: {
            contentDisposition: 'attachment',
          },
        };


        mpserverless.file.uploadFile(options).then((image) => {
          const { imgs } = this.data
          imgs.push(image.fileUrl)
          this.setData({
            imgs,
          });
        }).catch(console.log);
      },
    });
  },

將圖片保存到數(shù)據(jù)庫(kù)

  async submit() {
    const obj = { urls: '圖片路徑', details: '圖片描述', fileId: '文件id' }
    await mpserverless.db.collection('photos').insertOne(obj)
    my.navigateBack()
  },