微信公众号H5网页支付
介绍
个人发展是小菜一碟。 我主要从事工业数字化转型行业。 说白了，就是一个传统行业。 入行这么多年，身边的朋友也纷纷开始自己创业。 这个博客是关于接管朋友的私人工作并帮助他人的。 我的老同学开发公众号并没有要钱（【我只是收取了费用】小声嘀咕），主要是因为我以前从未接触过微信开发。 想了解更多，主要是H5网页支付和支付接口相关。 嗯，这很简单。 只需绘制一个简单的HTML内容，选择金额并点击支付即可。 前端调用微信支付接口输入密码进行支付。
1、本项目可以看作是一个demo，因为它不涉及信息传输的加密，也不涉及数据库。 因为甲方父亲要求不需要安装数据库，只需要记录。 我会听从甲方父亲的指示。 请求已提出。
2.如果您有微信开发经验，只需按照微信官方文档进行开发即可。 这是我第一次接触微信支付。 以前我不知道那是什么。 官网文档难以阅读，没有案例，网上文档不完整，一次又一次报各种错误。
3、本博客仅介绍如何调用微信支付接口并输入支付金额。 其他方面并没有表现出太多的考虑。 毕竟我只是一个新手。
4.写这篇博客的主要原因是为了总结开发成果。 其次，网上看文章太烦人了。 任何知道如何做的人都会明白。 如果有大佬写的文章就好了，但有的人就是凭空出现，粘贴复制，却不是全部代码。 如果文章里粘贴了很多代码，但他们没有贴出工具类和依赖项，也不知道哪个包包含方法。 这篇文章从头到尾都尽可能详细地描述了整个过程。
5、本博客主要教（愚弄）新手新手。 没做过微信开发的可以看一下基本流程。
基本流程
请记住在采取行动之前先考虑整个过程。 我一直在思考一个问题：为什么别人的学习能力那么强，学得那么快？ 如果给我一个新东西，我可能两天做不完，但别人半天就能做完。 想，必须想。 先想一想。
第一步：你必须满足基本条件。 服务器需要暴露80端口，需要购买域名，需要配置域名解析，需要开设商户账户。 这大概就是找到注册公司的人，拿着营业执照和各种材料去申请。 赞同。
1、如果没有域名配置，页面跳转到IP时会有提示。
2、微信接口必须是服务器的80端口。
3、总体来说，申请和批准大约需要十五天的时间。 域名实名认证。 选择一个好看又便宜的域名。 一年八块钱，算是不错的一批了。 我用的是腾讯云，服务器也是。 （后面会详细写，先留下一些坑）
第二步：基本上让甲方父亲做第一步。 接下来，您需要准备好所有需要的东西。 下面的东西是缺一不可的，必须一步步配置。
//服务号APPID private static final String APPID = "服务号APPID"; //服务号AppSecret private static final String AppSecret = "服务号AppSecret"; //支付商户号 private static final String MCH_ID = "支付商户号"; //API密钥 private static final String API_KEY = "API密钥"; //key我的key设置的跟API秘钥一样的 忘记它是干什么的了 private static final String KEY = "key";
有一篇文章可以参考：如何获取公众账号、商户账号和商户API key。
第三步：开始准备开发，研究先做什么、下一步做什么
1.进入首页，静默授权登录，获取代码以供后续获取。
2、输入金额后，调用后台接口下单。
3、如果下单成功，会返回订单的预付费ID给前端调用微信支付接口。
一般来说，授权-下单-调用支付接口支付三个步骤。
记得注意不要TM一上来就付款。 那时候我还不懂百度。
基本依赖关系
该项目使用+项目。 如果没有JDBC，自己集成会更好。 我从来没有写过微信公众号开发，所以我应该可以自己集成JDBC。
依赖关系如下：不要盲目复制，复制前看清楚自己需要什么
org.springframework.boot spring-boot-starter-web mysql mysql-connector-java runtime org.yaml snakeyaml org.springframework.boot spring-boot-starter-thymeleaf org.jdom jdom 1.1.3 org.apache.commons commons-lang3 3.11 commons-lang commons-lang 2.6 com.alibaba fastjson 1.2.73 org.apache.logging.log4j log4j-core 2.12.1 com.github.wxpay wxpay-sdk 0.0.3 org.apache.httpcomponents httpclient 4.5.12 org.apache.httpcomponents httpcore 4.4.13 org.springframework.boot spring-boot-starter-test test org.junit.vintage junit-vintage-engine
前端代码
.html 文件代码
<!DOCTYPE html> <html xmlns:th="http://www.springframework.org/schema/mvc"> <head> <meta charset="utf-8"> <title>标题</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> //layui css文件 <link href="/libs/layui/css/layui.css" type="text/css" rel="stylesheet"/> <style> body, div { margin: 0; padding: 0; } .phone-body { background-color: #EDEDED; width: 100%; box-sizing: border-box; padding: 1.5rem 0.8rem; min-height: 100vh; } .phone-box { background-color: #fff; width: 100%; height: 8.8rem; border-radius: 0.3rem; box-sizing: border-box; padding: 0.6rem; } .title { color: #000; font-size: 0.28rem; text-align: center; line-height: 0.5rem; } .phone-item { width: 100%; height: 0.5rem; margin-bottom: 0.5rem; text-align: center; } .payment-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .payment { color: #56874D; font-size: 0.28rem; text-align: center; line-height: 0.5rem; } .btn-size { width: 40%; } .pay-btn { background-color: #4AC167; color: #fff; } </style> </head> <body> <div class="phone-body"> <div class="phone-box"> <div class="phone-item"> <div class="title">标题</div> </div> <div class="phone-item"> <input type="text" name="payer" placeholder="付款人" class="layui-input"> </div> <div class="phone-item"> <input type="text" name="phone" placeholder="请输入您的电话号码" class="layui-input"> </div> <div class="phone-item"> <div class="payment">支付金额</div> </div> <div class="phone-item payment-box"> <button type="button" class="layui-btn btn-size layui-btn-normal">50</button> <button type=