react-native 微信H5支付
通过webView打开支付页面,实现app内的微信H5支付功能。
安卓端:
需要添加webView的referrer信息。
修改react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewManager.java文件。
1.在类(RNCWebViewManager)开头添加referrerUrl定义
public static String referrerUrl = null;
2.在receiveCommand方法内的COMMAND_LOAD_URL下,删除root.loadUrl(args.getString(0)),并添加以下代码:
HashMapheaderMap = new HashMap<>(); if (referrerUrl != null) { headerMap.put("Referrer", referrerUrl); } root.loadUrl(args.getString(0), headerMap);
3.在类(RNCWebVIEWclient)添加设置referrerUrl的方法,在onPageFinished方法内成功时调用。
private void setReferrerUrl(String url) { Uri uri = Uri.parse(url); String protocol = uri.getScheme(); String server = uri.getAuthority(); referrerUrl = protocol + "://" + server; } // 在onPageFinished方法内调用(成功时调用) setReferrerUrl(url);
以下是比较完整的代码,步骤在注释的挎号内:
public class RNCWebViewManager extends SimpleViewManager{ // 添加定义(1) public static String referrerUrl = null; // 修改这个函数下的加载url逻辑,添加ReferrerUrl public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray args) { case COMMAND_LOAD_URL: if (args == null) { throw new RuntimeException("Arguments for loading an url are null!"); } // 删除这行(2) // root.loadUrl(args.getString(0)); // 添加以下4行代码(3) HashMap headerMap = new HashMap<>(); if (referrerUrl != null) { headerMap.put("Referrer", referrerUrl); } root.loadUrl(args.getString(0), headerMap); break; } // 设置referrerUrl protected static class RNCWebViewClient extends WebViewClient { // 新增这个函数,用于设置referrerUrl(4) private void setReferrerUrl(String url) { Uri uri = Uri.parse(url); String protocol = uri.getScheme(); String server = uri.getAuthority(); referrerUrl = protocol + "://" + server; } @Override public void onPageFinished(WebView webView, String url) { super.onPageFinished(webView, url); if (!mLastLoadFailed) { RNCWebView reactWebView = (RNCWebView) webView; reactWebView.callInjectedJavaScript(); emitFinishEvent(webView, url); // 调用设置ReferrerUrl的方法(5) setReferrerUrl(url); } } }
ios端:
不需要修改webView组件,但是需要修改项目配置,添加scheme,解决微信支付完成后,无法跳回app的问题。