基于小程序云Serverless开发微信小程序

时间 2020-08-13

标签基于程序 serverless 开发微信繁體版

原文原文链接

本文主要以使用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何使用小程序云Serverless开发微信小程序。记事本小程序的开发涉及到云函数调用、云数据库存储、图片存储等功能，较好地展现了小程序云Serverless服务在实际研发场景中如何帮助开发者提高研发效率。html

1、准备工做

在开始前，确保已经完成如下准备工做：
一、注册微信开放平台帐号，并建立微信小程序，得到微信小程序AppID；
二、下载并安装微信开发者工具；
三、已安装 nodejs 开发环境。node

2、操做步骤

2.一、步骤一开通小程序云服务

阿里云帐号首次使用小程序云服务时，须要开通小程序云服务：
一、登陆小程序云控制台。
二、在产品开通页面，勾选服务协议并单击当即开通。
数据库

2.二、步骤二建立服务空间

开发小程序用到的小程序云Serverless相关资源，如云函数、数据库、文件存储，都以服务空间的维度进行管理。每一个服务空间都有一个全局惟一的Space ID，小程序在使用云资源时，经过这个Space ID关联到具体的云资源。
咱们经过如下步骤建立服务空间并得到相关配置：
一、登陆小程序云控制台。
二、在左侧导航栏选择小程序Serverless > 服务空间管理。
三、单击建立服务空间，填写服务空间名称和描述，单击肯定。
四、建立成功后，单击服务空间右侧的详情可查看Space ID、Secret和API Endpoint、文件上传Endpoint等信息，并将这些信息保存下来待用。
小程序

2.三、步骤三建立微信小程序并配置域名白名单

微信会对小程序须要经过网络访问的服务提供方进行白名单限制，咱们还须要配置小程序服务器域名白名单：
一、登陆微信小程序公众号平台。
二、在左侧导航栏选择开发，单击开发设置页签。
微信小程序

三、在服务器域名区域，单击修改，根据提示从新扫码进行身份认证。
四、根据步骤二中保存的服务空间信息配置request合法域名（api.bspapp.com）和 uploadFile合法域名，确认无误后保存并保存。api

配置说明：
request合法域名：API Endpoint。
uploadFile合法域名： https://文件上传Endpoint。

2.四、步骤四在小程序云控制台添加微信小程序凭证

咱们还须要在小程序云控制台添加微信小程序凭证：
一、在小程序云控制台的左侧导航栏，选择小程序Serverless > 设置。
二、选择微信页签，单击添加密钥，输入AppID和App Secret，单击肯定。（微信小程序AppID和App Secret获取方式请参考连接，请妥善保存小程序的App Secret）

服务器

2.五、步骤五初始化小程序工程

一、建立小程序工程

在微信开发者工具中建立新项目，填写 AppID，并勾选“不使用云服务”。
微信

二、IDE配置

在微信小程序IDE的右上角，单击详情，勾选加强编译。
网络

在 1.02.1904282 以及以后版本的微信开发者工具中，增长了加强编译的选项来加强ES6转ES5的能力，启用后会使用新的编译逻辑以及提供额外的选项供开发者使用。微信开发

三、引入小程序云Serverless客户端SDK

在使用小程序云Serverless服务前，咱们须要在小程序中安装小程序云Serverless客户端SDK并初始化。小程序Serverless客户端SDK的更多信息请参见安装客户端SDK2.3版本。
对于微信小程序端，咱们须要直接引入SDK源文件。将下载后获得的 mpserverless.js 保存在此项目文件的文件夹中，建议单独保存。如本项目中存储路径: /sdk/mpserverless.js 。

四、进行SDK初始化

打开工程根目录的 app.js 文件，在构造App对象以前，添加以下代码：

const MPServerless = require('/sdk/mpserverless.js');   // 此路径即为上述引入mpserverless.js文件的保存路径
const mpServerless = new MPServerless({
  uploadFile: wx.uploadFile,
  request: wx.request,
  getAuthCode: wx.login,
  getFileInfo: wx.getFileInfo,
  getImageInfo: wx.getImageInfo,
}, {
  appId: '', // 小程序应用标识
  spaceId: '', // 服务空间标识
  clientSecret: '', // 服务空间 secret key
  endpoint: '', // 服务空间地址，从小程序 serverless 控制台处得到
});

