有知道，如何做小程序快速创建一个支付宝小程序？

来源：蜘蛛抓取(WebSpider) 时间：2023-12-10 01:02 标签： 如何做小程序
本篇主要记录支付宝小程序开发的整个步骤，从前端到后端，图文并茂，清晰易懂，从配置到开发，你想要的的都有。完整流程，后续追加过程问题的解决最终效果是：获取支付宝登录用户的userId，用它完成相关的业务处理主要对接技术包括：
获取授权码证书配置页面请求编程获取userid
一、创建小程序1、创建小程序登录支付宝 https://www.alipay.com/ > 产品中心 > 支付宝预授权（没开通的开通）> 自行研发接入 > 创建小程序2、记录下小程序的Id3、开发设置这步的目的是为了能接入开发在小程序的控制台找到【开发设置】，完成 [设置加签和应用网关] 和 [设置域名白名单]接口加签建议用证书的方式。配合【支付宝开发平台助手】生成证书，并在这个页面上传生成即可。密钥接入文档设置完成，把这三个证书下载下来备用，同时支付宝开发平台助手生成的公钥，私钥也保存好，开发时用到二、接入小程序1、前端接入-安装创建下载安装开发者工具：https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html安装完后打开，新建小程序项目完成后，首页是这样2、前端接入-编程目的：获取授权码，然后获取授权用户id，方便业务后续调用。修改2个文件：
page/API/get-auth-code/get-auth-code.axmlpage/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、后端接入
@Override
public 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、当然，出了问题，后端的调试更重要，这里就不举例了。主要问题集中在密钥不正确，参数不全四、错误与解决移步这里

我要回帖

更多关于 如何做小程序 的文章

 

随机推荐