官方示例带你玩转支付宝小程序

火速围观！支付宝近期推出了一系列小程序示例，不仅提供在线体验而且提供全部源代码，示例涵盖了：会员信息、小程序二维码、刷脸认证、小程序支付、模板消息、支付宝卡包和线下买单7个高频使用场景。直接下载源代码，只需要简单几步修改即可拥有自己的支付宝小程序，实在是开发者的福音。

一 获取会员信息

获取会员信息快速示例提供 JSAPI 和 OpenAPI 两种调用方式获取用户的昵称和头像。OpenAPI 调用同时得到用户的 userID， 可用于通过支付宝实现小程序登录操作。本示例的产品介绍和接入指南，参见获取会员信息。

前提条件

• 已完成开发者入驻与小程序创建。
• 已下载并安装小程序开发者工具。

获取模板代码

下载获取会员信息Demo.zip 文件，并解压至本地。

使用步骤

添加功能

1.进入 小程序开发中心，在 我的小程序 中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的 功能列表 中，点击 右上角 添加功能 按钮，添加 获取会员信息功能。

后端开发

打开 Java > src > main >resources >application.properties 文件，填入服务运行所需的参数。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

打开小程序 IDE 快速示例

打开小程序开发者工具，点击新建项目，在通过小程序快速示例创建项目栏目下，选中小程序二维码，点击下一步，即可在小程序开发者工具中快速创建小程序二维码小程序。

前端开发

将小程序二维码快速开始小程序 pages > index >index.js 文件中 URL 修改为实际后端服务域名之后，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/ctvo71
打开支付宝扫码在线体验：

二 小程序二维码

小程序二维码能力可使得开发者更便捷地推广小程序，开发者可以将生成后的小程序二维码在线上线下进行贴码推广。

前提条件

• 已完成开发者入驻与小程序创建。
• 已下载并安装小程序开发者工具

获取模板代码

下载小程序二维码Demo.zip文件，并解压至本地。

使用步骤

添加功能

1.登录小程序开发中心，在我的小程序中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的功能列表中，点击右上角添加功能按钮，添加获取会员信息、小程序二维码功能。

后端开发

打开 Java > src > main >resources >application.properties 文件，填入服务运行所需的参数。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

若小程序后端服务部署在云应用上，具体步骤参见云应用-Spring Boot版。

打开小程序 IDE 快速示例

打开小程序开发者工具，点击新建项目，在通过小程序快速示例创建项目栏目下，选中小程序二维码，点击下一步，即可在小程序开发者工具中快速创建小程序二维码小程序。

前端开发

将小程序二维码快速开始小程序 pages > index >index.js 文件中 URL 修改为实际后端服务域名之后，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/icpgby
打开支付宝扫码在线体验：

三 刷脸认证

说明：本示例仅支持企业支付宝账号。
刷脸认证是一种身份验证服务，通过采集用户的面部特征，并与权威数据源比对，判断当前登录用户是否为账号的本人和真人。本示例产品介绍和接入指南，参见刷脸认证。

前提条件

• 已完成开发者入驻与小程序创建 。
• 已下载并安装小程序开发者工具。

获取模板代码

下载刷脸认证 Demo.zip文件，并解压至本地。

使用步骤

添加功能

1.登录小程序开发中心，在我的小程序中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的功能列表中，点击右上角添加功能按钮，添加获取会员信息、 刷脸认证功能。

刷脸认证功能需签约后生效，请点击功能列表最右侧操作栏 签约；完成产品签约流程后，状态显示为 审核中，预计在一个工作日内完成签约审核；审核通过后，状态变为 已生效，即可调用刷脸认证功能。

后端开发

打开 Java > src > main >resources >application.properties 文件，填入服务运行所需的参数。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

若小程序后端服务部署在云应用上，具体步骤参见 云应用-Spring Boot 版。

打开小程序 IDE 快速示例

打开小程序开发者工具，点击新建项目，在通过小程序快速示例创建项目栏目下，选中刷脸认证，点击下一步,即可在小程序开发者工具中快速创建刷脸认证小程序。

前端开发

将刷脸认证快速开始小程序 pages > index > api.js 文件中 baseUrl 修改为实际后端服务域名之后，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/wkx34c
打开支付宝扫码在线体验：

四 小程序支付

说明：本示例仅支持企业支付宝账号。
小程序支付和 APP 支付的支付流程与体验基本一致，也支持核销口碑券和口碑商户优惠功能。已签约小程序支付或在口碑开店的商户建议接入小程序支付。小程序支付在小程序内不能通过扫码、条码、声波付等方式支付，只能唤起收银台进行支付。本示例的产品介绍和接入指南，参见 小程序支付。

前提条件

