个人相册快速示例 - 小程序云

点我去体验

准备工作

在开始前，确保您已经完成以下准备工作：

注册支付宝开发者账号。
如果您尚未注册支付宝小程序账号，使用支付宝账号登录蚂蚁金服开放平台，并完成开发者身份注册。详细信息，请参见开发者入驻说明。
下载并安装支付宝小程序开发者工具。
详细信息，请参见下载说明。
已安装nodejs开发环境。

步骤一：开通小程序云服务

登录小程序云控制台。
在云产品开通页面，单击《小程序云服务协议》链接。
在阅读后，勾选我已阅读并同意《小程序云服务协议》复选框，然后单击立即开通。

步骤二：创建服务空间

小程序开发中创建的云资源会和服务空间进行关联。每个服务空间都有一个全局唯一的space ID。在使用云资源时，都通过这个space ID进行关联。参考以下步骤，创建服务空间并设置数据库权限：

在小程序云控制台的左侧导航栏，单击小程序Serverless > 服务空间管理。
单击创建服务空间，输入服务空间名称，然后单击确定。
创建成功后，单击详情查看space ID、secret和endpoint信息。
单击小程序Serverless > 云数据库，然后在页面右上角选择已创建的服务空间。
在云数据库页面，单击立即添加。
在新建数据表对话框中，输入数据表名称，单击确定。
单击您的数据表，然后单击权限>编辑权限。

说明为了保证数据安全，默认数据库访问受限。您需要根据需要设置数据库权限，更多详细信息，请参见数据权限管理。
在权限管理页面，单击自定义安全规则，将write权限修改为true

步骤三：创建支付宝小程序应用

参考以下步骤，在蚂蚁金服开放平台创建支付宝小程序：

使用支付宝账号登录蚂蚁金服开放平台，单击控制台。
选择小程序应用，然后单击创建应用并根据引导创建一个小程序应用。
在左侧导航栏单击设置。
单击开发设置，在开发信息下的接口加签方式区域配置支付宝公钥。
您可以通过RSA密钥生成工具一键生成小程序密钥。接口加签方式有普通公钥和证书公钥两种，主要用于签名和验证。其中私钥由开发者保存，公钥可对外公开，私钥用于签名，公钥用于验证签名。开发者需要保存自己的私钥，通过支付宝提供的公钥进行通信来保证信息传输的完整性以及发送者身份的真实性。详细信息，请参见生成支付宝RSA密钥。

说明个人开发者不涉及到资金类接口，建议使用普通公钥方式进行加签。
单击服务器域名白名单区域的添加，然后输入步骤一创建的服务空间的文件上传endpoint。
在小程序详情开发管理页面的功能列表中，单击右上角添加功能按钮，添加获取会员基础信息功能。

步骤四：添加支付宝小程序

在开发前，您需要将支付宝小程序信息添加到阿里云小程序Serverless控制台。

完成以下操作，添加支付宝小程序信息：

登录小程序云控制台。
左侧导航栏，单击小程序Serverless > 设置。
单击支付宝页签，然后单击添加。
输入您的私钥，即步骤四中生成的小程序RSA私钥。
输入支付宝公钥，支付宝公钥从蚂蚁金服开放平台->开发中心->设置->开发设置->开发信息中的接口加签方式中查看获取。

步骤五：获取模板代码

打开小程序开发工具，选择小程序开发。
选择支付宝小程序，然后小程序模板的开放能力分类中选择个人相册模板。
单击下一步，设置项目名称和项目路径，完成项目创建。

步骤六：快速体验

在小程序开发者工具中登录支付宝开发者账号，然后关联对应的小程序。

将client/pages/app.js中对应的如下小程序配置项改为用户自己的参数。

appId: '2021*********', // 小程序应用标识
spaceId: 'ca8eb10f-26c1-4bee-**********', // 服务空间标识
clientSecret: 'Xckz2************', // 服务空间 secret key
endpoint: 'https://api.************' // 服务空间地址，从小程序Serverless控制台处获得

appId即在小程序云Serverless中设置的AppId，spaceId、clientSecret、endpoint参数请查看小程序云服务空间详情，请参见步骤二：创建服务空间。

保存文件后，打开IDE的模拟器，就可以预览相册小程序了。您可以在小程序中新建相册，并将本地图片上传至相册中。

至此，已经完成了一个简单的个人相册小程序的搭建，并将最核心的能力使用小程序Serverless开发完成。

小程序Serverless代码详解

初始化

在使用小程序Serverless服务前，需要您在小程序中安装小程序Serverless客户端SDK并初始化。小程序Serverless客户端SDK的更多信息请参见安装客户端SDK2.2版本。

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

const mpserverless = new MPServerless({
  uploadFile: my.uploadFile,
  request: my.request,
  getAuthCode: my.getAuthCode,
}, {
  appId: ' ', // 小程序应用标识
  spaceId: ' ', // 服务空间标识
  clientSecret: ' ', // 服务空间 secret key
  endpoint: ' ' // 服务空间地址，从小程序Serverless控制台处获得
});

页面加载时添加授权
在调用小程序Serverless服务前，需要先调用authorize接口请求授权，支付宝小程序的授权请求参数authProvider应为alipay_openapi，更多authorize接口信息请参见authorize。
```
// client/app.js
async onSubmit() {
await mpserverless.user.authorize({
      authProvider: 'alipay_openapi',
      // authType: 'anonymous'
})
},                    
```
全局使用serverless
在小程序Serverless客户端SDK初始化完成后，可以将实例化的mpserverless对象放入App全局对象中，这样SDK就可以全局使用了。
```
// client/app.js
App({
  mpserverless,
});                
```
当需要使用SDK时只需从全局对象中获取mpserverless，就可以调用了。
以下示例实现了在其他文件中调用小程序Serverless的数据库服务，向files集合中插入了一条数据。
```
// 其他文件调用
const { mpserverless } = getApp()
// 添加文件数据
mpserverless.db.collection('files').insertOne( { name: '数据表名称', userId: '数据表ID' })    
```

读取文件数据

以下代码实现了在页面加载完成后，调用find接口请求数据库，查询当前用户下的相册信息，更多find接口信息请参见find。

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

读取云数据库照片数据

以下代码实现了在页面加载完成后，调用find接口请求数据库，根据查询出的相册id查询相册下的照片信息。

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

选择本地图片

以下代码实现了调用小程序的my.chooseImage接口拍照或从本地相册中选择图片，然后调用file.uploadFile接口将图片上传至小程序Serverless的文件服务中。更多信息请参见my.chooseImage和uploadFile。

  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);
      },
    });
  },

将图片保存到数据库

以下代码实现了将包括图片的上传路径、图片描述等图片信息保存到云数据库photos集合中。

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