前言
这次的端云一体化活动同样是开发鸿蒙应用或者元服务，上次的端云一体化活动，我也参加了，当时简单入手，在原有模板的基础上开发了一个元服务，那个完全不算一个正常的项目，充其量只能称呼为一个测试DEMO。通过那个DEMO，我熟悉了端云一体化开发的步骤，工具的用法，服务卡片的开发和交互也都熟悉了。但当时受限于个人的技术水平，没能开发一个像样的元服务提交发布，但当时有了一个简单的构思，畅想了一下自己会做一个什么样的元服务，当时构思的项目是“快递盲盒”，这个快递装载着陌生朋友的心情，所以叫它盲盒。碍于当时个人对端云一体化的云端还不够熟悉，手边也没有支持API9的真机可以调试，所以当时研究了几天，感觉无望，毅然放弃了。时隔了小半年的时间，通过不断的学习官网的文档和别人的帖子，发现在自己项目中集成serverless云服务真是并不复杂，一旦搞懂，就所向披靡了，感觉开发的道路豁然开朗，有任何想法都可以去试试手了。这次，为了圆梦，我就把上次那个想法开发出来了，做成了一个元服务，并成功上架了。这个元服务就是“心情盲盒”，使用的人不多，可能使用价值和受欢迎程度都还不够，不要紧，这次的经历，坚定了我克服困难勇往直前的信念，也大大提高了自己遇到问题时分析问题和解决问题的能力。
简介
“心情盲盒”这款元服务，主要包含两个模块，服务卡片和应用主页面。
服务卡片查看随机抽取的陌生人的心情寄语，用户点击卡片盒子边缘空白处，可以改变盒子的颜色，点击盒子会触发盒子旋转，同时获取别人的心情，心情分为喜怒哀乐四种，分别以不同的表情图像显示，图像下会显示对方的手机号末尾4位数字，卡片中间显示心情详情，下方是功能操作按钮，可以继续获取，或者发布一个心情。
应用主页面中，用户可以输入自己的心里话，并选择此刻的心情，然后发布。
因为这个元服务的业务功能定义为盲盒，所以查看者和发布者都是匿名的。盲盒信息是每日自动更新的，因为每个人每天都会有新的心情，所以服务端只保存了当天的心情数据，昨天和之前的会被服务器自动删除，到了明天今天的心情数据也会消失。
本篇文档简单介绍一下心情盲盒的功能和实现过程。
预览
功能介绍
盒子颜色可以随机改变，点击服务卡片中盒子外的部分，盒子颜色和背景底色都会跟随改变。
点击盒子，触发盒子旋转动画，同时跳转到新的界面。
获取到心情数据后，会直接显示心情信息。
上方的人脸表情是代表喜怒哀乐心情的，看上面这样子好像是有些不高兴，下方的小数字代表发布者手机号尾部4位，说明这句心里话是尾号6236的朋友发布的。中间的黑色文字就是对方说的话。点击“再换个人”，会重新返回盲盒界面，同时颜色随机改变，再点击盲盒，又会继续获取新的心情信息。不论你登录与否，都可以查看别人的心情，但要想发表自己的心情，就需要通过手机号进行注册一下了。
有时，也可能你是当天第一个查看盲盒的人，没有新数据就会显示如下界面，此时，你可以发表一个心情，作为首发哦。或者刷新一下，看看是不是因为网络不太好的原因没获取到数据。
点击发表之后，会出现如下的发表界面。
在我想说中，输入自己想说的心里话，在心情一栏，选择自己此刻的比较接近的心情，然后点击“发布盲盒”就可以了。
发布成功后，会提示发布成功，用户可以选择“再发一个”继续发表心情，或者“以后再说”关闭发表界面。
如果用户首次使用，没有登录，会提示如下界面，让用户进行登录。
勾选底部的“阅读并同意”的方框，就可以进行登录操作了。
其他玩法
基于鸿蒙系统对卡片支持的多功能性，我们可以添加多个心情盲盒服务卡片，构成一个卡片墙，或者把多个心情盲盒堆叠在一起。
盲盒墙效果：
盲盒堆叠效果：
代码实现
服务卡片通过message类型的action通知EntryFormAbility获取新数据。
async getMood() {
postCardAction(this, {
'action': 'message',
'params': {
}
});
}EntryFormAbility在onFormEvent中处理message类型消息，并读取云数据库。
async onFormEvent(formId, message) {
// Called when a specified message event defined by the form provider is triggered.
initialize(this.context, json);
try {
const context = this.context
const value = await context.resourceManager.getRawFileContent('schema.json');
let json: string = buffer.from(value).toString("utf8");
let objectTypeInfo: ObjectTypeInfo = JSON.parse(json);
...
let agcDataBase = cloud.database({ objectTypeInfo: objectTypeInfo, zoneName: "MessageDB" })
const resultArray = await (agcDataBase as Database)
.collection(Message)
.query()
.equalTo('insertDate', curDate)
.orderByDesc("id")
.limit(100, 0)
.get();
...
} catch (err) {
}
}然后将结果反馈给服务卡片。
// updateform
let formData = {
'user': msg.getUser(),
'content': msg.getContent(),
'mood': moodIdx,
};
let formInfo = formBindingData.createFormBindingData(formData)
formProvider.updateForm(formId, formInfo).then((data) => {
console.info('FormAbility updateForm success.' + JSON.stringify(data));
}).catch((error) => {
console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
})用户发布心情数据，直接更新云数据库。
const value = await context.resourceManager.getRawFileContent('schema.json');
let json: string = buffer.from(value).toString("utf8");
let schema: ObjectTypeInfo = JSON.parse(json);
const record = await cloud.database({ objectTypeInfo: schema, zoneName: "MessageDB" })
.collection(Message)
.upsert({
"user": phone,
"content": content,
"mood": mood,
"insertDate": curDate
});用户登录的实现。
Login({
modes: [AuthMode.PHONE_VERIFY_CODE],
onSuccess: async (user: AuthUser) => {
// this.shownPartIndex = 2;
this.isShowButton = false
AppStorage.Set<AuthUser>('user', user);
this.currentUser = AppStorage.Get<AuthUser>('user');
if (this.currentUser != null && this.currentUser != undefined) {
let agcUserExtra = await this.currentUser.getUserExtra();
this.creatTime = agcUserExtra.getCreateTime()
this.lastLogin = agcUserExtra.getLastSignInTime()
router.replaceUrl({
url: 'pages/Home'
})
}
}
}) {
if (this.isShowButton && this.isAccept) {
Button({ type: ButtonType.Normal }) {
Text($r('app.string.auth_service_login_button_text'))
.fontColor($r('app.color.white'))
}
}
}用户登出的实现。
async logout() {
cloud.auth().signOut().then(() => {
this.isShowButton = true
this.currentUser = null
}).catch((error: Object) => {
});
}用户注销的实现。
deleteUser() {
cloud.auth().deleteUser().then(() => {
this.isShowButton = true
this.currentUser = null
}).catch((err: Object) => {
})
}总结
通过这次实践，熟悉了端云一体化新模板的功能，也熟悉了云数据库、云函数和用户认证的用法，为以后开发其他项目打了一个基础。