并根据咱们以前获得的 appId、spaceId、clientSecret、endpoint 参数填充单引号里的内容。

而后，咱们经过以下方式进行登陆受权并得到用户身份信息：

const { mpServerless } = getApp();
await mpServerless.user.authorize({
  authProvider: 'wechat_openapi',
});

const getUserInfoRes = await mpServerless.user.getInfo();
if (getUserInfoRes.success) {
  // 得到用户
  const userInfo = getUserInfoRes.result.user;
}

获取到的 userInfo 中有 userId 字段，能够惟一标识用户身份。

2.六、步骤六服务空间配置

在初始化小程序云Serverless完成后，咱们就能够在小程序中使用Serverless相关服务了。咱们先登陆小程序云Serverless控制台，进行数据库、云存储、云函数的配置。

一、建立数据表并配置权限

小程序Serverless服务使用的是分布式文件存储数据库MongoDB，以JSON格式存储数据。一个数据库中能够包含多个数据表，咱们存储数据以前须要建立相应数据表。

在小程序云控制台的左侧导航栏，选择小程序Serverless > 云数据库。
单击新建数据表按钮 + ，输入数据表名称（以myNoteBook为例）后单击确认。
新建数据库“myNoteBook”后，单击设置数据库权限按钮进入修改数据库权限界面，将write权限修改成true。

二、配置云存储访问权限

本例中记事本功能涉及图片的上传，因此咱们须要配置云存储的访问权限：

在小程序云控制台的左侧导航栏，选择小程序Serverless > 云存储。
单击选择权限页签进入权限设置，并设置云存储的读写权限。此时默认权限为数据建立者可写。

三、建立云函数并上传

云函数（FaaS）是一段运行在云端的、轻量的、无关联的、而且可重用的代码。无需管理服务器，只需编写和上传代码，便可得到对应的数据结果。使用云函数可使企业和开发者不须要担忧服务器或底层运维设施，也可使代码进一步解耦，增长其重用性。在小程序端只需引入小程序云Serverless的SDK，在应用的上下文中进行简单配置，便可调用云函数。

在调用以前，咱们须要编写并上传云函数。

在本例中，咱们会建立一个名为 publish 的云函数，它的逻辑是传入一个记事条目，把这个记事条目存储到云数据库中。

登陆小程序云控制台，在对应的服务空间下，新建云函数。添加成功后能够在控制台查看云函数的名称、备注等信息。
咱们在本地开发js代码，实现上述逻辑，保存为一个简单的 index.js 文件，如：

'use strict';

module.exports = async function (ctx) {
  return await ctx.mpserverless.db.collection('myNoteBook').insertOne({
    "title": ctx.args.title,
    "txt": ctx.args.txt,
    "pic": ctx.args.pic,
    "date": ctx.args.date,
    "userId": ctx.args.userId,
  });
};

如上述，这个js文件实现了一个简单的逻辑：传入记事条目，而后存储到云数据库中。

把index.js文件放在文件夹 publish 中，并将此文件夹压缩成为 publish.zip 。
在小程序云控制台的云函数页面，单击云函数 publish 名称或左右管理进入当前隐函数的详情页面，单击上传js包上传 publish.zip ，显示上传成功后单击代码部署。

代码包上传说明：
• 代码包的名称必须和在控制台上建立的函数名称一致。
• 代码包必须是.zip文件。
• 上传的代码包必须包含index.js文件。

出现以下界面说明部署成功（注意右上角“部署成功”的提示）：

若是您须要更新云函数，只须要点击“更新js包”按钮并上传新的 publish.zip 文件便可。

说明：只修改本地的文件是不能修改云函数内容的。每一次试图修改云函数，都须要从新制做压缩包并在后台云函数点击“更新js包”。

2.七、步骤七小程序开发

一、首页获取记事列表数据

咱们能够调用小程序云Serverless SDK的数据库接口获取数据：

const app = getApp();
const { mpServerless } = app;
const noteBookCollection = mpServerless.db.collection('myNoteBook');
const PAGE_SIZE = 5;

