本章内容出自《15分钟打造你自己的小程序》电子书，点击下载完整版
快速搭建个人云笔记小程序
本教程介绍如何使用小程序Serverless的数据存储服务开发一款简单的个人云笔记小程序。数据存储服务是基于MongoDB托管在云端的数据库，数据以JSON格式存储。作为开发者，您可以在客户端内直接操作数据，也可以在云函数中读写数据。
步骤一：开发支付宝小程序
请参考以下步骤，开发支付宝小程序项目：
- 单击这里下载小程序模板代码，并在本地解压。
- 打开小程序开发者工具，然后选择支付宝 > 小程序。
- 单击打开项目选择已解压的小程序项目。
- 在打开本地项目页面，单击打开。
- 打开手机支付宝App扫描弹出的登录二维码。登录后，选择已创建的支付宝小程序应用完成关联，然后单击确定。
- 当提示绑定阿里云账号时，单击前往绑定阿里云账号，然后在打开的验证页面选择一种账号验证方式并完成验证。或右键单击左侧的server|未关联目录，然后选择关联Serverless。
说明：确保您要绑定的阿里云账号已关联支付宝账号。如果尚未关联，在阿里云账号页面，单击第三方账号绑定绑定支付宝。
-
在项目文件列表中找到app.js文件，配置以下信息，然后保存。
- appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
- spaceId、clientSecret和endpoint在小程序Serverless控制台创建服务空间后可以获得。
步骤二：调试小程序
打开小程序模拟器，在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意。
小程序Serverless代码详解
- 初始化
在使用小程序Serverless服务前，需要您在小程序中安装小程序Serverless客户端SDK并初始化。小程序Serverless客户端SDK的更多信息请参见安装客户端SDK2.2版本。
// client/app.js
import MPServerless from '@alicloud/mpserverless-sdk';
const mpserverless = new MPServerless({
uploadFile: my.uploadFile,
request: my.request,
getAuthCode: my.getAuthCode,
}, {
appId: ' ', // 小程序应用标识
spaceId: ' ', // 服务空间标识
clientSecret: ' ', // 服务空间 secret key
endpoint: ' ' // 服务空间地址，从小程序Serverless控制台处获得
}); - 第一次进入小程序时添加授权
在调用小程序Serverless服务前，需要先调用authorize接口请求授权，支付宝小程序的授权请求参数authProvider应为alipay_openapi， 更多authorize接口信息请参见authorize。
onLaunch(options) {
//授权
mpserverless.user.authorize({
authProvider: 'alipay_openapi',
// authType: 'anonymous'
});
},- 页面初始化数据
在页面显示时请求数据库note，过滤出parentId是当前目录的ID的节点。更多数据库查询接口信息请参见find。
onShow() {
mpserverless.db.collection('note').find({ parentId: this.data.parentId }).then((res) => {
this.setData({ items: res.result });
console.log(res);
}).catch(console.error);
},- 新增笔记
以下代码实现了在数据库note中新增笔记，插入成功后刷新列表页。更多insertOne接口信息请参见insertOne。
if (this.data.newNoteName != '') {
mpserverless.db.collection('note').insertOne({
name: this.data.newNoteName,
type: Number(this.data.newNoteType),
parentId: this.data.parentId,
content: ''
}).then(res => {
console.log(res);
if (res.success) {
this.onShow();
};
}).catch(console.error);
};- 更新笔记
以下代码实现了根据文档ID异步更新文档内容，更多updateOne接口信息请参见updateOne。
async updateData(currentData) {
this.setData({
note: currentData,
});
await mpserverless.db.collection('note').updateOne({
_id: this.data.id
}, {
$set: {
parentId: currentData.parentId,
type: 0,
name: currentData.name,
content: currentData.content
}
})
.then(() => { })
.catch(console.error);
},- 目录删除
以下代码实现了删除目录节点的功能，先查询该节点下是否有子节点，如果没有则执行删除，从而实现只能删除目录树的叶子节点。更多deleteOne接口请参见deleteOne。
// 执行删除操作，只允许删除叶子节点
mpserverless.db.collection('note').find({
parentId: parentId
}).then((res) => {
if (res.success && res.affectedDocs == 0) {
mpserverless.db.collection('note').deleteOne({
_id: parentId
}).then((res) => {
console.log(res);
my.showToast({
type: 'success',
content: '删除成功',
duration: 3000,
success: () => {
my.navigateBack();
},
});
});
} else {
my.showToast({
type: 'fail',
content: '该目录下存在子节点，请先删除子节点',
duration: 3000,
success: () => { },
});
};
});
