微信h5支付遇到的問題

在第三方sdk體驗很好的狀況下爲毛要對接h5支付呢？主要是可讓用戶下降充值的門檻，畢竟瀏覽器確定仍是有的，還有一個就是ios的緣由。

此次主要仍是描述一下遇到的一些問題，畢竟後端的同窗已經作了不少的處理，這邊只是須要調用接口就能夠了，還有就是微信有很完善的文檔，不少問題其實都能在文件獲得解決方案

要求

1. 在頁面支付完成以後須要查詢結果
2. 在調起支付的時候，不要刷新頁面（體驗問題）

問題

referer丟失的問題

在咱們拿到微信的payurl以後，用

location.href = payurl
複製代碼

去調起微信支付的是,發現andorid不行，anroid的referer丟失了，這android是能夠解決的，可是舊版依然會有問題,而後找到了另一種方式

let iframe = document.createElement('iframe');
iframe.src = 'payurl';
document.body.appendChild(iframe);
setTimeout(()=>{
    document.body.removeChild(iframe);
},3000)

複製代碼

用iframe的形式發現能夠解決：

• android referer丟失的問題
• 當前頁面不須要刷新，體驗自我感受良好

iframe有referrerPolicy這個屬性，該屬性定義了在獲取資源時發送的引用者,具體文檔

接着又發現了問題，ios12.4的機子，iframe沒法調起微信支付(奔潰

由於恰好這個頁面是在本身的app的內嵌頁，而後app也有javascriptBridge（如下簡稱jsb）能夠打開一個彈窗webview，那麼腦洞就來了（另外一個大佬的點子），經過jsb去讓原生打開一個webview（不可見，透明）而後去打開一箇中轉頁面，接着去調起微信支付

//h5支付綁定的是 aaa.com
jsb(`https://aaa.com/static/function/xxx.html?open=${encodeURIComponent(payurl)}`);

//xxx.html
window.location.href = open;

複製代碼

正常來講其實 只須要頁面去訪問payurl就行了，可是不想頁面刷新。

說明:以上是在app內嵌頁裏面使用，因此有jsb的方式，也能夠保證了瀏覽器的統一，因此沒那麼兼容問題；

---

後面須要作一個頁面是給用戶在普通瀏覽器打開的，就又遇到了問題了；

兼容問題，在qq瀏覽器，uc瀏覽器，safari，android默認瀏覽器，發現有些能夠經過iframe調起微信，有些不行。例如：

safari

//方案一,相似上面的作法，打開一個新窗口

window.open(payurl);

//發現無效，而後去查了一些文檔，看到了一種解決方法
//在 window.open();調用成功了以後，會返回一個新窗口的應用，能夠經過改變locationl來調起微信支付
element.click = ()=>{
    let newWin = window.open();
    getPayurl().then((payUrl)=>{
        newWin.location = payUrl;
        //3秒後關閉新窗口
        setTimeout(()=>{
            newWin.close();
        },3000)
    })
}
/*
注意點：
1.須要有交互去調用window.open
2.newWin.location的賦值須要異步。這裏不知道是否是須要在新的窗口打開以後，纔會返回window的對象去給location賦值。
*/

複製代碼

safari的問題解決了，還有千千萬萬個safari，由於是須要在外部瀏覽器打開的，若是要兼容好這些瀏覽器的話，估計得掛在這了，放棄了，用最終的方案

直接用最最最普通的方式

window.location = "payUrl"
複製代碼

直接忽略「要求」的第二點，至於結果的查詢，用微信支付的return_uri+cookie來去實現。