React-Native使用安卓原生WebView 实现微信H5支付功能

最近的奇葩需求~RN里接入微信的H5支付,iOS用RN的webview就可以做到,安卓死活不行....但是用安卓原生应用却可以!

于是想到用安卓原生WebView:

新建JAVA文件继承--注意:不是继承至xxxModule

ReactWebViewManager.class

public class ReactWebViewManager extends SimpleViewManager<WebView> {

    public static final String REACT_CLASS = "RCTWebView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected WebView createViewInstance(ThemedReactContext reactContext) {
        WebView webView = new WebView(reactContext);
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        return webView;
    }

    @ReactProp(name = "url")
    public void setUrl(WebView view,@Nullable String url) {
        Log.e("TAG", "setUrl");
        view.loadUrl(url);
    }
    @ReactProp(name = "html")
    public void setHtml(WebView view,@Nullable String html) {
        Log.e("TAG", "setHtml");
        view.loadData(html, "text/html; charset=utf-8", "UTF-8");
    }
}

然后:AnExampleReactPackage.class(新建) 注意:Module中返回Collections.EMPTY_LIST

public class AnExampleReactPackage implements ReactPackage {
    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
//        List<NativeModule> modules = new ArrayList<>();
//        modules.add(new ToastModule(reactContext));
        return Collections.EMPTY_LIST;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new ReactImageManager(),
                new ReactWebViewManager());
    }
}

最后在Application.java中注册

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                   
                    new AnExampleReactPackage() //新增
            );
        }

然后就是再js中使用:

let AndroidWebView = requireNativeComponent('RCTWebView')

<AndroidWebView
       url="https://wxpay.wxutil.com/mch/pay/h5.v2.php"
       style={{ width:'100%', height: 400 }}>
</AndroidWebView>

这个url是微信H5支付的测试连接--提示商家参数格式有误/或者商家参数有误的话,继续修改 ReactWebViewManager.java文件中的WebView-----主要是重写shouldOverrideUrlLoading方法,请求头加入Referer

 @Nonnull
    @Override
    protected WebView createViewInstance(@Nonnull ThemedReactContext reactContext) {
        WebView webView = new WebView(reactContext);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.startsWith("weixin://")) {
                    try {
                        Intent intent = new Intent();
                        intent.setAction(Intent.ACTION_VIEW);
                        intent.setData(Uri.parse(url));
                        reactContext.startActivity(intent);
                    } catch (Exception e) {
                        Toast.makeText(reactContext, "未安装微信应用", Toast.LENGTH_SHORT).show();
                    }
                    return true;
                } else {
                    Map<String, String> extraHeaders = new HashMap<>();
                    extraHeaders.put("Referer","申请通过的商户url");
                    view.loadUrl(url, extraHeaders);
                    return true;
                }


//                view.loadUrl(url);
//                return true;
            }


            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                handler.proceed();
//                super.onReceivedSslError(view, handler, error);
            }
        });
        return webView;

    }