基于公众号的微信支付步骤详解，附全部代码

一、背景介绍

最近接到一个项目，需要在微信公众号菜单中集成一个vue系统，支持下单、微信支付等功能，下面就微信支付核心部分做一下记录。

二、对接流程图

1）对接流程图

2）涉及接口

（接口地址：API列表-JSAPI支付 | 微信支付商户平台文档中心）

三、微信支付相关申请及配置

在正式编码之前，需要进行各种微信相关的申请和配置，下面简单介绍一下

1）注册微信商户平台账号

注册地址：接入微信支付 - 微信商户平台

2）微信商户平台配置

微信商户平台接口文档：微信支付接入指引 - 微信支付商户平台

按接口文档配置各种参数（内容很多，仔细看）

3）注册微信公众号账号

地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN

4）微信公众号配置

域名配置

微信公众号与商户平台建立关联

四、编码相关

1、微信支付无非是接口对接，逻辑其实不复杂，复杂的是签名及验签，这个是编码前需要重点突破的点

2、在微信支付对接中证书是有2份的，如流程图中所示：微信商户服务平台下发的证书、定期获取的平台证书

下图中的证书全部来自：微信商户服务平台下发的证书（证书查看地址：证书查看，可通过连接查看证书内容）

 1）前端：JSAPI下单及调起支付代码

<template>
  <div style="width:100%;" class="OrderPayClass" >
      <IfcaNavbar :navTitle="'微信支付'"></IfcaNavbar>
      <div style="width:100%;margin-top:50px">
        正在转向中，请稍候...
        <br>
        <div style="width:100%;">
        如果系统长时间无响应，请<div @click="GoToDetail()" style="color:blue">单击此处</div>查看订单状态
        </div>
      </div>
  </div>
</template>

<style scoped lang="scss"> 
 .OrderPayClass {
     .tab-panel {
         display: flex;
         background-color: #fff;
         padding: 10px 0px;

         .tab {
             flex: 1;
             text-align: center;

             .tab-name {
                 margin-top: 7px;
             }
         }
     }

 
 }
</style>

<script>
import IfcaNavbar from "../../components/IfcaNavbar.vue";
import { reactive, ref, createApp, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { postHttp ,postWeiXinApiHttp} from "../../assets/js/httpApi.js";
import { showLoadingToast, closeToast, showFailToast, showToast, showDialog, showSuccessToast, Uploader } from 'vant';

export default {
    components: {
        IfcaNavbar
    },
   data() {
      const orderguid = this.$route.query.orderguid;
      const wxcode = this.$route.query.code;
      const wxopenid = this.$route.query.wxopenid;

      return {
            orderguid:orderguid,
            wxcode: wxcode,
            wxopenid: wxopenid,
      }
    },

    created() {
        this.WXPayCore();
    },

    methods: {

        GoToDetail() {//跳转详情查看支付进度
            this.$router.push({
                path: "/OrderDetial",
                query: { orderId:  this.orderguid  }
            })
        },

        /**
         * 微信JSAPI下单
         */
        WXPayCore() {
            let params = {
              orderguid:this.orderguid,
              wxcode: this.wxcode,
              openid:this.wxopenid,
              requesturl:location.href//备用，暂时没用到
            }

            showLoadingToast({
                message: '正在处理，请稍后...',
                forbidClick: true,
                overlay: true,
                duration: 0,
                loadingType: 'spinner',
            });

            console.log(JSON.stringify(params));

            this.$postWeiXinApiHttp("AppWebService", "WXPaymentJsApi", JSON.stringify(params)).then(e => {

                closeToast();

                console.log(e.data.Success);

                //showFailToast('e.data.Success;'+e.data.Success);

                if (e.data.Success) {
                    let dataSource = JSON.parse(e.data.Data);
                     
                    //showFailToast('dataSource.appId;'+dataSource.appId);

                    console.log(dataSource);

                    this.callpay(dataSource);

                } else {
                    showFailToast('操作失败，请重试:'+e.data.Message);
                }

            }).catch(err => {

                console.log(`AppWebService,WXPaymentJsApi 接口请求失败。`);

                showFailToast('操作失败，请重试;');
            })
        },

        callpay (data){
                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            //监听没起作用
                            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false)
                        } else if (document.attachEvent) {
                            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data))
                            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data))
                        }
                    } else {
                        this.onBridgeReady(data)
                    }
           },

       /* eslint-disable */
       //这里的代码不会被eslint规则校验
        onBridgeReady(data) {

          console.log("onBridgeReady:"+data);
          console.log("onBridgeReady:data.package:"+data.package);

          WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": data.appId,     //公众号ID，由商户传入     
            "timeStamp": data.timeStamp,     //时间戳，自1970年以来的秒数     
            "nonceStr": data.nonceStr,      //随机串     
            "package": data.package,
            "signType":data.signType,     //微信签名方式：     
            "paySign": data.paySign//微信签名 
          },
          function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            
            //返回订单详情页面
            setTimeout(() =>{
               window.location.href="https://xxx/homeshopping/#/OrderDetial?orderId="+data.orderGuid;
            }, 5000);

            //this.$router.push({
            //    path: "/OrderList",
            //    query: { type: "0" }
            //})