乐趣区

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

jiezi

本文次要以应用小程序云 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 格局存储数据。一个数据库中能够蕴含多个数据表，咱们存储数据之前须要创立相应数据表。

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

2、配置云存储拜访权限

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

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

3、创立云函数并上传

云函数（FaaS）是一段运行在云端的、轻量的、无关联的、并且可重用的代码。无需治理服务器，只需编写和上传代码，即可取得对应的数据后果。应用云函数能够使企业和开发者不须要放心服务器或底层运维设施，也能够使代码进一步解耦，减少其重用性。在小程序端只需引入小程序云 Serverless 的 SDK，在利用的上下文中进行简略配置，即可调用云函数。

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

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

  1. 登录小程序云控制台，在对应的服务空间下，新建云函数。增加胜利后能够在控制台查看云函数的名称、备注等信息。
  2. 咱们在本地开发 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 文件实现了一个简略的逻辑：传入记事条目，而后存储到云数据库中。

  1. 把 index.js 文件放在文件夹 publish 中，并将此文件夹压缩成为 publish.zip。
  2. 在小程序云控制台的云函数页面，单击云函数 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.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 {// 失败提醒}
    });
  },
})

4、删除记事条目

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

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

三、成绩展现

小程序页面展现：


四、总结

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

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

退出移动版