授权页面
<template> <div> 正在拉取微信授权... <p> <a href="javascript:" @click="gotoWechat()">登陆微信</a> </p> </div> </template> <style scoped> </style> <script type="text/ecmascript-6"> import {WECAHT} from ‘../../../config/lib‘ export default{ data () { return { msg: ‘hello vue‘, appId: WECAHT.appId, uri: WECAHT.uri//微信授权后回调地址
} }, components: {}, created () { }, mounted () { this.gotoWechat() }, methods: { gotoWechat () { let timestamp = new Date().getTime() let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${ this.appId }&redirect_uri=${encodeURIComponent(this.uri)}&response_type=code&scope=snsapi_userinfo&state=${ timestamp }&connect_redirect=1#wechat_redirect` window.location.href = url; } } } </script>
判断是否授权
let code = ‘‘ // https://open.weixin.qq.com/connect/oauth2/authorize?appid=???&redirect_uri=http%3A%2F%2Fwww.haikeuu.com%2FHaikeMobileApp%2F%23%2Fappointment&response_type=code&scope=snsapi_userinfo&state=1502173850125&connect_redirect=1#wechat_redirect if (GetUrlQuery(‘code‘)){ sessionStorage.wechatCode = GetUrlQuery(‘code‘) || ‘‘ this.$store.commit(‘SET_WECHAT‘,{code:GetUrlQuery(‘code‘)}) log(this.$store.state.wechat.code) } if (!sessionStorage.wechatCode){ //this.$router.push(‘wechatAuthorize‘)
跳转授权页面 return }
截取code参数
/* 获取 URL 参数 * params 要获取的参数名 * */ export const GetUrlQuery = params => { let reg = new RegExp("(^|&)" + params + "=([^&]*)(&|$)", "i"); let r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配 let context = ""; if (r != null) context = r[2]; reg = null; r = null; return context == null || context == "" || context == "undefined" ? "" : context; }
发取支付
//保存订单发起
this.$getData.saveOrder(p, (res)=> { if (res.status == ‘S‘) { let p2 = { mealId: res.data.mealId, code: sessionStorage.wechatCode } var _this = this // 微信支付 生成微信订单号 这个接口都是后台提供 this.$getData.wxPayment(p2, r => { WeixinJSBridge.invoke( ‘getBrandWCPayRequest‘, r.data, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { _this.$vux.toast.show({ text: ‘支付成功,3秒后返回‘, type: ‘success‘ }) setTimeout(()=> { window.location.href = ‘#/appointment‘ }, 3000) // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。 } else { _this.$vux.toast.show({ text: ‘支付失败‘, type: ‘cancel‘ }) } } ); }) } else { this.$vux.toast.show({ text: res.msg, type: ‘cancel‘ }) } })