使用小程序Serverless开发支付宝小程序

本文涉及的产品
简介: Serverless简介 阿里云小程序云产品,提供了无服务端模式Serverless和有服务端模式云应用,两种小程序后端云服务。小程序Serverless产品,提供包括云函数、数据存储、文件存储等一整套后端服务。开发者通过API方式即可获取云函数、数据存储、文件存储、音视频、图像处理等服务,不需要关心服务器或底层运维设施,可以更专注于代码和业务本身。阿里云用户在开通小程序云产品之后,在支付宝小程

Serverless简介

阿里云小程序云产品,提供了无服务端模式Serverless和有服务端模式云应用,两种小程序后端云服务。小程序Serverless产品,提供包括云函数、数据存储、文件存储等一整套后端服务。开发者通过API方式即可获取云函数、数据存储、文件存储、音视频、图像处理等服务,不需要关心服务器或底层运维设施,可以更专注于代码和业务本身。
阿里云用户在开通小程序云产品之后,在支付宝小程序中增加相关配置即可使用Serverless进行DB、文件的存储和访问,以及利用云函数在服务端完成复杂的计算和操作。

小程序开发

1. 支付宝小程序准备

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

生成小程序公私钥

由于Serverless需要以开发者身份访问支付宝OpenAPI,用于获取C端用户信息等,所以需要在Serverless中录入小程序的私钥和支付宝公钥。参见支付宝秘钥生成文档
image.png

2. IDE小程序开发

开发流程Serverless官方文档已有详尽的流程指导,以下主要记录开发过程中的一些需要注意的点。

2.1 添加Serverless SDK依赖

可以修改package.json,添加依赖{"@alicloud/mpserverless-sdk": "^2.1.2"}。也可以下载Serverless官方Demo,在Demo基础上修改。

2.2 引入Serverless

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

2.3 配置App页面列表

image.png

2.4 获取用户信息

小程序中关于数据和文件的读写,都需要关联到使用小程序的当前C端用户。PS:Serverless获取的用户信息,是Serverless域所使用的userId和授权oAuthUserId等信息,不包括用户头像和昵称等,如需获取用户头像等信息,需要调用JSAPI “my.getAuthUserInfo”或者"my.getOpenUserInfo"获取。
Serverless获取用户信息示例代码如下。支付宝授权code 10分钟有效,所以需要保证在查询用户信息前通过user.authorize接口刷新授权code(支付宝颁发给开发者的)。

// 先获取用户授权(如用户未授权会弹窗唤起授权窗口)
const res = await app.serverless.user.authorize({
  authProvider: 'alipay_openapi'
}).catch(console.error);
if (res && res.success) {
  console.log('授权成功');
  const userInfo = await app.serverless.user.getInfo({
    authProvider: 'alipay_openapi',
  }).catch(console.error);
  if (userInfo.success) {
    console.log('getUserInfo res', userInfo);
    app.user = userInfo.result.user;
    this.setData({ user: userInfo.result.user });
  }
}

获取用户头像的JSApi

my.getAuthCode({
scopes: ['auth_user'],
success: authcode => {
    console.info('getUserInfo authcode', authcode);
    my.getAuthUserInfo({
    success: res => {
      console.log('auth userinfo', res);
      that.setData({ appUser: res });
    }
  });
}
});

2.5 Serverless 数据读写操作

此处仅示例查询和insert操作,其他接口参见Serverless阿里云文档即可。

数据库查询
app.serverless.db.collection('decisions').find(
  { userId: this.data.user.userId }, // 查询条件
  { sort: { createTime: -1 } }, // 时间降序排列
).then(res => {
  console.log('loadList result', res);
  if(res.success && res.result){
    this.setData({ 
      decisionlist: res.result,
    });
  }
}).catch(console.error);
数据库插入
var insertData = {
  name: this.data.name, 
  userId: this.data.user.userId,
  oAuthUserId: this.data.user.oAuthUserId,
  items,
  createTime: new Date(),
  updateTime: new Date(),
};
console.log('add new decision', insertData);
res = await app.serverless.db.collection('decisions').insertOne(insertData);

2.6 文件上传

my.chooseImage({
  chooseImage: 1,
  success: res => {
    const path = res.apFilePaths[0];
    const options = {
      filePath: path,
      headers: {
        contentDisposition: 'attachment',
      },
    };

    app.serverless.file.uploadFile(options).then((image) => {
      console.log(image);
      this.setData({
        imageUrl: image.fileUrl,
      });
    }).catch(console.log);
  },
});

2.7 云函数

IDE内集成了云函数相关的操作。PS:由于历史原因,需要安装旧的Serverless SDK,"@ant-basement/miniprogram-sdk": "^2.2.24"。

设置云服务类型

在工程根目录下增加文件mini.project.json

{
  "cloud": {
    "type": "BASEMENT"
  }
}
编写&部署云函数

image.png

小程序开发注意事项

1. 不能在首屏唤起用户授权

需要用户了解小程序内容后,才能在业务流程中唤起用户授权,否则提审会直接不通过。所以不能在App.onLoad中调用my.getAuthCode或者serverless.authorize接口。

2. my.navigateTo接口最多只能递归调用10次

小程序页面栈最多十层,超过后调用无反应。所以不能让页面有循环调用navigateTo的场景。不需要【返回】的页面直接用redirectTo重定向即可。

3. JSAPI建议使用异步接口

同步调用体检会不通过

相关实践学习
基于函数计算一键部署掌上游戏机
本场景介绍如何使用阿里云计算服务命令快速搭建一个掌上游戏机。
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
14天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
14天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
14天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
14天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
14天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
30 0
|
14天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1月前
|
小程序 UED
人力资源小程序的设计与开发步骤
人力资源小程序的设计与开发步骤
20 1
|
14天前
|
小程序 前端开发 API
小程序全栈开发中的RESTful API设计
【4月更文挑战第12天】本文探讨了小程序全栈开发中的RESTful API设计,旨在帮助开发者理解和掌握相关技术。RESTful API基于REST架构风格,利用HTTP协议进行数据交互,遵循URI、客户端-服务器架构、无状态通信、标准HTTP方法和资源表述等原则。在小程序开发中,通过资源建模、设计API接口、定义资源表述及实现接口,实现前后端高效分离,提升开发效率和代码质量。小程序前端利用微信API与后端交互,确保数据流通。掌握这些实践将优化小程序全栈开发。
|
14天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。

相关产品

  • 函数计算