教你开发获取运动步数小程序

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 本教程介绍如何使用小程序Serverless服务开发一个支付宝运动小程序。借助运动数据功能,小程序在获得用户许可的情况下,可以获取用户最近30天内的运动步数,步数信息会在用户进入小程序时更新。

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

教你开发获取运动步数小程序

本教程介绍如何使用小程序Serverless服务开发一个支付宝运动小程序。借助运动数据功能,小程序在获得用户许可的情况下,可以获取用户最近30天内的运动步数,步数信息会在用户进入小程序时更新。

说明:本场景的小程序Demo需要使用蚂蚁金服开放平台企业账号。单击这里进行申请。

步骤一:签约支付宝开放能力

参考以下步骤,在蚂蚁金服开放平台签约运动数据能力:

  1. 使用支付宝开发者账号登录蚂蚁金服开放平台开发中心。
  2. 在左侧导航栏单击开发管理
    image.png
  3. 在小程序详情开发管理页面的能力列表中,单击右上角添加能力按钮,添加运动数据能力。

运动数据能力需要签约才能生效,在小程序上线后,单击功能列表右侧立即签约。签约完成后,需要1个工作日左右的审批时间(审批结果会以短信和邮件形式告知),审批成功后,功能状态会变为已生效
image.png

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

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

  1. 打开小程序开发者工具。
  2. 在左侧导航栏选择支付宝 > 小程序
  3. 单击模板选取,然后单击全部页签,选择运动步数并单击下一步
    image.png
  4. 设置项目名称和路径,然后单击完成
  5. 打开手机支付宝App扫描弹出的登录二维码。登录后,选择已创建的支付宝小程序应用完成关联,然后单击确定
  6. 当提示绑定阿里云账号时,单击前往绑定阿里云账号,然后在打开的验证页面选择一种账号验证方式并完成验证。或右键单击左侧的server|未关联目录,然后选择关联Serverless

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

image.png

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

    • appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
    • spaceId、clientSecretendpoint小程序Serverless控制台创建服务空间后可以获得。
      image.png
  2. 修改server/functions/stepdecryption/index.js文件下的 aesSecret
  3. 选中server/functions/stepdecryption目录的代码作为云函数进行上传和部署 。

      1. 右键单击functions目录,选择新建云函数,输入stepdecryption回车。
      1. 右键单击stepdecryption,选择部署云函数

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控制台处获得
});
  • 全局使用mpserverless和授权
    在调用小程序Serverless服务前,需要先调用authorize接口请求授权,支付宝小程序的授权请求参数authProvider应为alipay_openapi, 更多信息请参见authorize

以下代码将实例化的mpserverless对象放入全局对象中以便全局使用,并在第一次打开小程序时进行服务授权。

//client/app.js
App({
  mpserverless,
  async onLaunch(options) {
    // 第一次打开
    await mpserverless.user.authorize({
      authProvider: 'alipay_openapi',
      // authType: 'anonymous'
    })
  },
});
  • 获取步数的加密数据
    以下代码调用了my.getRunData支付宝开放能力API,获取用户最近30天内的运动步数,更多信息请参见my.getRunData
await my.getRunData({
  countDate: `${date.getFullYear()}-${month}-${day}`,
  success: (res) => {
    console.log(res.response)
  },
  fail: (res) => {
  },
  complete: (res) => {
  },
});
  • 调用Serverless云函数传入相关参数进行解密
    以下代码调用了云函数stepdecryption将my.getRunData接口的返回结果进行解密。
mpserverless.function.invoke('stepdecryption', {
  "step": res.response,
})
  • 云函数解密代码
    以下为云函数stepdecryption代码,先将密文进行base64解码,然后使用aes-128-cbc算法解密,得到解密后的utf8明文。
'use strict';

const crypto = require('crypto');
const aesSecret = ''; // AES密钥

module.exports = async (ctx) => {
  const step = ctx.args.step;
  if (!step) {
    return {
      success: false,
      error: {
        code: 'InvalidParameter',
        message: '待解密部署不能为空'
      }
    }
  }
  try {
    ctx.logger.info('[args]', ctx.args);
    const crypted = Buffer.from(step, 'base64').toString('binary');
    const key = Buffer.from(aesSecret, 'base64');
    const iv = Buffer.alloc(16, 0);
    const decipher = crypto.createDecipheriv('aes-128-cbc', key, iv);
    let decoded = decipher.update(crypted, 'binary', 'utf8');
    decoded += decipher.final('utf8');

    return {
      success: true,
      data: decoded
    }
  } catch (e) {
    ctx.logger.error(e);
    return {
      success: false,
      error: {
        code: 'DecipheStepFail',
        message: e.message
      }
    }
  }
}
相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1201 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
559 12
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
6月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
6月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
6月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
369 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
232 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1992 3
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
356 0
微信小程序更新提醒uniapp

热门文章

最新文章