需求是在移动端的微信内置浏览器里使用微信支付，需要跳转到一个自定义的页面去，获取code值，支付成功之后，还要跳转回去原来的页面。
url格式：
http://xxx.com/?code=061NnYFa1sSJ4D0DttFa1xCA4G0NnYFU&state=STATE#/wxcode
正则表达式获取微信code：
this.weChatCode = window.location.search.substring(6).split('&')[0]
效果：
微信内置浏览器里使用微信支付，需要注意的点：
1、微信内置浏览器。在严格模式下。无法使用window对象
2、微信返回的code包含在url里面，需要自己去截取
3、返回上一页。微信内置浏览器里，如果想跳转回原来的页面，我们需要在跳转之前就缓存好那个页面地址，可以使用路由跳转
4、设置的跳转链接微信支付redirect_url域名。必须确保微信授权域名填写一致
5、检查下单接口传的appid与获取openid接口的appid是否同一个（需一致）
6、检查appid对应的公众号或小程序后台（mp.weixin.qq.com），是否配置的授权域名和获取openid的域名一致。授权域名配置路径：微信公众平台--设置--公众号设置--功能设置--网页授权域名
跳转前：
/**
* 如果是微信内支付。
* 还需要跳转到指定网址，去获取微信code
*/
getWeChatCode() {
let appId = 'xxxxxx'
this.$message.info('微信授权中……')
let currentUrl = encodeURIComponent(
'http://xxx.com/#/wxcode'
)
window.location.href =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
appId +
'&redirect_uri=' +
currentUrl +
'&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect'
},将要跳转到的支付页面：
<template>
<div class="back-page">
<h1>正在支付中……请不要关闭网页</h1>
<!-- <p>微信内置浏览器获取的：</p>-->
<!-- <p>原来的url：{
{ oldUrl }}</p>-->
<!-- <p>新的的url：{
{ newUrl }}</p>-->
<!-- <p>wxOrder:::{
{ wxOrder }}</p>-->
<!-- <p>weChatCode:::{
{ weChatCode }}</p>-->
<!-- <p>weChatParameter:::{
{ weChatParameter }}</p>-->
<!-- <p>messageRes::::{
{ messageRes }}</p>-->
<!-- <p>wechatPaySuccess是否购买成功？::::{
{ $store.state.user.wechatPaySuccess }}</p>-->
</div>
</template>
<script>
export default {
data() {
return {
oldUrl: null, //原来的url
newUrl: null, //截取#后的路由
weChatCode: null, //提取的code
wxOrder: null, //wxOrder
weChatParameter: null,
messageRes: null
}
},
components: {},
computed: {},
methods: {
init() {
this.getWeChatCode()
},
getWeChatCode() {
this.oldUrl = window.location.href
// 需要用正则处理一下code，因为code位于url中间。格式：http://xxx.com/?code=061NnYFa1sSJ4D0DttFa1xCA4G0NnYFU&state=STATE#/wxcode
this.weChatCode = window.location.search.substring(6).split('&')[0]
this.wxOrder = this.$store.state.user.wxOrder
this.$store.commit('SET_WECHATCODE', this.weChatCode)
this.weChatPay()
},
weChatPay() {
// 如果是微信内支付。还需要去获取微信code
if (this.weChatCode) {
// this.$message.success('调用后台接口，传code了');
this.$api
.innerWechatpay({ id: this.wxOrder, code: this.weChatCode })
.then(res => {
if (res.code == 200) {
// this.$message.success('通过code成功获取参数');
this.weChatParameter = res.data
this.checkWeChatJSBridge()
} else {
this.$message.error(res.msg)
}
})
.catch(err => {
this.$message.error(err)
})
} else {
// this.$message.success('没有微信code！无法支付');
}
},
//解决微信内置对象报错
checkWeChatJSBridge() {
let vm = this
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener(
'WeixinJSBridgeReady',
vm.onBridgeReady(),
false
)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady())
document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady())
}
} else {
vm.onBridgeReady()
}
},
//微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
onBridgeReady() {
let vm = this
let timestamp = Math.round(vm.weChatParameter.timeStamp).toString()
// vm.$message.success('开始调用微信jsapi');
// eslint-disable-next-line
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: vm.weChatParameter.appId, //公众号名称，由商户传入
timeStamp: timestamp, //时间戳，自1970年以来的秒数
nonceStr: vm.weChatParameter.nonceStr, //随机串
package: vm.weChatParameter.package, //预支付交易码
signType: vm.weChatParameter.signType, //微信签名方式：
paySign: vm.weChatParameter.paySign //微信签名
// jsApiList: ['chooseWXPay']
},
function(res) {
vm.$message.success(res)
vm.messageRes = res
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
if (res.err_msg == 'get_brand_wcpay_request:ok') {
vm.$message.success('支付成功')
vm.number = null
// vm.$router.go(-1)
vm.$store.commit('SET_WECHATPAYSUCCESS', true)
//window.location.href = vm.BASE_URL + 'index.html#/depositResult'
vm.goBack()
} else {
vm.$message.error('取消支付')
vm.$message.error('支付失败')
vm.$message.error('即将返回上一页')
vm.$store.commit('SET_WECHATPAYSUCCESS', false)
vm.goBack()
}
}
)
},
goBack() {
//如果有支付成功，才跳转回去
console.log(
'如果有支付成功，才跳转回去??',
this.$store.state.user.wechatPaySuccess
)
this.$message.success('支付成功，即将返回上一页')
console.log('返回地址??')
console.log(localStorage.getItem('returnUrl'))
console.log(this.$store.state.user.returnUrl)
let returnUrl = this.$store.state.user.returnUrl
console.log('调到缓存的页面地址', returnUrl)
// window.open(url);
// 截取#后的路由
this.newUrl = returnUrl.split('#')[1]
console.log('截取#后的路由??', this.newUrl)
this.$router.push(this.newUrl)
}
},
created() {
this.init()
},
mounted() {}
}
</script>
<style lang="less" scoped>
.back-page {
width: 100%;
margin: 0 auto;
h1 {
line-height: 50px;
margin: 0 auto;
}
}
</style>