VUE_vue cli 公众号项目调取微信支付

npm下载

npm i weixin-jsapi

在组件中引用

import wx from "weixin-jsapi"

第一个请求验证支付页面路径
第二个请求拿到后台返回支付签名等拉取微信支付
调用：

//微信提交方法  pay后台返回支付所需数据
wxClick(pay){
    var ua = navigator.userAgent.toLowerCase();			//判断是否是微信浏览器
    var isWeixin = ua.indexOf('micromessenger') != -1;	//判断是否
    if (!isWeixin) {
        Toast("请在微信浏览器中打开");
        return false;
    }
    wx.config({
        debug: false, //这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
        appId: pay.appId,
        timestamp: pay.timestamp,
        nonceStr: pay.nonceStr,
        signature: pay.paysign,
        jsApiList: ["chooseWXPay"]
    });
    wx.ready(() => {
        this.flag = true;
        wx.chooseWXPay({
            timestamp: pay.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: pay.nonceStr, // 支付签名随机串，不长于 32 位
            package: pay.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: pay.paysign, // 支付签名
            success: function(res) {
                alert("成功");
            },
            cancel: function(res) {
                alert("已取消支付");
            }
        });
    });
},