vue H5调起微信支付

H5调起微信支付

H5只能在微信浏览器内才能发起微信支付，在其他浏览器中无效。

一、在utils文件下面写入一个wxPay.js文件

export default (config, success) => {
  WeixinJSBridge.invoke("getBrandWCPayRequest", config, function(res) {
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      // 使用以上方式判断前端返回,微信团队郑重提示：
      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      success(res);
    }
  });
};

二、在支付页面引入该js文件及一些参数说明

<template>
	<div @click="hanedleWxPay">微信支付</div>
</template>

<script>
import wxPay from "@/utils/wxPay";
export default {
	data() {
		return {}
	},
	methods:{
		hanedleWxPay() {
			//首先要调后端一个接口，接口内返回值需要appid, nonce_str, sign, prepay_id, timestamp
			this.$http.post('后端接口地址').then((res) => {
				let data = {
					appId:res.appId,//公众号id，必传
					nonceStr:res.nonce_str,//随机串，必传
					timeStamp:res.timeStamp,//时间戳，必传
					package:res.prepay_id,//必传
					signType:res.signType,//微信签名方式
					paySign:res.paySign,//微信签名
				}
				if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                       document.addEventListener(
                         "WeixinJSBridgeReady",
                         wxPay(rec.data.data, (rec) => {}),
                         false
                       );
                     } else if (document.attachEvent) {
                       document.attachEvent(
                         "WeixinJSBridgeReady",
                         wxPay(rec.data.data, (rec) => {})
                       );
                       document.attachEvent(
                         "onWeixinJSBridgeReady",
                         wxPay(rec.data.data, (rec) => {})
                       );
                     }
                   } else {
                     wxPay(rec.data.data, (rec) => {});
                   }
			})
		}
	}
}
</script>

以上就是H5在微信浏览器内调起微信支付的方式。