第一步：
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，在开发测试时直接去微信接口测试号即可。安全域名可用内网穿透（注意不可带http/https）
安装jssdk并引入
npm i weixin-js-sdk
import wx from "weixin-js-sdk";
第二步：
获取当前页面的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);
});
})
}
}
在后端还没有给到接口的时候直接使用官方提供的示例代码，在微信开发者工具中输入https://www.weixinsxy.com/jssdk/，然后复制控制台中打印出来的配置信息
在main.js中全局引入sdk，方便多个页面使用
// 引入jssdk
import WxJsSdk from './public/js_sdk.js';
Vue.prototype.$WxJsSdk = WxJsSdk;
第三步：
在要使用支付的页面初始化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")
}
},
精彩内容
您阅读本篇文章共花了：
发表评论