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 = {};
            // 声明事件类型。
            objData.type='sayHello';
            objData.data = data;
            // 这里注意要把data转化为JSON字符串，postMessage()只接受字符串参数。
            window.ReactNativeWebView.postMessage(JSON.stringify(objData));
        }
    };   
    true;
`;

2. APP端传递事件和数据到H5页面。注意H5方法的参数要转为JSON字符串。

 

const webView = this.refs['webview_ref'];
let params = {
    msg: '这是从RN端传来的消息'
};
// 注意：APP端传递参数到H5页面，要将对象转为JSON字符串
let jsCode = `window.sayHello && window.sayHello(${JSON.stringify(params)});`;
// 调用H5端的方法，并传递数据
webView.injectJavaScript(jsCode);

3. H5页面与APP端交互的JS代码。

 

Demo完整代码

 

import React, {Component} from 'react';
import {View, SafeAreaView, TouchableOpacity, Text} from 'react-native';
import {WebView} from 'react-native-webview';


const html = `
      
      
      
      
      
        
这是H5页面
        sayHelloToApp
      
        
      
      
    `;

/**
 * APP端注入JS脚本到H5端，供H5页面调用。
 * @type {string}
 */
const H5AppBridge = `
    window.H5AppBridge={
        sayHello:function(data){
            let objData = {};
            // 声明事件类型。
            objData.type='sayHello';
            objData.data = data;
            // 这里注意要把data转化为JSON字符串，postMessage()只接受字符串参数。
            window.ReactNativeWebView.postMessage(JSON.stringify(objData));
        }
    };   
    true;
`;

export default class WebviewH5 extends Component {

    constructor(props) {
        super(props);
    }

    render() {

        return (
            

                 {
                        const webView = this.refs['webview_ref'];
                        let params = {
                            msg: '这是从RN端传来的消息'
                        };
                        // 注意：APP端传递参数到H5页面，要将对象转为JSON字符串
                        let jsCode = `window.sayHello && window.sayHello(${JSON.stringify(params)});`;
                        // 调用H5端的方法，并传递数据
                        webView.injectJavaScript(jsCode);
                    }}
                >
                    
                        sayHello
                    
                

                 {
                        this._handleMessage(event);
                    }}
                />
            
        );
    }

    /**
     *
     * @param event
     * @private
     */
    _handleMessage = (event) => {
        console.log("event.nativeEvent", event.nativeEvent);
        const message = event.nativeEvent;
        const webView = this.refs['webview_ref'];
        try {
            let objData = JSON.parse(message.data);
            // let data = JSON.parse(objData.data);
            let data = objData.data;
            console.log("data", data);
            switch (objData.type) {
                case 'sayHello':
                    let params = data.params;
                    if (params) {
                        alert("sayHello:" + params.msg);
                    }
                    break;
            }
        } catch (e) {
            alert("调用APP方法参数错误！参数为：" + message.data);
        }
    };

}