个人相册小程序开发

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 本教程介绍如何使用小程序Serverless服务开发一款简单的个人相册小程序。图片存储,是所有应用开发里最常见的场景之一。借助小程序云开发能力,可以提升功能开发效率,提高数据隐私保护能力。

本章内容出自《15分钟打造你自己的小程序》电子书,点击下载完整版

个人相册小程序开发

本教程介绍如何使用小程序Serverless服务开发一款简单的个人相册小程序。图片存储,是所有应用开发里最常见的场景之一。借助小程序云开发能力,可以提升功能开发效率,提高数据隐私保护能力。

步骤一:开发支付宝小程序

请参考以下步骤,开发支付宝小程序项目:

  1. 打开小程序开发者工具。
  2. 在左侧导航栏选择支付宝 > 小程序
  3. 单击模板选取,然后单击开放能力页签,选择个人相册模板并单击下一步

image.png

  1. 设置项目名称和路径,然后单击完成
  2. 打开手机支付宝App扫描弹出的登录二维码。登录后,选择已创建的支付宝小程序应用完成关联,然后单击确定
  3. 当提示绑定阿里云账号时,单击前往绑定阿里云账号,然后在打开的验证页面选择一种账号验证方式并完成验证。或右键单击左侧的server|未关联目录,然后选择关联Serverless

说明:确保您要绑定的阿里云账号已关联支付宝账号。如果尚未关联,在阿里云账号页面,单击第三方账号绑定绑定支付宝。
image.png

  1. 在项目文件列表中找到app.js文件,配置以下信息,然后保存。

    • appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
    • spaceIdclientSecretendpoint小程序Serverless控制台创建服务空间后可以获得。

image.png

步骤二:调试小程序

打开小程序模拟器,在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意
image.png

小程序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
// client/app.js
async onSubmit() {
await mpserverless.user.authorize({
      authProvider: 'alipay_openapi',
      // authType: 'anonymous'
})
},  
  • 全局使用serverless
    在小程序Serverless客户端SDK初始化完成后,可以将实例化的mpserverless对象放入App全局对象中,这样SDK就可以全局使用了。
// client/app.js
App({
  mpserverless,
}); 

当需要使用SDK时只需从全局对象中获取mpserverless,就可以调用了。
以下示例实现了在其他文件中调用小程序Serverless的数据库服务,向files集合中插入了一条数据。

// 其他文件调用
const { mpserverless } = getApp()
// 添加文件数据
mpserverless.db.collection('files').insertOne( { name: '数据表名称', userId: '数据表ID' })    
  • 读取文件数据
    以下代码实现了在页面加载完成后,调用find接口请求数据库,查询当前用户下的相册信息,更多find接口信息请参见find
async onReady() {
  const result = await mpserverless.db.collection('files').find({ userId: '用户id' })
  this.setData({
      files: result.result || [],
  })
},     
  • 选择本地图片
    以下代码实现了调用小程序的my.chooseImage接口拍照或从本地相册中选择图片,然后调用file.uploadFile接口将图片上传至小程序Serverless的文件服务中。更多信息请参见my.chooseImageuploadFile
  attach() {
    // 选取照片   
    my.chooseImage({
      chooseImage: 1,
      success: res => {
        const path = res.apFilePaths[0];
        const options = {
          filePath: path,
          headers: {
            contentDisposition: 'attachment',
          },
        };
         // 上传图片
        mpserverless.file.uploadFile(options).then((image) => {
          const { imgs } = this.data
          imgs.push(image.fileUrl)
          this.setData({
            imgs,
          });
        }).catch(console.log);
      },
    });
  },     
  • 将图片保存到数据库
    以下代码实现了将包括图片的上传路径、图片描述等图片信息保存到云数据库photos集合中。
  async submit() {
    const obj = { urls: '图片路径', details: '图片描述', fileId: '文件id' }
    await mpserverless.db.collection('photos').insertOne(obj)
    my.navigateBack()
  },
相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
28天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
9天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
96 18
|
27天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
22天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
2月前
|
人工智能 JSON 小程序
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
随着AI技术的发展,各大厂商推出的如“乐动力”、“天天跳绳”等AI运动APP,使得云上运动会、线上健身等概念风靡一时。本文将引导读者从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”,介绍人体姿态检测规则、规则编写语法、执行检测规则运算及姿态检测实战等内容,助力开发者轻松实现AI运动小程序的开发。
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
|
23天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。