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

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

一、 小程序图片API介绍

image.png

在正式介绍云存储相关的使用之前,我们首先学习一下小程序的图片选择API。

 

如上图所示,在支付宝小程序中,图片I/O的API是my.chooseImage,这个接口方法是一个标准的小程序回调接口。

 

在success参数中接收图片上传成功时的回调函数,sourceType默认camera和album。支付宝小程序默认从相册或拍照选择图片。success回调函数返回两个参数。apFilePaths是图片的路径数组,tempFiles是图片的本地临时文件列表。

image.png

然后,我们复习一下电子书第二节提到的云存储的API。其中,uploadFile负责从本地临时文件路径获取上传文件信息,然后上传文件到EMAS Serverless服务空间。

 

如上图所示,在小程序侧通过调用支付宝云原生的图片I/O接口,获得图片的本地临时地址。然后,通过图片本地临时地址,上传到EMAS Serverless端,并获得该图片的网络地址。

二、 实战:个人信息头像修改

image.png

接下来,我们在之前项目的基础上,具体实践一下云存储的实际应用,借助云存储的功能,我们实现疫苗预约小程序个人头像信息的修改。

 

如上图所示,我们为头像所在的图片标签添加点击事件,在事件处理回调函数中,从相册选择一张图片并上传到云存储中,并将云存储返回的图片网络地址作为用户头像信息的新地址更新本地和数据库状态。


接下篇:

https://developer.aliyun.com/article/1224106?groupCode=emas

相关文章
|
3月前
|
小程序 Serverless 开发工具
小程序开发问题之在小程序中安装并初始化小程序Serverless客户端SDK如何解决
小程序开发问题之在小程序中安装并初始化小程序Serverless客户端SDK如何解决
|
6月前
|
关系型数据库 Serverless 分布式数据库
Serverless 应用引擎常见问题之在抖音快手小程序上使用如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
|
6月前
|
小程序 IDE Serverless
【经验分享】支付宝小程序serverless云开发拓荒
【经验分享】支付宝小程序serverless云开发拓荒
176 6
|
6月前
|
Serverless PyTorch 文件存储
EMAS Serverless文件存储问题之上传视频真机报错如何解决
在进行Serverless应用开发和部署时,开发者可能会遇到不同类型的报错信息;本合集着重收录了Serverless环境中常见的报错问题及其解决策略,以助于开发者迅速诊断和解决问题,保证服务的连续性和可用性。
436 1
|
6月前
|
前端开发 JavaScript 小程序
亚马逊云科技 Build On -Serverless低代码平台初体验-快速完成vue前端订单小程序
亚马逊云科技 Build On -Serverless低代码平台初体验-快速完成vue前端订单小程序
90 0
|
存储 小程序 IDE
EMAS Serverless搭建《私人云相册》小程序
基于EMAS Serverless的云函数、云数据库、云存储等云服务能力一站式快速开发一个小程序。
EMAS Serverless搭建《私人云相册》小程序
|
小程序 IDE Serverless
基于小程序Serverless开发个人相册小程序
本场景基于小程序云Serverless+小程序开发者工具(IDE),快速搭建个人相册小程序
|
6月前
|
存储 人工智能 小程序
一天完成基于Serverless架构的头像漫画风处理小程序
我一直都想要有一个漫画版的头像,奈何手太笨,用了很多软件 “捏不出来”,所以就在想着,是否可以基于 AI 实现这样一个功能,并部署到 Serverless 架构上让更多人来尝试使用呢。
341 2
一天完成基于Serverless架构的头像漫画风处理小程序
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
226 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
49 0
微信小程序更新提醒uniapp

相关产品

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