Vue公众号微信支付

需要获取的支付信息：
openid、attach（备注）、body（支付标题）、out_trade_no（订单号）、total_fee（订单价格，单位分，100是一元）、goods_tag（订单类型）

获取支付信息

getPayInfo() {
	let formData = {
		openid：'用户的openid',
		attach：'备注',
		body: '支付标题',
		out_trade_no: '订单号',
		total_fee: 100,
		goods_tag: '订单类型'
	}
	axios({
		method: 'post',
		baseURL: '',
		url: '（支付接口地址）',
		data: qs.stringify(formData)
	}).then((res) => {
		console.log(res.data)
		this.data= res.data
	}).catch((error) => {
		console.log(error)
	})
},

点击支付，判断是否是微信浏览器，微信浏览器打开才会获取到WeixinJSBridge

// 微信支付
pay() {
  if (typeof WeixinJSBridge == "undefined") {
    console.log("请使用微信浏览器打开")
  } else {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
      "appId": '公众账号ID',
      "timeStamp": '时间戳',
      "nonceStr": '随机串',
      "package": '预支付交易码',
      "signType": "MD5", //微信签名方式
      "paySign": '微信签名'
    }, (res) => {
      this.test = res
      if (res.err_msg == "get_brand_wcpay_request:ok") {
        this.$message({
          showClose: true,
          type: 'success',
          message: res.data.msg,
        })
      } else {
        alert("支付取消");
      }
    })
  }
},

Hash模式下会有#，微信支付需要读取授权目录，添加?就不会读取到?之后的路由地址

created() {
  var url = window.location.protocol + "//" + window.location.host + "/?#/Pay/?id=" + this.$route.query.id
  window.location.href = url
  var u = navigator.userAgent,
    app = navigator.appVersion;
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isAndroid) {
    this.isAndroid = true;
  }
  if (isIOS) {
    this.isIos = true;
  }
},