本章内容出自《15分钟打造你自己的小程序》电子书， 点击下载完整版

开发待办事项小程序

本教程介绍如何使用阿里云小程序Serverless服务开发一个待办事项的支付宝小程序。

步骤一：开发支付宝小程序

请参考以下步骤，开发支付宝小程序项目：

1. 单击 这里 下载小程序模板代码，并在本地解压。
2. 打开小程序开发者工具，然后选择支付宝 > 小程序。
3. 单击打开项目选择已解压的小程序项目。

   

4. 在打开本地项目页面，单击打开。

   

5. 打开手机支付宝App扫描弹出的登录二维码。登录后，选择已创建的支付宝小程序应用完成关联，然后单击确定。
6. 右键单击左侧的server|未关联目录，然后选择关联Serverless。
7. 在项目文件列表中找到app.js文件，配置以下信息，然后保存。
   • appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
   • spaceId、clientSecret和endpoint在 小程序Serverless控制台 创建服务空间后可以获得。

     

步骤二：调试小程序

打开小程序模拟器，在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意。

小程序Serverless代码详解

• SDK初始化

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

  安装客户端SDK2.2版本 。

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

App({
  userInfo: null,
  mpServerless,
});           

• 页面数据初始化

  在页面渲染时进行用户授权并调用user.getInfo接口获取用户ID信息，通过用户ID向云数据库查询当前用户的待办事项列表。更多获取用户信息接口请参见

  user.getInfo

async onShow() {
    if (!this.data.user.userId) {
      // 调用user.authorize进行用户授权
      await app.mpServerless.user.authorize({
        authProvider: 'alipay_openapi',
      });
      // 调用user.getInfo获取用户信息
      const res = await app.mpServerless.user.getInfo().catch(console.error);
      if (res.success) {
        this.setData({
          user: {
            userId: res.result.user.userId,
          },
        });
      }
    }
    this.loadTodoList();
  },           

• 获取用户的待办事项列表

  调用find方法查询todos数据库中指定用户ID的待办事项信息，并将返回结果按创建时间降序排列。更多数据库查询接口信息请参见

  find

// 获得数据并加载当前用户 todo 列表
loadTodoList(){
  app.mpServerless.db.collection('todos').find(
    { userId: this.data.user.userId },
    { sort: { createTime: -1 } },
  ).then(({ result: todos }) => {
    this.setData({ todos });
  }).catch(console.error);
},           

• 删除待办事项

  根据列表ID和用户ID删除待办事项，更新删除接口信息请参见

  deleteOne

// 删除当前的列表
deleteById(_id){
  const that = this;
  return new Promise(function (resolve, reject) {
    // 确认和删除图片
    my.confirm({
      title: '删除 todo',
      content: '是否确认删除?',
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      success: (result) => {
        if (result.confirm) {
          app.mpServerless.db.collection('todos').deleteOne({
            _id,
            userId: that.data.user.userId,
          }).then(() => {
            resolve({ success: true });
          }).catch(err => {
            console.error(err);
            reject({ success: false });
          });
        }
      },
    });
  });
},           

• 完成待办事项

  根据列表ID将待办事项的状态更新为已完成，并记录完成时间。更多数据更新接口信息请参见

  updateOne

// 根据 id 改变当前 todo 状态
changeComplate(_id, completed){
  return new Promise(function (resolve, reject) {
    app.mpServerless.db.collection('todos').updateOne(
      { _id },
      {
        $set: {
          completed,
          completeTime: completed ? new Date() : false,
        }
      }
    ).then(() => {
      resolve({ success: true });
  }).catch(err => {
      console.error(err);
      reject({ success: false });
    });
  });
 }
});           

• 新增待办事项

  调用insertOne方法向数据库todos中新增一条待办事项。更多新增数据接口信息请参见

  insertOne

// 写入数据库 obj，当前用户增加一条 todo
addTodo(){
  const that = this;
  return new Promise(function (resolve, reject) {
    app.mpServerless.user.getInfo().then((res) => {
      if (res.success) {
        app.mpServerless.db.collection('todos').insertOne({
          text: that.data.inputValue,
          iconUrl: that.data.iconUrl ? that.data.iconUrl : false,
          userId: res.result.user.userId,
          completed: false,
          createTime: new Date(),
          completeTime: false,
        }).then(() => {
          resolve({ success: true });
        }).catch(err => {
          console.error(err);
          reject({ success: false });
        });
      }
    }).catch(err => {
      console.error(err);
      reject({ success: false });
    });
  });
}