本章内容出自《15分钟打造你自己的小程序》电子书，点击下载完整版
开发待办事项小程序
本教程介绍如何使用阿里云小程序Serverless服务开发一个待办事项的支付宝小程序。
步骤一：开发支付宝小程序
请参考以下步骤，开发支付宝小程序项目：
- 单击这里下载小程序模板代码，并在本地解压。
- 打开小程序开发者工具，然后选择支付宝 > 小程序。
单击打开项目选择已解压的小程序项目。
- 在打开本地项目页面，单击打开。
- 打开手机支付宝App扫描弹出的登录二维码。登录后，选择已创建的支付宝小程序应用完成关联，然后单击确定。
- 右键单击左侧的server|未关联目录，然后选择关联Serverless。
-
在项目文件列表中找到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 });
});
});
}
