VUE_vue开发公众号调用微信支付,微信授权

npm install weixin-js-sdk

1.引用微信支付api

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2.支付方法

data() {
    
    
  return {
    
    
      //支付    提交订单后后端返回数据
      appId:"",
      timestamp:"",
      nonceStr:"",
      paySign:"",
      signType:"",
      package:"",

  }
},
//微信提交方法
onwx(){
    
    
 wx.config({
    
     
     debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false, 
     appId: this.appId, // 必填，公众号的唯一标识 
     timestamp: this.timestamp, // 必填，生成签名的时间戳     
     nonceStr: this.nonceStr, // 必填，生成签名的随机串 
     signature: this.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: this.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符     
         nonceStr: this.nonceStr, // 支付签名随机串，不长于 32 位         
         package: this.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）     
         signType: this.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'     
         paySign: this.paySign, // 支付签名     
         success: function (res) {
    
      // 支付成功后的回调函数       
             // alert(res.errorMsg) 
             // this.$router.push('/user');
             // that.order[0].goods.host_url
             Toast("支付成功")
             window.location.href=wxurl
             this.ongouser()
         },     
         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);
 })
},

微信授权
微信网页授权：scope有两种方式：
scope=snsapi_userinfo：需要用户点击确认，才会去登录
scope=snsapi_base：不需要用户点击确认，默认登录

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="授权后重定向的回调链接地址"&response_type=code&scope=snsapi_userinfo#wechat_redirect

VUE_vue开发公众号调用微信支付,微信授权

猜你喜欢