关于java:基于小程序云Serverless开发微信小程序

本文次要以应用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何应用小程序云Serverless开发微信小程序。记事本小程序的开发波及到云函数调用、云数据库存储、图片存储等性能，较好地展现了小程序云Serverless服务在理论研发场景中如何帮忙开发者晋升研发效率。

一、筹备工作

在开始前，确保曾经实现以下筹备工作：
1、注册微信开放平台账号，并创立微信小程序，取得微信小程序AppID；
2、下载并装置微信开发者工具；
3、已装置 nodejs 开发环境。

二、操作步骤

2.1、步骤一开明小程序云服务

阿里云账号首次应用小程序云服务时，须要开明小程序云服务：
1、登录小程序云控制台。
2、在产品开明页面，勾选服务协定并单击立刻开明。

2.2、步骤二创立服务空间

开发小程序用到的小程序云Serverless相干资源，如云函数、数据库、文件存储，都以服务空间的维度进行治理。每个服务空间都有一个全局惟一的Space ID，小程序在应用云资源时，通过这个Space ID关联到具体的云资源。
咱们通过以下步骤创立服务空间并取得相干配置：
1、登录小程序云控制台。
2、在左侧导航栏抉择小程序Serverless > 服务空间治理。
3、单击创立服务空间，填写服务空间名称和形容，单击确定。
4、创立胜利后，单击服务空间右侧的详情可查看Space ID、Secret和API Endpoint、文件上传Endpoint等信息，并将这些信息保留下来待用。

2.3、步骤三创立微信小程序并配置域名白名单

微信会对小程序须要通过网络拜访的服务提供方进行白名单限度，咱们还须要配置小程序服务器域名白名单：
1、登录微信小程序公众号平台。
2、在左侧导航栏抉择开发，单击开发设置页签。

3、在服务器域名区域，单击批改，依据提醒从新扫码进行身份认证。
4、依据步骤二中保留的服务空间信息配置request非法域名（api.bspapp.com）和 uploadFile非法域名，确认无误后保留并保留。

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

2.4、步骤四在小程序云控制台增加微信小程序凭证

咱们还须要在小程序云控制台增加微信小程序凭证：
1、在小程序云控制台的左侧导航栏，抉择小程序Serverless > 设置。
2、抉择微信页签，单击增加密钥，输出AppID和App Secret，单击确定。（微信小程序AppID和App Secret获取形式请参考链接，请妥善保留小程序的App Secret）

2.5、步骤五初始化小程序工程

1、创立小程序工程

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

2、IDE配置

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

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

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

在应用小程序云Serverless服务前，咱们须要在小程序中装置小程序云Serverless客户端SDK并初始化。小程序Serverless客户端SDK的更多信息请参见装置客户端SDK2.3版本。
对于微信小程序端，咱们须要间接引入SDK源文件。将下载后失去的 mpserverless.js 保留在此我的项目文件的文件夹中，倡议独自保留。如本我的项目中存储门路: /sdk/mpserverless.js 。

4、进行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.6、步骤六服务空间配置

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

1、创立数据表并配置权限

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

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

2、配置云存储拜访权限

本例中记事本性能波及图片的上传，所以咱们须要配置云存储的拜访权限：

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

3、创立云函数并上传

云函数（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.7、步骤七小程序开发

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

咱们能够调用小程序云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 {        // 失败提醒      }    });  },  ...})

2、新增记事条目

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

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) => {             // 取得图片门路        });      })    });  },  ...})

3、获取记事详情

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

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

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

// pages/detail/detail.jsvar 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 {        // 失败提醒      }    });  },})

4、删除记事条目

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

// pages/index/index.jsconst 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();        }      })    })  },})

三、成绩展现

小程序页面展现：

四、总结

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

钉钉搜寻35248489，退出阿里云云原生利用研发平台EMAS技术交换群，探讨最新最热门的利用研发技术和实际。（或钉钉扫码退出）