快速实现前端Vue混合模式之原生App webview与H5交互，

效果图如下：

代码如下： 

原生app webview与H5交互实现

原生iOS或Anroid实现代码 需引入WebViewJavascriptBridge框架

<!-- 引入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];

                          }];

                    }

HTML代码部分

<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>

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