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

Love The Way You Lie 2023-03-13 03:52 20阅读 0赞

# 需求背景 #

在移动端开发中，有的业务页面使用原生平台开发十分繁琐，而使用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截图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 1][]

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

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

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

# 关键代码 #

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

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 = `
          <html>
          <head></head>
          <style>
          
          </style>
          <body>
          
            <h1>这是H5页面</h1>
            <button onclick="sayHelloToApp()">sayHelloToApp</button>
          
            <script>
                
                function sayHelloToApp(){
                    let data = {};
                    data.params={
                        msg:'从H5页面发来的消息',
                    };
                    // 传递事件和数据到APP端
                    window.H5AppBridge.sayHello && window.H5AppBridge.sayHello(data);
                }
                         
                // 这里的方法是提供给APP端调用的
                window.sayHello=function(data){
                    alert(JSON.stringify(data));        
                }     
              
            </script>
          </body>
          </html>
        `;
    
    /**
     * 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 (
                <SafeAreaView style={
       {flex: 1, paddingTop: 50,}}>
    
                    <TouchableOpacity
                        style={
       {
                            height: 40,
                            borderRadius: 20,
                            paddingLeft: 15,
                            paddingRight: 15,
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: '#2988ff'
                        }}
                        onPress={() => {
                            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);
                        }}
                    >
                        <Text>
                            sayHello
                        </Text>
                    </TouchableOpacity>
    
                    <WebView
                        ref={'webview_ref'}
                        source={
       {html: html}}
                        // 初始化webview注入全局代码
                        injectedJavaScript={H5AppBridge}
                        domStorageEnabled={true}
                        scrollEnabled={true}
                        javaScriptEnabled={true}
                        showsVerticalScrollIndicator={false}
                        showsHorizontalScrollIndicator={false}
                        onMessage={event => {
                            this._handleMessage(event);
                        }}
                    />
                </SafeAreaView>
            );
        }
    
        /**
         *
         * @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);
            }
        };
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: /images/20230312/6cca55e0cefb46bcac111baa682a8ea8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 1]: /images/20230312/c8cdb8ed055a48c5bf196bbbab85df5b.png