React-native使用Webview内嵌H5页面混合开发

需求背景

在移动端开发中，有的业务页面使用原生平台开发十分繁琐，而使用H5页面来实现则十分便捷和高效，这就是APP+H5混合开发。

在众多APP当中也能看到H5混合开发的页面。这个需求是十分常见的。

 

交互机制

react-native可以使用Webview组件来内嵌H5页面，在开发过程中，H5页面常常要和APP端进行数据交互。

那么这个交互机制是怎么样的呢？原理如下：

 

- APP端注入JS脚本到H5端，供H5页面调用。

- H5页面调用APP注入的JS脚本的方法，传递事件和数据到APP端。

- APP端在Webview组件注册onMessage回调事件，处理H5传递的事件和数据。

 

这个过程主要通过Webview组件的onMessage()方法和window.ReactNativeWebView.postMessage()方法来实现的。

 

- onMessage()方法详解：https://reactnative.cn/docs/webview#onmessage

 

Demo截图

- 蓝色按钮，是APP端的按钮，点击就可以传递事件和数据到H5页面。

- 蓝色按钮下方则是H5页面，里边有个按钮，点击该按钮，则可以传递事件和数据到APP端。

- 这个就是React-native使用Webview内嵌H5页面交互过程。

 

 

关键代码

1. APP端注入JS脚本到H5端，供H5页面调用。注意postMessage()方法的参数要转为JSON字符串。

 

const H5AppBridge = `
    window.H5AppBridge={
        sayHello:function(data){
            let objData = {};
            // 声明事件类型。