更新记录

2.3（2024-11-23） 下载此版本

组件优化

2.2（2024-10-02） 下载此版本

组件优化

2.0（2024-03-13） 下载此版本

适配vue3

平台兼容性

cc-appToWebview

uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板

●组件模板规划：

由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。

合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；

●组件模板效果图：

可下载项目后预览，效果图见右侧图片；

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏10元后，可终身商用；

●组件模板使用版权/商用：

本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元

（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）

赞赏10元后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）

我的技术公众号(私信可加前端技术交流群)

群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼

使用方法

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

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: {}
            }
        },
        onLoad() {

            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>

原生iOS或Android实现代码

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

                          }];

                    }