VUE_微信浏览器调用微信支付,h5调用微信支付,h5调用支付宝支付

import { Toast,Dialog  } from 'vant';
//微信支付 兼容微信浏览器和h5
wxpay:function(wxConfig){
    let {
        appId="",
        timestamp="",
        nonceStr="",
        paySign="",
        signType="",
        package:_package="",
        mweb_url="",
    } = wxConfig;
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if(isWeixin){       //微信h5支付
        wx.config({ 
            debug: false, // 这里一般在测试阶段先用ture,等打包给后台的时候就改回false, 
            appId: appId, // 必填,公众号的唯一标识 
            timestamp: timestamp, // 必填,生成签名的时间戳     
            nonceStr: nonceStr, // 必填,生成签名的随机串 
            signature: paySign, // 必填,签名 
            jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 
        }) 
        wx.ready(() => {  
            wx.checkJsApi({     
            jsApiList: ['chooseWXPay'],     
            success:function(res){ 
                // console.log("seccess") 
                // console.log('hskdjskjk', res) 
            }, 
            fail:function(res){      
                // console.log("fail");       
                // console.log(res) 
            }   
            })   
            wx.chooseWXPay({     
                timestamp: timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符     
                nonceStr: nonceStr, // 支付签名随机串,不长于 32 位         
                package: _package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)     
                signType: signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'     
                paySign: paySign, // 支付签名     
                success: function (res) {  // 支付成功后的回调函数       
                    // alert(res.errorMsg) 
                    // this.$router.push('/user');
                    // that.order[0].goods.host_url
                    Toast("支付成功")
                    window.location.href=wxurl
                },     
                fail: function (res) {       
                    // alert("支付失败");       
                    // alert(res.errMsg);
                    // this.$router.back()
                    Toast("支付失败")
                    window.history.go(-1); 
                }   
            }) 
        }) 
        wx.error(err => { 
            // alert(err) 
            Toast("支付失败");
            setTimeout(() => {
                window.history.go(-1); 
            }, 500);
        })
    }else{      //非微信浏览器支付 h5
        window.location.href=mweb_url
        setTimeout(() => {
            Dialog.confirm({
                title: '支付确认',
                message: '确认是否支付?',
                confirmButtonText:"我已支付",
                cancelButtonText:"放弃支付",
            })
            .then(() => {
                // on confirm
                window.location.href='微信支付成功跳转地址'
            })
            .catch(() => {
                // on cancel
                window.history.go(-1); 
            });
        }, 1000);
    }
},
//支付宝支付
zfbpay:function(url){
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if(isWeixin){
        Toast("请不要在微信打开");
        return false;
    }else{
        window.location.href=url
        setTimeout(() => {
            Dialog.confirm({
                title: '支付确认',
                message: '确认是否支付?',
                confirmButtonText:"我已支付",
                cancelButtonText:"放弃支付",
            })
            .then(() => {
                // on confirm
                window.location.href=wxurl
            })
            .catch(() => {
                // on cancel
                window.history.go(-1); 
            });
        }, 1000);
    }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue H5调用微信分享,首先需要引入微信官方的JS-SDK库。在Vue项目的index.html文件中,可以在<head>标签内添加如下代码: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 然后,在Vue组件的created生命周期钩子函数中,使用Vue的axios或者其他网络请求库向后端请求获取微信配置信息。 ```javascript created() { this.fetchWechatConfig(); }, methods: { async fetchWechatConfig() { const response = await axios.get('/api/wechat/config'); // 向后端请求微信配置信息 const { appId, timestamp, nonceStr, signature } = response.data; // 将配置信息存储到全局变量中 this.$store.commit('setWechatConfig', { appId, timestamp, nonceStr, signature }); this.initWechatSDK(); }, initWechatSDK() { const { appId, timestamp, nonceStr, signature } = this.$store.state.wechatConfig; wx.config({ appId, timestamp, nonceStr, signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 配置需要使用的微信API }); // 进行微信SDK的初始化 wx.ready(() => { this.shareToWechat(); }); }, shareToWechat() { const shareData = { title: '分享标题', link: '分享链接', imgUrl: '分享图片链接', desc: '分享描述', }; // 配置分享的具体内容 wx.onMenuShareTimeline(shareData); // 分享到朋友圈 wx.onMenuShareAppMessage(shareData); // 分享给好友 }, }, ``` 上述代码中,我们通过axios库向后端请求了微信配置信息,并将其存储到Vuex的全局状态中。然后,我们使用微信JS-SDK中的`wx.config`方法进行微信验证和初始化配置。一旦初始化成功,`wx.ready`回调函数将会被触发,我们在该函数中调用`shareToWechat`方法来配置分享的具体内容。 在`shareData`对象中,我们可以自定义分享的标题、链接、图片和描述等信息,然后使用`wx.onMenuShareTimeline`方法配置分享给朋友圈的内容,使用`wx.onMenuShareAppMessage`方法配置分享给好友的内容。 最后,我们可以在Vue组件中调用`shareToWechat`方法来触发微信分享。 注意:在实际开发中,需要根据微信的API文档和后端提供的接口来进行相应的调整和配置。以上代码仅为示例,具体实现方式可能会有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值