上代码 解析在下边 适用于所有安卓手机端webview支付
ios 添加微信Scheme即可使用
//拦截H5页面跳转事件 (request ) => boolean true继续跳转 false停止跳转
<WebView>
source={{ uri: 'uri',}}
onShouldStartLoadWithRequest={request => {
//url
const url = request.url;
console.log('nowUrl', request);
//如果跳转的为 微信支付或者 支付宝支付
if (
url.startsWith('weixin://wap/pay?') ||
url.startsWith('alipay')
) {
if (url.startsWith('alipay')) {
//打开支付宝
Linking.openURL(url);
} else {
console.log('wxpay', url);
//打开微信
Linking.openURL(url);
}
return false;
} else {
console.log('未拦截');
return true;
}
}}
</WebView>
因微信支付特殊性 需修改react-nativ-webview 文件node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewManager.java
shouldOverrideUrlLoading方法
修改为以下
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
final String url = request.getUrl().toString();
if(url.startsWith("https://wx.tenpay.com")){
Map<String, String> headers = new HashMap<String, String>();
headers.put("Referer","http:xxxxxxx.xxx");//填入 H5 端的支付域名
view.loadUrl(url, headers);
return true;
}
return this.shouldOverrideUrlLoading(view, url);
}
微信支付解析（仅自己理解）
H5发送跳转事件 跳转到 【https://wx.tenpay.com/xxxx】 的页面（对应底层的拦截） 由此页面生成真正的H5支付信息和跳转链接
这个跳转链接以【weixin://wap/pay?】为开头 在webview中拦截此页面
调用打开浏览器的方法 去打开此链接会自动跳转
