一、创建小程序

1、创建小程序
登录支付宝 https://www.alipay.com/ > 产品中心 > 支付宝预授权（没开通的开通）> 自行研发接入 > 创建小程序

2、记录下小程序的Id

3、开发设置
这步的目的是为了能接入开发
在小程序的控制台找到【开发设置】，完成 [设置加签和应用网关] 和 [设置域名白名单]

接口加签建议用证书的方式。配合【支付宝开发平台助手】生成证书，并在这个页面上传生成即可。
密钥接入文档
设置完成，把这三个证书下载下来备用，同时支付宝开发平台助手生成的公钥，私钥也保存好，开发时用到

二、接入小程序

1、前端接入-安装创建
下载安装开发者工具：https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html
安装完后打开，新建小程序项目

完成后，首页是这样

2、前端接入-编程
目的：获取授权码，然后获取授权用户id，方便业务后续调用。
修改2个文件：

page/API/get-auth-code/get-auth-code.axml
page/API/get-auth-code/get-auth-code.js

get-auth-code.axml 新增myrequest节点

<view class="page"><view class="page-section"><view>请不要一进入小程序就弹框授权，建议先了解小程序的服务内容</view><button type="primary" onTap="getAuthCode">获取授权码</button><button type="primary" onTap="myrequest">我的请求</button></view>
</view>

get-auth-code.js 加上响应请求