• 已完成开发者入驻与小程序创建。
• 已下载并安装 小程序开发者工具。

获取模板代码

下载 小程序支付Demo.zip 文件，并解压至本地。

使用步骤

添加功能

1.登录小程序开发中心，在我的小程序中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的功能列表中，点击右上角添加功能按钮，添加获取会员信息功能、小程序支付功能。

小程序支付功能需签约后生效，请点击功能列表最右侧操作栏 签约；完成产品签约流程后，状态显示为 审核中，一般在一个工作日内完成签约审核；审核通过后，状态变为 已生效，即可调用小程序支付功能。

后端开发

打开 Java > src > main > resources > application.properties 文件，填入服务运行所需的参数。
生成 RSA 密钥并配置应用私钥及公钥，参见 设置接口加签方式。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

spring.datasource.url=jdbc:mysql://${demo.mysql.address}:3306/sample?useUnicode=true&characterEncoding=utf8

数据库用户名称

spring.datasource.username=admin

数据库用户密码

spring.datasource.password=

数据库地址，由于数据库跟应用服务在同一个服务器，所以在服务器上运行时可以设值为 localhost

demo.mysql.address=localhost

若小程序后端服务部署在云应用上，具体步骤参见 云应用-Spring Boot 版。

数据准备

在 sample 数据库中，新建 user_pay 数据表。

