vue 微信支付(hash模式)

1. vue 微信支付遇到的坑

使用的vue-router 的hash模式凉袱, 所以頁面的路徑是www.ssss.com/shop/#/home 的樣子,但是微信支付目錄驗(yàn)證不支持這種hash模式阶剑,所以在微信看來目錄是錯誤趾诗。

// Recharge.vue
created() {
    let config = {};
    config.url = window.location.href;
    // 判斷當(dāng)前url是否存在?參數(shù)匹配符
    if(!config.url.match(/\?/)) {
        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
        return ;
    }
}
2. 微信中拉起微信支付控件
  1. 使用wx的[jssdk](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)句旱;是比較新的方式,需要引入威信度的jssdk
  2.  使用老的WeixinJSBridgeReady方式拉起支付控件魄眉,

這次使用的是后面這種方法: 步需要引入七牛的jssdk直接就可以拉起

 handleWxpay() {
   if(this.isweixin) {
     //options 是接口返回的wx的一些配置信息
     this.wxReadyToPay(options)
   }else {
      console.log('open in wx')
   }
 },
 onBridgeReady(options){
   let that = this
   console.log(options)
   WeixinJSBridge.invoke(
     'getBrandWCPayRequest',
     options,
     function(res){
       console.log(res);
       //使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示:res.err_msg將在用戶支付成功后返回    ok,但并不保證它絕對可靠燃逻。
       switch(res.err_msg){
         case "get_brand_wcpay_request:ok": //支付成功
           console.log('支付成功')
           // that.$router.push({path:'/SettlemenSuccess'})
           break;
         case "get_brand_wcpay_request:cancel": //支付取消
           console.log('取消支付')
           break;
         case "get_brand_wcpay_request:fail": //支付失敗
           console.log('支付失敗')
           break;
         default:
           // console.log(res.err_msg);
         break;
       }
     }
   )
 },
 wxReadyToPay(options){
   let that = this
   if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(options), false);
     }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(options));
       document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(options));
     }
   }else{
     that.onBridgeReady(options);
   }
 },
 isweixin() {
   const ua = window.navigator.userAgent.toLowerCase();
   if(ua.match(/MicroMessenger/i) == 'micromessenger'){
       return true;
   } else {
       return false;
   }
 },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末序目,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子伯襟,更是在濱河造成了極大的恐慌猿涨,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件姆怪,死亡現(xiàn)場離奇詭異叛赚,居然都是意外死亡澡绩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進(jìn)店門俺附,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肥卡,“玉大人,你說我怎么就攤上這事昙读≌俚鳎” “怎么了膨桥?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵蛮浑,是天一觀的道長。 經(jīng)常有香客問我只嚣,道長沮稚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任册舞,我火速辦了婚禮蕴掏,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘调鲸。我一直安慰自己盛杰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布藐石。 她就那樣靜靜地躺著即供,像睡著了一般。 火紅的嫁衣襯著肌膚如雪于微。 梳的紋絲不亂的頭發(fā)上逗嫡,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天,我揣著相機(jī)與錄音株依,去河邊找鬼驱证。 笑死,一個胖子當(dāng)著我的面吹牛恋腕,可吹牛的內(nèi)容都是我干的抹锄。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼荠藤,長吁一口氣:“原來是場噩夢啊……” “哼祈远!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起商源,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤车份,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后牡彻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扫沼,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡出爹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了缎除。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片严就。...
    茶點(diǎn)故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖器罐,靈堂內(nèi)的尸體忽然破棺而出梢为,到底是詐尸還是另有隱情,我是刑警寧澤轰坊,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布铸董,位于F島的核電站,受9級特大地震影響肴沫,放射性物質(zhì)發(fā)生泄漏粟害。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一颤芬、第九天 我趴在偏房一處隱蔽的房頂上張望悲幅。 院中可真熱鬧,春花似錦站蝠、人聲如沸汰具。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽留荔。三九已至,卻和暖如春豌习,著一層夾襖步出監(jiān)牢的瞬間存谎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工肥隆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留既荚,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓栋艳,卻偏偏與公主長得像恰聘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子吸占,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容