原生应用与Web应用之间的数据通信

摘要：在移动应用开发中，跨平台数据通信是一个非常重要的问题。uni-app和bridge.js框架文件是实现跨平台数据通信的非常有用的工具。本文将介绍如何使用uni-app和bridge.js框架文件实现原生应用与H5应用之间的数据通信，并提供一个实例来演示如何实现这个功能。

一、引言

随着移动应用市场的不断发展，跨平台应用开发已经成为一个趋势。uni-app是一个基于H5技术的跨平台应用开发框架，它可以让开发者使用一份代码同时构建iOS和Android应用。uni-app提供了丰富的API和工具，使得开发者可以轻松地与原生应用进行数据通信。

bridge.js框架文件是uni-app提供的一个API，它可以让开发者在原生应用和Web应用之间传递数据。bridge.js框架文件是一个非常强大的工具，它支持多种数据格式和多种通信方式。通过使用bridge.js框架文件，开发者可以轻松地实现跨平台的数据通信。

二、实现原理

uni-app和bridge.js框架文件是实现跨平台数据通信的核心工具。uni-app通过使用bridge.js框架文件来实现与原生应用的数据通信。bridge.js框架文件提供了多种数据格式和多种通信方式，使得开发者可以轻松地实现跨平台的数据通信。

bridge.js框架文件的工作原理是，当原生应用需要向Web应用发送数据时，它会调用bridge.js框架文件的dataToJs方法。这个方法会将原生应用需要发送的数据转换成JavaScript对象，并将其发送到Web应用。当Web应用需要向原生应用发送数据时，它会调用bridge.js框架文件的jsToData方法。这个方法会将Web应用需要发送的数据转换成原生应用可以处理的数据格式，并将其发送到原生应用。

 

效果图如下：

 

 

 在原生应用中，需要引入WebViewJavascriptBridge框架 ,我们将向Web应用发送传递数据：

<!-- 引入WebViewJavascriptBridge框架 -->    

 // js与oc交互
    _bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.currentWebView];
    // 设置wkwebview代理对象
    [_bridge setWebViewDelegate:self];

    // js调用oc (注册原生方法给JS调用)
    [self registObjcFunction];

    // OC调用JS jsData：传值数据 methodString：oc调用js方法 这里与H5方法对应：dataToJs
    if (self.jsData && self.methodString) {

        [_bridge callHandler:_methodString data:_jsData responseCallback:^(id responseData) {

           DBLog(@"responseData = %@",responseData);
        }];
    }

                    // 注册原生方法给JS调用
                    - (void)registObjcFunction
                    {
                        // 注册分享方法
                        [self.bridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {

                            [ZJShareManage shareImgWithVC:self title:data[@"title"] describeTitle:data[@"describeTitle"] andUrl:data[@"url"]];

                        }];

                         // 注册返回方法
                          [self.bridge registerHandler:@"goNavBack" handler:^(id data, WVJBResponseCallback responseCallback) {

                              [self.navigationController popViewControllerAnimated:YES];

                          }];

                    }

 

在Vue uni-app应用中，我们使用bridge.js框架文件来实现原生应用与Web应用之间的数据通信 ,我们将接收原生App传来的数据并处理这些数据; 

<template>
    <view class="content">

        <view class="text-area" @click="appToH5()">
            原生app调用H5方法(原生给H5传值)
        </view>

        <view class="text-area" @click="h5ToApp()">
            H5调用原生App方法 （H5给原生传值）
        </view>
    </view>
</template>

<script>

    // #ifdef H5
    import Vue from 'vue'
    import Bridge from '../../components/bridge.js';
    Vue.prototype.$bridge = Bridge;
    // #endif

    export default {
        data() {
            return {
                title: 'Hello',
                myObjData: {}
            }
        },
        () {

            this.appToH5();
        },
        methods: {

            appToH5(){
                //  app向H5传值， h5获取app传值信息（如登录用户信息）
                //  #ifdef H5
                this.$bridge.registerHandler('dataToJs', (data, responseCallback) => {

                    if (typeof data === 'string') {

                        this.myObjData = JSON.parse(data);

                    } else {

                        this.myObjData = data;
                    }
                    // 回调函数
                    responseCallback(data);

                    // oc调用js
                });
                //  #endif
            },

            h5ToApp(){

                // h5调用原生登录方法, 需要在原生注册实现gologin方法
                this.$bridge.callHandler('goLogin', '', res => {

                    if(typeof (res) == 'string'){
                        uni.showModal({
                            title:'返回字符串数据',
                            content: JSON.stringify(res) 
                        })
                    }
                    else{
                        uni.showModal({
                            title:'返回字典串数据',
                            content:JSON.stringify(res) 
                        })

                    }

                });
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-area {
        display: flex;
        justify-content: center;
        background-color: aquamarine;
        height: 44px;
        margin-top: 20px;
        line-height: 44px;
        font-size: 28rpx;
        width: 280px;

    }

</style>

 

阅读全文下载完整代码请关注公众号： 前端组件开发