USE sample; 
CREATE TABLE `user_pay` (`id` int(11) NOT NULL AUTO_INCREMENT,
 `trade_no` varchar(200) DEFAULT NULL,
 `user_id` varchar(200) DEFAULT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

前端配置

在开发工具中，打开下载代码文件夹中 mini-program 文件夹的前端代码。

将小程序支付快速示例 pages > index > index.js 文件中 URL 修改为实际后端服务域名，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/sai2ez
打开支付宝在线体验：

五 模板消息

小程序可通过模板消息高效触达用户，通知用户当前行为的结果及状态等，例如交易状态、物流进度等。本示例的产品介绍和接入指南，参见模板消息。

前提条件

使用模板消息快速示例的前提条件如下：

• 已完成开发者入驻与小程序创建 。
• 已下载并安装 小程序开发者工具。

获取模板代码

下载 模板消息Demo.zip文件，并解压至本地。

使用步骤

添加功能

1.进入小程序开发中心，在我的小程序中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的功能列表中，点击右上角添加功能按钮，添加小程序模板消息 、获取会员信息功能。

后端开发

打开 Java > src > main >resources >application.properties 文件，填入服务运行所需的参数。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

若小程序后端服务部署在云应用上，具体步骤参云应用-Spring Boot版。

打开小程序 IDE 快速示例

打开小程序开发者工具，点击新建项目，在通过小程序快速示例创建项目栏目下，选中模板消息，点击下一步，即可在小程序开发者工具中快速创建模板消息小程序。

前端开发

将模板消息快速开始小程序 pages > index > index.js 文件中 URL 修改为实际后端服务域名之后，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/ehc7xk
打开支付宝扫码在线体验：

六 支付宝卡包

说明：本示例仅支持企业支付宝账号。
支付宝卡包（alipass），是支付宝公司推出的一款可以管理电子凭证的产品，该产品聚合来自各类生活服务的票据凭证，包括优惠券、折扣券、代金券、换购券、电影票、演出票、火车票、机票。本示例产品介绍和接入指南，参见 支付宝卡包。

前提条件

• 已完成开发者入驻与小程序创建。
• 已下载并安装小程序开发者工具。

获取模板代码

下载支付宝卡包 Demo.zip 文件，并解压至本地。

使用步骤

添加功能

1.登录小程序开发中心，在我的小程序中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的功能列表中，点击右上角添加功能按钮，添加获取会员信息功能、小程序支付功能、支付宝卡包功能。小程序支付功能需签约后生效，请点击功能列表最右侧操作栏立即签约，签约成功后，状态显示为已生效，即可调用小程序支付。

数据准备

在 sample 数据库中，新建 user_pay 数据表。

USE sample; 
CREATE TABLE `user_pay` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `trade_no` varchar(200) DEFAULT NULL,
 `user_id` varchar(200) DEFAULT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

在 sample 数据库中，新建 user_card 数据表。

USE sample; 
CREATE TABLE `user_card` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` varchar(200) DEFAULT NULL,
  `card_id` varchar(200) DEFAULT NULL,
  `card_status` varchar(200) DEFAULT NULL,
  `serial_number` varchar(200) DEFAULT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

后端开发

打开 Java > src > main >resources >application.properties 文件，填入服务运行所需的参数。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

spring.datasource.url=jdbc:mysql://${demo.mysql.address}:3306/sample?useUnicode=true&characterEncoding=utf8

数据库用户名称

spring.datasource.username=admin

数据库用户密码

spring.datasource.password=

数据库地址，由于数据库跟应用服务在同一个服务器，所以在服务器上运行时可以设值为 localhost

demo.mysql.address=localhost

若小程序后端服务部署在云应用上，具体步骤参见 云应用-Spring Boot 版。

打开小程序 IDE 快速示例

打开小程序开发者工具，点击 新建项目，在 通过小程序快速示例创建项目 栏目下，选中 支付宝卡包，点击 下一步，即可在小程序开发者工具中快速创建支付宝卡包小程序。

前端开发

将支付宝卡包快速开始小程序 pages > index > api.js 文件中 baseUrl 修改为实际后端服务域名，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/gk4fgr
打开支付宝扫码在线体验：

线下买单

说明：本示例仅支持企业支付宝账号。
线下买单功能可将小程序与线下服务场景连接起来，给线下服务行业带来极大便利。该功能可轻松实现查看商品列表、领取优惠券、查看优惠券、结算、付款、查看订单列表、申请退款等人们广为熟悉的消费场景。

功能接口

前提条件

1.已完成开发者入驻与小程序创建 。
2.已下载并安装 小程序开发者工具。

获取模板代码

下载线下买单Demo.zip文件，并解压至本地。

使用步骤

添加功能

1.登录小程序开发中心，在我的小程序中，选择相应的小程序，进入该小程序详情页。
2.在小程序详情开发管理页面的功能列表中，点击 右上角添加功能按钮，添加获取会员信息功能、小程序支付功能、支付宝卡包功能。小程序支付功能需签约后生效，请点击功能列表最右侧操作栏签约，签约成功后，状态显示为已生效，即可调用小程序支付。

小程序支付功能需签约后生效，请点击功能列表右侧 签约；完成产品签约流程后，状态显示为 审核中，预计在一个工作日内完成签约审核；审核通过后，状态变为 已生效，即可调用小程序支付功能。

数据准备

在 sample 数据库中，新建表 user_pay。

USE sample; 
CREATE TABLE `user_pay` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `trade_no` varchar(200) DEFAULT NULL,
 `user_id` varchar(200) DEFAULT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

在 sample 数据库中，新建表 user_card。

USE sample; 
CREATE TABLE `user_card` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` varchar(200) DEFAULT NULL,
  `card_id` varchar(200) DEFAULT NULL,
  `card_status` varchar(200) DEFAULT NULL,
  `serial_number` varchar(200) DEFAULT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

在 sample 数据库中，新建表 user_order。

USE sample; 
CREATE TABLE `user_order` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `out_trade_no` varchar(200) DEFAULT NULL,
  `user_id` varchar(200) DEFAULT NULL,
  `card_id` varchar(200) DEFAULT NULL,
  `goods_detail` text,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

在 sample 数据库中，新建表 goods_info。

USE sample; 
CREATE TABLE `goods_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `goods_name` varchar(200) DEFAULT NULL,
  `goods_type` varchar(200) DEFAULT NULL,
  `goods_price` varchar(200) DEFAULT NULL,
  `goods_describe` varchar(200) DEFAULT NULL,
  `goods_num` varchar(200) DEFAULT NULL,
  `sell_num` varchar(200) DEFAULT NULL,
  `like_num` varchar(200) DEFAULT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

后端开发

打开 Java > src > main >resources >application.properties 文件，填入服务运行所需的参数。

应用的私钥，需要保管好，应用的公钥存储在支付宝服务端
alipay.appconfig.privatekey=

支付宝提供给这个应用的公钥，私钥存储在支付宝服务端中
alipay.appconfig.publickey=

开放平台申请应用的Id
alipay.appconfig.appid=

spring.datasource.url=jdbc:mysql://${demo.mysql.address}:3306/sample?useUnicode=true&characterEncoding=utf8

数据库用户名称

spring.datasource.username=admin

数据库用户密码

spring.datasource.password=

数据库地址，由于数据库跟应用服务在同一个服务器，所以在服务器上运行时可以设值为 localhost

demo.mysql.address=localhost

若小程序后端服务部署在云应用上，具体步骤请参阅 云应用-Spring Boot 版。

打开小程序 IDE 快速示例

打开小程序开发者工具，点击新建项目，在通过小程序快速示例创建项目栏目下，选中线下买单，点击下一步，即可在小程序开发者工具中快速创建线下买单小程序。

前端开发

将线下买单快速开始小程序 pages > index >utils > api.js 文件中 API_HOST 修改为实际后端服务域名之后，即可开发小程序前端界面。

原文链接： https://docs.alipay.com/mini/ide/xk6gco
打开支付宝扫码在线体验：

微信扫码关注Ali繁星计划微信公众号 掌握一手小程序云干货