【经验分享】支付宝小程序serverless云开发拓荒

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 【经验分享】支付宝小程序serverless云开发拓荒

支付宝小程序云开发拓荒:


1. 支付宝小程序准备

支付宝小程序开发就不详细介绍了,从创建小程序,到开发、提审官网有详尽的文档和示例。参见阿里云Serverelss关于小程序开发流程的指导文档

2.添加Serverless SDK依赖

可以修改package.json,添加依赖{"@alicloud/mpserverless-sdk": "^2.3.2"}。也可以下载Serverless官方Demo,在Demo基础上修改。(这里需要注意,工具上默认内置的是0.0.9版本,一定要换成2.3.2版本,不然很多新能力调用不了,会提示错误)

3.引入Serverless

在app.js中引入Serverless全局对象,即可在所有Page中直接引用,用于调用DB、File、云函数接口。

// 1. 引入必要的 sdk
import MPServerless from '@alicloud/mpserverless-sdk';
import cloud from 'alipay-serverless-sdk';
// 2. 在 app.js 中对 sdk 进行初始化
// 2.1 初始化 MPServerless
my.serverless = my.serverless || new MPServerless({
  uploadFile: my.uploadFile,
  request: my.request,
  getAuthCode: my.getAuthCode,
}, {
  // 2.2 参数能在小程序云服务空间详情中获取
  appId: '2021001153625076',
  spaceId: 'd25b93de-78d6-43b4-a9c6-355c782e8e8d',
  clientSecret: 'VRkdVX4p0SpZX4Qj/PZpSA==',
  endpoint: 'https://api.bspapp.com'
})
// 2.3 初始化 alipay-serverless-sdk
cloud.init(my.serverless);
App({
  onLaunch(options) {
    // 第一次打开
    // options.query == {number:1}
    console.info('App onLaunch');
  },
  onShow(options) {
    // 从后台被 scheme 重新打开
    // options.query == {number:1}
  },
});


接下来我们说下遇到第一个问题:


出现该问题是因为 阿里云云服务的密钥没配置导致https://mp.console.aliyun.com/cloudDev/setting

私钥以及公钥需要下载《支付宝开放平台开发助手》生成。

使用支付宝开放平台开发助手生成公钥私钥配置后提示下面这个。

找了半天原因,最后了解到是 支付宝小程序的公钥配置错误导致的。阿里云后台云开发设置里需要设置该小程序的支付宝公钥,而我配置成了应用公钥。支付宝公钥在小程序后台获取。

接下来咱们第一个demo:

获取用户userId

cloud.base.oauth.getToken为官方提供的云开发获取用户userId的api。其他相关调用相同,api列表文档如下:

https://opendocs.alipay.com/mini/cloudservice/khf843


my.getAuthCode({
  scopes: 'auth_base',
  success: async (res) => {
    my.hideLoading()
    const tokenResult = await cloud.base.oauth.getToken(res.authCode);
    console.log(tokenResult)
    const userId = tokenResult.userId;
    this.setData({
      userId
    })
  }
})


至于调用云函数。微信的是wx.callFuntion({name: xxx}),而支付宝是这样的:


my.serverless.function.invoke('functionName', {
    range: 30,
}).then((res) => {
  console.log(res);
}).catch(err => {console.err});


最后一个坑,云调用my.serverless.file.uploadFile 这类的调用 需要先在 app.js的onLaunch里静默授权一次,不然会调用失败。

会提示:`request error from Alipay IDE`,文档搜不到相关错误。


App({
  async onLaunch(options) {
    const res = await my.serverless.user.authorize({
      authProvider: 'alipay_openapi'
    })
    if (res.success) {
      console.log('授权成功');
    }
  }
});


以上的问题都是在第一次接触云开发探索中遇到的坑,记录一下给有需要的人。

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
ly~
|
9天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
42 6
|
9天前
|
JSON 小程序 前端开发
创建一个属于自己的小程序(注册开发账号)
介绍如何创建微信小程序账号,包括注册流程、下载安装微信开发者工具、创建项目以及项目结构介绍。
创建一个属于自己的小程序(注册开发账号)
ly~
|
9天前
|
开发框架 小程序 前端开发
抖音小程序的开发难度大吗?
抖音小程序的开发难度因人而异,主要取决于开发者经验、技能及功能需求。技术上需掌握前端技术及抖音开发框架,了解平台生态与规则;设计上需符合用户审美和习惯,具备创新性和实用性。此外,严格的审核标准和激烈的市场竞争增加了开发难度,开发者需制定有效推广策略并持续优化小程序以保持竞争力。
ly~
42 4
|
9天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
29天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)

热门文章

最新文章

下一篇
无影云桌面