vue 項(xiàng)目中如何實(shí)現(xiàn)授權(quán)獲取微信中的openId

function getUrlKey(name){//獲取url 參數(shù)
 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 }
 
function getCodeApi(state){//獲取code 
 let urlNow=encodeURIComponent(window.location.href);
 let scope='snsapi_base'; //snsapi_userinfo //靜默授權(quán) 用戶無(wú)感知
 let appid='wx4cc5d5c123123123';
 let url=`https://open.weixin.qq.com/connect/oauth3/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
 window.location.replace(url);
}

//注意代碼放置位置
export default {
 created(){
 let code=getUrlKey("code");//獲取url參數(shù)code
 if(code){ //拿到code， code傳遞給后臺(tái)接口換取opend
 getOpenIdApi(code).then(res=>{
   console.log(res);
  }).catch(res=>{})
 }else{
 getCodeApi("123");
 }
 }
}

created(){
 this.userId = JSON.parse(Cookie.get("user")).id;//這是在我頁(yè)面需要獲取的userid，不需要的可自行刪悼，不在支付代碼范圍
 this.getConfig();，
},
methods: {
 getConfig(){
 console.log(window.location.href);
 var url = window.location.href;
 this.$http.post('**此處寫(xiě)后臺(tái)提供獲取jsapi相關(guān)配置的接口**',{
  encodeUrl:Encrypt(url.split("#")[0]) //直接丟棄#及后面的字符串 注意這里Encrypt因?yàn)槲业捻?xiàng)目里使用了ase加密解密，所以這么寫(xiě)的
 })
 .then(function(response) {
  if(response.data.flag == true){
  var data = JSON.parse(Decrypt(response.data.data));//將解密后的字符串轉(zhuǎn)為對(duì)象 Decrypt這里是解密，不需要的就直接過(guò)濾悼
  console.log(data);
  //下列的data.均為后臺(tái)接口返回的字段，比如我的項(xiàng)里里返回的是 appid,timestamp,nonceStr,signature
  wx.config({
   debug: ture,//這里一般在測(cè)試階段先用ture，等打包給后臺(tái)的時(shí)候就改回false,
   appId: data.appid,
   timestamp: data.timestamp, 
   nonceStr: data.noncestr, 
   signature: data.signature,
   jsApiList: ['chooseWXPay']
  })
  wx.ready(function(){
   wx.checkJsApi({
   jsApiList: ['chooseWXPay'],
   success:function(res){
    console.log("seccess")
    console.log(res)
   },
   fail:function(res){
    console.log("fail");
    console.log(res)
   }
   })
  })
  }else{
  Toast({
   message: response.data.detailMsg
  });
  }
 }).catch(function(error){
  Toast({//提示引用的是mint-UI里toast
  message: '獲取config失敗，請(qǐng)重試'
  });
 });
 },
 //報(bào)名繳費(fèi) ( 支付按鈕綁定@click="toapply()"事件)
 toapply(id){ 
 var $this = this;
 this.$http.post('**此處寫(xiě)后臺(tái)提供的獲取支付json數(shù)據(jù)接口**',{
  encodeStr:Encrypt(id)//項(xiàng)目里的加密
 })
 .then(function(response) {
  if(response.data.flag == true){
  var data = JSON.parse(Decrypt(response.data.data));//將解密后的字符串轉(zhuǎn)為對(duì)象
  console.log(data);
  wx.ready(function(){
   wx.chooseWXPay({
   appId:data.appId,
   timestamp: data.timeStamp, // 支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫(xiě)。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫(xiě)其中的S字符
   nonceStr: data.nonceStr, // 支付簽名隨機(jī)串，不長(zhǎng)于 32 
   package: data.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）
   signType: data.signType, // 簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
   paySign: data.paySign, // 支付簽名
   success: function (res) {
    //跳轉(zhuǎn)到支付成功頁(yè)面有這個(gè)頁(yè)面
    $this.$router.push({
    path: "/success_page",
    name:"success_page"
    })
    console.log(res);
   },
   cancel: function (res) {//提示引用的是mint-UI里toast
    Toast('已取消支付');
   },
   fail: function (res) {
    Toast('支付失敗，請(qǐng)重試');
   }
   })
  })
  }else{
  Toast({
   message: '獲取支付信息失敗，請(qǐng)重試',
  });
  }
 }).catch(function(error){
  Toast({
  message: '獲取訂單信息失敗，請(qǐng)重試',
  });
  console.log(error);
 });
 },
}