Page({
  ...
  fetchPageData: async function () {
    noteBookCollection.find({
      "userId": app.globalData.userId,  // 假设咱们已经取得userId并保存在globalData中
    }, {
      sort: {
        date: -1,
      },
      skip: (this.data.pageNum < 0) ? 0 : PAGE_SIZE * this.data.pageNum,
      limit: PAGE_SIZE,
    })
    .then((res) => {
      if (res.success) {
        // 更新列表
        this.setData({
          datalist: this.data.datalist.concat(res.result),
        });
      } else {
        // 失败提示
      }
    });
  },
  ...
})

二、新增记事条目

新增一个记事条目时，只需调用咱们已经在上述中建立的云函数：

var util = require('../../utils/util.js');
const app = getApp();
const { mpServerless } = app;

Page({
  publishNote: async function() {
    mpServerless.function.invoke('publish', {
      "date": util.formatTime(new Date()), // 获取时间信息
      "userId": app.globalData.userId, // 小程序用于userId
      "title": // 标题
      "txt": // 内容
      "pic": // 上传得到的图片地址
    })
    .then((res) => {
      if (res.success) {
        // 上传成功
      } else {
        // 失败提示
      }
    });
  }
})

在本小程序中，还能够为一次记事附加一张图片。咱们先上传图片，而后把上传后得到的连接附带在记事条目中便可。上传逻辑参考：

var util = require('../../utils/util.js');
const app = getApp();
const { mpServerless } = app;

Page({
  ...
  uploadImg: function () {        
    wx.chooseImage({
      success: ((res) => {
        const path = res.tempFilePaths[0];
        const options = {
          filePath: path,
          headers: {
            contentDisposition: 'inline',
          },
        };

        mpServerless.file.uploadFile(options).then((image) => {
             // 得到图片路径
        });
      })
    });
  },
  ...
})

三、获取记事详情

在首页点击对应记事本条目时，将跳转到记事详情页。咱们须要在页面跳转时传入对应记事的_id。

// pages/index/index.wxml

……
  <navigator url="/pages/detail/detail?dataId={{datalist[index]._id}}" class="txt">
    ……
  </navigator>
……

利用传入的id信息，在detail页面就能够进行对应的信息拉取：

// pages/detail/detail.js
var util = require('../../utils/util.js');
const app = getApp();
const noteBookCollection = app.mpServerless.db.collection('myNoteBook');

Page({
    onLoad: function (options) {
    noteBookCollection.find({
      _id: options.dataId,
    })
    .then((res) => {
      if (res.success) {
        this.setData({
          id: options.dataId,
          txt: res.result[0].txt,
          pic: res.result[0].pic,
          date: res.result[0].date,
          title: res.result[0].title,
        });
      } else {
        // 失败提示
      }
    });
  },
})

四、删除记事条目

在首页浏览时，能够点击删除按钮直接删除记事条目。删除时调用代码以下：

// pages/index/index.js
const app = getApp();
const noteBookCollection = app.mpServerless.db.collection('myNoteBook');

Page({
  ...
    delete(event) {
    const deleteAction = () => {
      const id = this.data.datalist[event.currentTarget.id]._id;
      noteBookCollection.deleteOne({
        _id: id,
      })
      .then((res) => {
        if (res.success) {
          wx.showToast({
            title: '删除成功',
          });
          // 刷新页面
        }
      });
    }

    wx.showModal({
      title: '提示',
      content: '请问确认要删除吗？',
      success: ((res) => {
        if (res.confirm) {
          deleteAction();
        }
      })
    })
  },
})

3、成果展现

小程序页面展现：

4、总结

至此，咱们已经基于小程序云Serverless提供的云函数、云数据库、云存储等BaaS能力，快速实现了一个记事本微信小程序的开发。在这个过程当中咱们体会到，使用小程序云Serverless以后，咱们经过API方式便可方便地获取云函数、数据存储、文件存储、音视频、图像处理等服务，不须要关心服务器或底层运维设施，能够更专一于代码和业务自己，大幅提高研发效率。

钉钉搜索35248489，加入阿里云云原生应用研发平台EMAS技术交流群，探讨最新最热门的应用研发技术和实践。（或钉钉扫码加入）