h5微信支付功能封装

因为各种原因吧，我们在做移动端开发的时候，涉及到money，我们经常要做微信支付。如果是做小程序开发，我们可以直接用小程序的原生接口，一键搞定，如果是h5网页的话，那我们就需要使用微信提供的js-sdk了。
注：使用了jssdk不是所有的环境都可以调用微信来支付，它只是单纯的微信环境下支付，如果要想支持非微信浏览器内支付，需要开通微信h5支付功能，我们现在用的都是微信的JSAPI支付，而微信的h5支付是要求商户已有H5商城网站，并且已经过ICP备案。哈哈哈哈，是不是很惊讶！太坑了呀！
虽然坑，还得用，那咱就搞一下它。
首先，打开我们的微信公众平台，阅读一下网页开发的基本要求https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html
然后我们了解到，使用js-sdk，我们先要

QQ截图20201111101304.png
也就是我们先要把你们的后台有效访问地址给放到微信里，然后我们再通过npm或者cdn的方式，引入js-sdk。
这里我是用npm安装的weixin-js-sdk,也可以自行根据需要去cdn链接。

npm install weixin-js-sdk --save

然后呢，这里给你们讲一下，我们接下来要做的事情。
首先呢，我们要先要获得网页授权，然后我们跳转我们项目中的业务页面。

QQ截图20201111105322.png

window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?
appid=你的APPID&
redirect_uri=${encodeURIComponent('你的业务页面地址?params='你可能需要传递的参数，没有不写，')}
&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

这里主要是appid和重定向页面，至于是否弹出授权页面（scope=snsapi_userinfo/snsapi_base ）等等，根据你自己需求来。然后呢，我们通过这个来进入页面的时候，在当前你支付页面的url上会有授权后返回的code参数。
如果提示：调用支付jsapi缺少参数: 这是由于没拿到openid导致，可以把window.location.href 替换成window,location.replace() ，这是因为微信网页授权会2次刷新页面，我们这样做能有效避免错误。
然后呢，我们定义一个方法

//获取网页url？后面的参数值
 export function getQueryString(name) {
   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
   var r = window.location.search.substr(1).match(reg);
   if (r != null) {
     return unescape(r[2]);
   }
   return null;
 }

通过 let code = this.getQueryString('code'),我们去调用后端提供的接口，来获取openId。我们的支付不需要我去另外获取openId了，同学们自行卑微的通过接口用code换取openId吧
要注意的是，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期 。
然后我们接下来就是我们真正进行支付操作的时刻了

import { getWxConfig } from 'api/index/index.js';
import { wxPay } from 'api/index/index.js';
import md5 from 'js-md5';
import wx from 'weixin-js-sdk'
export default {
    //判断是否在微信中  
    isWechat: function() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
            // console.log('是微信客户端')
            return true;
        } else {
            // console.log('不是微信客户端')
            return false;
        }
    },
    //初始化sdk配置  
    initJssdk: function(callback, url) {
        //服务端进行签名
        let data = {
            url: encodeURIComponent(url)
        }
        //服务端签名接口
        getWxConfig(data).then(res => {
            if (res.status == 1000) {
                if (res.data) {
                    //如果报config:invalid signature 错误，而signature签名
                    //和微信校验工具签名是一样的
                    //那么可能是公众号后台没有配置接口域名白名单或者配置错误
                    wx.config({
                        debug: false,// 开启调试模式,查看调用的所有api的返回值
                        appId: res.data.appId,// 必填，公众号的唯一标识
                        timestamp: res.data.timestamp,// 必填，生成签名的时间戳
                        nonceStr: res.data.nonceStr,//必填，生成签名的随机串
                        signature: res.data.signature,// 必填，签名
                        jsApiList: [
                            'checkJsApi',
                            'chooseWXPay'
                        ]//必填，需要使用的JS接口列表，具体使用那些sdk接口根据自己需要来填写
                    });
                    //配置完成后，再执行分享等功能  
                    if (callback) {
                        callback(res.data);
                    }
                }
            }
        }).catch(err => {})
    },
    //在需要微信支付页面调用
    weixinPay: function(orderId,url) {
        url = url ? url : window.location.href.split('#')[0];
        this.initJssdk(function(callback) {
            wx.ready(function() {
                //我们自己需要传递的支付参数
                let dataId={
                    orderId:orderId，
                        //这里你们可能有openId
                }
                wxPay(dataId).then(res=>{
                    let packagea = "prepay_id=" + res.data.prepay_id;
                    let timestamp = new Date().getTime();
                    let paySign=`appid=你的appId&timestamp=${timestamp} 
                    &nonceStr=${res.data.nonce_str}&package=${packagea}&signType=MD5`;
                    paySign = md5(paySign);
                    //如果你在调用支付时，错误提示为： 支付返回签名错误
                    //可能是由于后台生成签名时参数大小写没有按照官方文档
                    //大小写来生成签名。故一定要严格按照官方文档要求开发
                    wx.chooseWXPay({
                        timestamp:timestamp, // 支付签名时间戳，
                        //注意微信jssdk中的所有使用timestamp字段均为小写
                        nonceStr:res.data.nonce_str, // 支付签名随机串，不长于 32 位
                        package: packagea, // 统一支付接口返回的prepay_id参数值
                         //提交格式如：prepay_id=***）
                        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign:paySign, // 支付签名
                        success(res) {
                            // 支付成功后的回调函数
                            if(res.errMsg == "chooseWXPay:ok"){
                                let url = '/pages/templates/user-list'
                                //我自己的跳转方法，可以忽略去写你们自己的成功后回调业务
                                this.$navTo.togo(url,param)
                            }
                            
                        },
                        fail(res) {
                            //失败后的操作
                        }
                    });
                })
            });
        }, url);
        
    },
    
}

到这里，我们的微信支付基本就是完成了.其实整体做下来我们发现，无非是比把大象装冰箱里多两步而已

步骤一：绑定域名
步骤二：引入jssdk
步骤三：通过config接口注入权限验证配置
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
  //config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数
  //中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：调用支付接口，over

然后我们把我们封装的接口用起来

//在入口文件main.js中
import wechat from './common/wechat'
if(wechat.isWechat()){
    Vue.prototype.$wechat =wechat;
}

//页面使用
let url = 定义的url或者空，方法里可以自己获取当前页面url;
this.$wechat.isWechat //判断一下是否微信环境，然后做出相对业务操作
this.$wechat.weixinPay(this.orderForm.orderId,url);

到此，一个完整的h5微信支付就完成了。下一次，我们把微信分享也添加进来。这样，一个我们常用的基于微信SDK的支付分享功能就被我们完成了。如果觉得对你有帮助的话，帮作者点个赞吧，码文不易，点一下支持支持！谢谢您嘞！