公众号接入JSSDK调用微信支付及常见错误

第一步：

1. 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，在开发测试时直接去微信接口测试号即可。安全域名可用内网穿透（注意不可带http/https）

2. 安装jssdk并引入

npm i weixin-js-sdk
import wx from "weixin-js-sdk";

第二步：

1. 获取当前页面的url地址发送给后端（要注意hash模式下#后面的路径都要去掉），根据后端返回的数据注入配置信息

import wx from "weixin-js-sdk";
import {
    http
} from '../api/request.js'
import api from '../api/api.js'
export default {
    init() {
        let url = location.href.split("#")[0]  //当前页面url  要注意hash模式下#后面的都要去掉
        http({
            url: api.getSignature,
            method: 'GET',
            data: {
                url: url
            }
        }).then(res => {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: "填写你公众号的appid", // 必填，公众号的唯一标识
                timestamp: res.time, // 必填，生成签名的时间戳
                nonceStr: res.str, // 必填，生成签名的随机串
                signature: res.data, // 必填，签名
                jsApiList: [
                    "chooseWXPay"
                ], // 必填，需要使用的JS接口列表
            });
            // wx.config成功后会走wx.ready,失败会走wx.error
            wx.ready(() => {
                // 成功后使用wx,checkJSapI测试你要用的API是否可以用
                wx.checkJsApi({
                    jsApiList: [
                        "chooseWXPay"
                    ],
                    success(res) {
                        console.log(res, "接入成功");
                        // 以键值对的形式返回，可用的api值true，不可用为false
                        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        // 如果这里成功了就改变一个标记下方你就正常调用方法，如果没成功那就改变为false，下方调用API的时候给个友情提示。
                    },
                    error(res) {
                        console.log("失败", res);
                    },
                });
            });
            wx.error((res) => {
                console.log("失败", res);
            });
        })

    }
}

2. 在后端还没有给到接口的时候直接使用官方提供的示例代码，在微信开发者工具中输入https://www.weixinsxy.com/jssdk/，然后复制控制台中打印出来的配置信息

3. 在main.js中全局引入sdk，方便多个页面使用

// 引入jssdk
import WxJsSdk from './public/js_sdk.js';
Vue.prototype.$WxJsSdk = WxJsSdk;

第三步：

1. 在要使用支付的页面初始化sdk

created() {
    // 依赖注入js-sdk
    this.$WxJsSdk.init()
 },

把订单数据发给后端后，使用wx.chooseWXpay()调起支付页面

wx.chooseWXPay({
   timestamp: res.data .timeStamp, 
   nonceStr: res.data.nonceStr, 
   package: res.data.package, 
   signType: 'MD5', 
   paySign: res.data.paySign, // 支付签名
    // success: function(res) {
    // 支付成功后的回调函数
    //    if (res.err_msg == "get_brand_wcpay_request:ok") {
      //       that.getUserInfo()
      //         // alert('支付成功')
      //     }
    // }
 })

分析出现的常见错误

接入jssdk时错误

• invalid url domain ：没有绑定安全域名

• invalid signature签名错误：前端需要保证填写的appid和发送给后端的url路径没错。根据官方文档描述

确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

在调用支付时出现提示“当前页面的URL未注册”

• 原因：公众号支付授权目录或测试授权目录设置不正确。

• 如果当前发起支付的页面路径和后台配置的一样，则要考虑当前页面参数的影响，我这里直接把当前页面参数去掉，改写成和完全后台一样的地址，但会造成路由地址记录覆盖的问题（看具体情况使用）

mounted(){
  if(window.location.href.indexOf('?')!=-1){
      history.pushState(null,null,"/#/pages/payVip/index")
   }
},