uni-app 前端微信h5支付记录，跳转页面Referer问题

微信H5支付开发文档

1.wx支付流程图

对于前端来说只需要关心1.请求下单；3.得到Url后跳转；7.查询支付结果；10.展示支付结果

1,3一个是请求接口，一个是处理response，主要问题得到url后，跳转页面的问题

做法1：

// #ifdef APP-PLUS
plus.runtime.openURL(url);
// #endif
// #ifdef H5
window.open(url);
// #endif

结果1：

根据提示需要在webview中手动设置header，添加refer

首先新建webview，然后加载 url。H5+API地址链接

var w = plus.webview.create(‘http://m.weibo.cn/u/3196963860’);

w.loadUrl(url,additionalHttpHeaders)

做法2：

// #ifdef APP-PLUS
const platform = uni.getSystemInfoSync().platform
// 创建一个webview
const webview = plus.webview.create('','custom-webview');
// 通过webview打开链接，后面加referer表示该链接是从哪里打开的，请填写申请h5支付的域名，比如：http://www.baidu.com,需要已备案
switch(platform){
  case 'android':
    webview.loadURL(res.data,{'Referer':'https://testskt.mynatapp.cc'});
    break;
  case 'ios':
    webview.loadURL(res.data,{'Referer':'testskt.mynatapp.cc://'});
    break;
  default:
    break;
}
// #endif
// #ifdef H5
window.open(res.data);
// #endif

注意：android和ios的referer不一样问题

对于7，10的做法，我们这边是定义了一个timer,每2.5秒请求一次后台，直至返回结果，返回结果后，跳转一个成功页面，该成功页面有两个按钮，一个是回到首页，一个是查看订单，手动触发跳转自己想要的页面，这个方法有点太消耗资源，如果有更好的方法，可以评论区留言