Page({onLoad() { },data: {},getAuthCode: () => {my.getAuthCode({scopes: 'auth_user',success: ({ authCode }) => {console.log(`authCode:`, authCode);my.alert({content: authCode,});},});},myrequest: () => {my.getAuthCode({scopes: 'auth_user',success: ({ authCode }) => {console.log(`authCode:`, authCode);my.request({url: 'http://192.168.3.2:8080/myapp/aliapi/login/login.do', //服务器接口地址method: 'Post',data: {code: authCode //上面getAuthCode 成功获取到的code, 传入后台接口},header: {'content-type': 'application/json' //默认值},success: function (res) {console.log(res)my.alert({content: res,});}})},});},
});

完成后编译，效果如下

接下来去完成 http://192.168.3.2:8080/myapp/aliapi/login/login.do 接口编码

3、后端接入

@Overridepublic String login(LoginDto loginDto, HttpServletResponse response) {String appid = "小程序id";   // 之前步骤提到的String appPrivateKey = "私钥";  // 之前步骤提到的CertAlipayRequest certAlipayRequest = new CertAlipayRequest();certAlipayRequest.setServerUrl("https://openapi.alipay.com/gateway.do");certAlipayRequest.setAppId(appid);certAlipayRequest.setPrivateKey(appPrivateKey);certAlipayRequest.setFormat("json");certAlipayRequest.setCharset("utf-8");certAlipayRequest.setSignType("RSA2");ClassLoader loader = Thread.currentThread().getContextClassLoader();certAlipayRequest.setCertPath(loader.getResource("").getPath() + "appCertPublicKey.crt");//应用公钥证书certAlipayRequest.setAlipayPublicCertPath(loader.getResource("").getPath() + "alipayCertPublicKey_RSA2.crt");//支付宝公钥证书certAlipayRequest.setRootCertPath(loader.getResource("").getPath() + "alipayRootCert.crt");//支付宝根证书try {AlipayClient alipayClient = new DefaultAlipayClient(certAlipayRequest);AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();request.setGrantType(grantType);request.setCode(loginDto.getCode());AlipaySystemOauthTokenResponse alipaySystemOauthTokenResponse = alipayClient.certificateExecute(request);if (alipaySystemOauthTokenResponse.isSuccess()) {LogUtils.info("调用成功, Response result={}", alipaySystemOauthTokenResponse.getBody());// 生成UUID// String tokenId = UUID.randomUUID().toString().replaceAll("-", "");// 设置返回tokenid (用户id组成)// response.setHeader(TOKEN, JwtUtil.sign(alipaySystemOauthTokenResponse.getUserId(), tokenId));return alipaySystemOauthTokenResponse.getUserId();} else {LogUtils.info("调用失败, {}", alipaySystemOauthTokenResponse.getSubMsg());}} catch (AlipayApiException e) {e.printStackTrace();}}

官方开发指南文档地址：https://opendocs.alipay.com/mini/developer

三、调试小程序

主要是看接口是否调通

1、在开发者工具上查看请求信息

2、查看前端日志打印

3、当然，出了问题，后端的调试更重要，这里就不举例了。

主要问题集中在密钥不正确，参数不全

四、错误与解决

移步这里

蚂蚁支付宝小程序开发从零开始[含demo]相关推荐

【支付宝小程序控制硬件①】申请个人支付宝小程序开发的个人账户，说说那些睬坑日志，集成mqtt协议在支付宝小程序，实现基本通讯！
[支付宝小程序控制硬件①] 申请个人支付宝下程序开发的个人账户,认识支付宝小程序框架结构,做好智能控制第一步! 文章目录一.前言: 二.回忆支付宝小程序移植的过程: 三.注册账号了解支付宝开发者工具 ...
支付宝小程序开发——学习总结
首先我们先把过程分为几个步骤: 安装所需软件,在支付宝小程序开发平台创建小程序完成flex布局前端学习设计天气预报前端设计 node.js实现服务端一.安装所需软件,创建小程序 1.我们是先创建 ...
支付宝小程序开发体验
在使用过程中想到一点记录一点,只是个人感想. 支付宝小程序的底层应该是React Native的,但是,小程序界面的语法,跟weex更接近.比如,.axml文件,相当于<templete> ...
支付宝小程序开发与注意事项
注册企业支付宝,作为小程序的登录账户地址:支付宝小程序企业账号注册: 支付宝注册.登录选择所需的项目类型创建一个小程序并填写信息下载开发工具地址:下载 | 小程序创建我的第一个支付宝小 ...
支付宝小程序开发申请
1:支付宝小程序应用申请用[企业支付宝账号]登录开放平台 : 进入[小程序公测首页] 申请小程序公测,审核时间为1个工作日: 注意1:公测期间尚未开放个人支付宝账户注意2:未注册企业支付宝账号请访问 ...
Taro 支付宝小程序开发
1. 环境准备 # 安装 node 环境, 从 node 官网下载: http://nodejs.cn/# 设置淘宝镜像: npm config set registry https://regist ...
一键搭建微信小程序开发环境及demo运行（腾讯云上一键搭建node.js服务器环境，PHP，Java，.NET服务类似）
一.首先准备下本地环境(本地就需要一个微信开发工具) 1.首先得有一个微信小程序账号,登陆微信小程序首页:mp.weixin.qq.com,点击右上角立即注册. 注册登陆后,首页填写一些小程序基本信息 ...
支付宝小程序开发练习,显示自定义二维码（四）
之前用了几种方式 1.后端生成二维码需要加密的字符窜,小程序前端利用二维码组件渲染canvas画出二维码,由于支付宝小程序没有这样的组件,于是去找微信小程序的解决方案,把微信小程序的二维码前端组件搬过 ...
小程序获取城市行政区号_支付宝小程序开发——获取位置API没有城市区号的最佳处理方案...
前言: 需要对城市区号进行判断,但是支付宝小程序提供的my.getLocation() API返回的数据中只有6位的城市行政代码,诸如:深圳(440300),并没有区号(0755),那么怎么办呢? 需 ...
支付宝小程序开发之使用 alipay.fund.trans.uni.transfer接口支付宝打款到银行卡
使用alipay.fund.trans.uni.transfer接口进行打款必须使用支付宝公钥证书进行签名,但是支付宝提供的alipay-sdk并不支持支付宝公钥证书加密,所以,我们必须自己进行加密. ...

蚂蚁支付宝小程序开发从零开始[含demo]

目录

一、创建小程序

二、接入小程序

三、调试小程序

四、错误与解决

蚂蚁支付宝小程序开发从零开始[含demo]相关推荐

最新文章

热门文章