《五天玩转EMAS Serverless》——第五节 实战:小程序疫苗预约-文件存储与云调用【下】

本文涉及的产品
移动研发平台 EMAS,开发者版免费套餐
简介: 本文整理自EMAS Serverless讲师雨鸦,在《5天玩转EMAS Serverless训练营》的分享。本篇内容主要分为五个部分:1. 小程序图片API介绍2. 实战:个人信息头像修改3. 云调用介绍4. 实战:疫苗预约提醒推送5. 课程总结

接上篇:

https://developer.aliyun.com/article/1224106?spm=a2c6h.13148508.setting.27.4f394f0em1x0Jq

image.png

接下来,演示一下如何在小程序中进行云调用的集成以及如何借助云调用触发一条消息模板的推送。

 

如上图所示,首先,在支付宝小程序开发工具中添加云调用的依赖alipay-serverless-sdk,然后在代码中引入云调用,并调用云调用透出的init方法,传入Serverless SDK的实例完成初始化。

image.png

接下来,我们扩展第四节中编写的疫苗预约事件处理函数。在预约成功的分支下,我们扩展云调用能力发起模板推送的能力。

 

首先通过调用支付宝模板授权接口,注册和授权我们先前记录的消息模板。然后在授权成功的回调中,通过模板推送的云调用方法:cloud.marketing.templateMessage.send(),完成疫苗预约提醒的用户推送。

 

模板推送云调用接口主要接受四个参数

 

参数toUserId,代表发送消息的支付宝账号;

参数userTemplateId,代表用户申请的模板id号;

参数page,代表用户点击推送信息后小程序页面跳转地址;

参数data,代表关键字占位符数据。

image.png

image.png

在支付宝真机调试下,我们点击「立即预约」后,即可看到支付宝的消息盒子中增加了一条疫苗预约信息。

 

五、 课程总结

image.png

本节课程主要分为两部分。

 

第一部分是学习云存储。使用云存储的关键是,需要了解图片本地临时地址和云存储接口返回的网络地址之间的区别。本地地址是由本地I/O,通过小程序的图片API产生的。网络地址是云存储通过本地图片,上传到Serverless后台,为图片创一个网络地址。

 

第二部分是学习云调用。介绍了支付宝的开放能力。实际演示了推送能力的集成链路以及消息模板的开通链路,并结合疫苗预约小程序通过这两条链路实现了疫苗预约消息的用户推送。

 

相关文章
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
364 0
|
2月前
|
消息中间件 弹性计算 关系型数据库
体验函数计算:高效处理多媒体文件的真实感受与实战总结
该方案在引导和文档方面做得较为详尽,仅在事件驱动机制部分略显简略。部署和代码示例实用,但需注意内存配置以避免超时。使用体验方面,函数计算表现出色,尤其在高并发场景下,显著提升了应用稳定性和成本效益。云产品如OSS、MNS等与函数计算配合流畅,ECS和RDS表现稳健。总体而言,这套方案弹性好、成本低,特别适合应对高并发或流量不确定的场景,值得推荐。
70 24
|
2月前
|
缓存 前端开发 JavaScript
|
4月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
228 0
【微信小程序开发实战项目】——个人中心页面的制作
|
4月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
444 1
|
4月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
416 0
|
4月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
275 0
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
89 0
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
245 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp

热门文章

最新文章

相关产品

  • 移动研发平台
  • 下一篇
    无影云桌面