本章内容出自《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 });
    });
  });
}