微信公众号H5网页支付

最新推荐文章于 2024-08-09 11:36:24 发布

Yuqin_S

最新推荐文章于 2024-08-09 11:36:24 发布

阅读量1.6k

点赞数

分类专栏： java 计算机文章标签： java 小程序 spring

本文链接：https://blog.csdn.net/weixin_43647745/article/details/110822466

版权

微信公众号H5网页支付

引言

引言

个人开发小菜一枚，主要做 工业数字化转型 这一行业的，说白了就是传统行业，入坑这么多年了身边朋友陆陆续续开始创业，本博客讲述的就是接了一单朋友的私活，帮之前的老同学开发一个公众号没有要钱([就收了个成本]小声逼逼),主要是自己之前压根没有接触过微信开发这一块，想要了解了解，主要涉及到 H5网页支付 ，支付界面呢，非常简单就是画了个简单的HTML内容呢就是一个选择金额然后点击支付，前端调用微信的付款界面出来输入密码进行支付。
1.此项目可以当作一个Demo来看，因为没有涉及到信息传输加密， 没有涉及到数据库 ，因为甲方爸爸要求没必要装数据库，只需要做记录就好了，我也就按照甲方爸爸要求做了。
2.如果有过微信开发经验的只需要对着微信官方文档就可以进行开发，我也第一次接触微信支付这一块，我之前都不知道openID是个什么东西。官网文档看不下去，没有案例，网上文档写不全，各种错误都再报错。
3.本博客只讲述如何调用微信的付款界面出来并录入需要支付的金额，其他的方面展示没有过多的考虑，毕竟我就是个小菜。
4.写本博客的原因主要是一，总结开发成果。二，看网上的文章太扎心了。懂得人都懂，如果有大佬得文章还好，一些不知道哪里冒出得人一顿粘贴复制，粘代码还不粘全。如果文章代码粘贴多的呢，他tm还不贴工具类和依赖，都不知道是哪个包下面的方法。所有本文章从开始到结束尽量的细化了流程。
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";

有篇文章可以借鉴链接: 如何获取公众号AppID、AppSecret、商户号和商户API密钥.
第三步：开始着手准备开发，研究一下先干什么后干什么
1.进入主页，采取静默授权登录，获取code用于后续获取openID
2.输入金额后调用后台接口进行下单。
3.下单成功返回下单的预付id返给前端调用微信付款界面。
总体就三步授权 ——下单——调用付款界面付款
切记注意不是tm一上来就付款的，当时我还没看明白一顿瞎百度。

基础依赖

本项目采用的是SpringBoot + Maven的项目，没有JDBC如果有自己集成就好了，没有写过微信公众号开发，JDBC集成应该自己都会吧。
maven依赖如下：不要无脑拷贝，看清楚自己需要的再拷贝

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.yaml</groupId>
            <artifactId>snakeyaml</artifactId>
        </dependency>
        <!-- 访问html文件依赖begin -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 访问html文件依赖begin -->
        <!-- https://mvnrepository.com/artifact/org.jdom/jdom -->
        <dependency>
            <groupId>org.jdom</groupId>
            <artifactId>jdom</artifactId>
            <version>1.1.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.11</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/commons-lang/commons-lang -->
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>
        <!-- 个人最喜欢用的json的依赖 阿里的 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.73</version>
        </dependency>
        <!-- 日志文件 -->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>2.12.1</version>
        </dependency>
        <!-- 这个他妈的至关重要  微信官方的依赖工具类，可以直接调用加密方法和其他方法强烈建议使用这个 -->
        <dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>
        <!--   http请求的 用上面那个呢给微信发请求一直报错呢，所以改用微信官方sdk包里面的工具类的方法依赖  https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.12</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.13</version>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

前端代码

phone.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="button" class="layui-btn btn-size layui-btn-normal">100</button>