vue页面在微信公众号调用支付接口

// 点击了点击购买按钮
async handlePurchase() {   
    const vm = this
    // 获取选中的套餐信息，用的是axios的post方法，因此要包装一下params
    const index = this.activeIndex
    const currentItem = this.rechargeOptionData[index]
    const params = new URLSearchParams()
    params.append('mall_id', currentItem.mall_id)
    // 交互，这里的request是自己封装的axios
    const res = await request.post('/createOrder', params)
    // console.log(res)
    if(res.data.status) {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', vm.jsApiCall, false)
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', vm.jsApiCall)
                document.attachEvent('onWeixinJSBridgeReady', vm.jsApiCall)
            }
        } else {
            this.jsApiCall(res.data.info);
        } else {
            // 使用了vue-toast
            this.$toasted.show(res.data.msg, {
                position: 'top-center',
                duration: 3000
            })
        }
    }
},
// 调用微信JS api 支付
jsApiCall(json) {
        WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        json,
        function(res){
            WeixinJSBridge.log(res.err_msg);
            if(res.err_msg === "get_brand_wcpay_request:ok"){
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                this.$toasted.show(res.err_code + res.err_desc + res.err_msg, {
                    position: 'top-center',
                    duration: 3000
                })
            } else{
                //显示错误信息
                this.$toasted.show(res.err_code + res.err_desc + res.err_msg, {
                    position: 'top-center',
                    duration: 3000
                })
            }
        }
    )
}

参考资料

微信支付开发文档