一、建立JSbrideg.js文件

var jsBridge = {
    isAndroid: null,
    isIOS: null,
    callHandlerFunc: function(json_data){
        var that = this;
        var res_data = null;
        var nv = null;
        // alert("callHandlerFunc");
        var u = navigator.userAgent;
        that.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        that.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(that.isIOS){
            // alert("ios");
            nv = window.GCWebviewJSBridge;
        }else{
            nv = window.WebViewJavascriptBridge;
        }
        nv.callHandler('getOS', json_data, function (response) {
            res_data = response;
        });
        return res_data;
    },
    initJsBridge: function(readyCallback){
        var that = this;
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // 注册jsbridge
        function connectWebViewJavascriptBridge(callback) {
            if (isAndroid) {
                if (window.WebViewJavascriptBridge) {
                    callback(WebViewJavascriptBridge)
                } else {
                    document.addEventListener(
                        'WebViewJavascriptBridgeReady'
                        , function () {
                            callback(WebViewJavascriptBridge)
                        },
                        false
                    );
                }
                return;
            }
            if (isIOS) {
                // alert("ios2222");
                if (window.GCWebviewJSBridge) {
                    return callback(GCWebviewJSBridge);
                }
                if (window.GCWVJSBCallBacks) {
                    return window.GCWVJSBCallBacks.push(callback);
                }
                window.GCWVJSBCallBacks = [callback];
                var GCWVJSBIframe = document.createElement('iframe');
                GCWVJSBIframe.style.display = 'none';
                GCWVJSBIframe.src = 'gcwvjsbscheme://__GC_BRIDGE_LOADED__';
                document.documentElement.appendChild(GCWVJSBIframe);
                setTimeout(function() { document.documentElement.removeChild(GCWVJSBIframe)
                }, 0);
            }
        }
        // 调用注册方法
        connectWebViewJavascriptBridge(function (bridge) {
            if (isAndroid) {
                bridge.init(function (message, responseCallback) {
                    console.log('JS got a message', message);
                    responseCallback(data);
                });
            }
            // 只有在这里注册过的方法,在原声代码里才能用callHandler的方式调��?
           //jsbridge_getJsMessage 是与app定义的方法,前端定义好参数传递,通过此方法响应回传给前端想要的数据data
            bridge.registerHandler('jsbridge_getJsMessage', function (data, responseCallback){
                var jsdata = JSON.parse(data);
              
                responseCallback('native 传过来的是 2:' + data);
            });
            readyCallback();
        });
    }
}
jsBridge.initJsBridge();
export  default {
 
    //发送数据给原生Native App
     callHandler(data) {
     let json = data;
    return jsBridge.callHandlerFunc(json);
},
}

二、注意:在man.js注册使用

import bridge  from 'components/JSbridge'
Vue.prototype.$bridge = bridge;
当需要与app通信获取用户信息,来在前端做路由权限控制时候,不可以在

router.beforeEach((to, from, next) => {})中调用,因为此时 页面未加载,

window.WebViewJavascriptBridge或者

window.GCWebviewJSBridge 都不存在。
本人处理是在 App.vue中  
    watch:{//监测
            '$route'(to,from){

                let app = window.localStorage.getItem('isapp'); //获取是否app进入
                let useid = window.localStorage.getItem('user_id'); //获取useid

if(app){

                    if(!useid){
                        if(to.path == '/' || to.path == '/c' || to.path == '/a' ||  to.path == '/b'){
                            return;
                        }

}else{

                      var json= {"type":101,"videoId":""};
                      this.$bridge.callHandler(JSON.stringify(json));向app通信,会在注册方法中得到用户信息,把用户id(用户信息)记录缓存中

}

           
             }}

vue 项目使用JSbrideg.js与app通信的更多相关文章

  1. vue项目配置Mock.js

    扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...

  2. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

  3. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  4. Vue项目【饿了么App】mock数据【data.json】

    1.前后端分离式开发,约定好数据字段接口! 2.前端mock静态数据,开发完毕后,与后端进行数据联调! 3.vue.config.js 配置 devServer const appData = req ...

  5. Vue 项目中 外部js 如何获取 vue 实例

    1.将main.js 中的 Vue 实例暴露出去 2.在外部js中导入main.js (    import vm from '../main' );

  6. webpack / vue项目 config/index.js配置(用于配置webpack服务器代理)

    'use strict' // Template version: 1.1.3 // see http://vuejs-templates.github.io/webpack for document ...

  7. vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  8. vue项目进入mui.js报错 typeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode .....

    在做项目时,引用mui报错如下 看样子就是不支持严格模式吧. 解决方法是在根目录 下的.babelrc文件里面添加过滤掉.不用严格模式

  9. vue项目打包之后js文件过大怎么办?

随机推荐

  1. hdu 1358 Period (KMP求循环次数)

    Problem - 1358 KMP求循环节次数.题意是,给出一个长度为n的字符串,要求求出循环节数大于1的所有前缀.可以直接用KMP的方法判断是否有完整的k个循环节,同时计算出当前前缀的循环节的个数 ...

  2. MVC插件式开发平台

    ---恢复内容开始--- 经过DyOS.BraveOS1.0再到BraveOS2.0,系统现在已经开发了下载. 我们的目标是,网页版操作系统,可以在线安装更新软件,并提供二次开发平台,提供基础的逻辑和 ...

  3. CentOS 安装 semanage 命令

    CentOS 安装 semanage 命令 在服务器上运行: [root@ca1 ~]# yum install policycoreutils-python vim /etc/selinux/con ...

  4. 立足GitHub学编程:13个不容错过的Java项目

    立足GitHub学编程:13个不容错过的Java项目 今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自 ...

  5. 你以为SSL是安全的吗?

    在现代的IT安全领域,很大程度上依赖SSL来保障通讯安全.但SSL是安全的吗? 在2005年,王小云证明SHA-1能在较短的时间内找到碰撞.王小云发现SHA-1的安全弱点是偶然还是必然? 就我所知,各 ...

  6. 2018-8-10-win10-uwp-使用-Geometry-resources-在-xaml

    title author date CreateTime categories win10 uwp 使用 Geometry resources 在 xaml lindexi 2018-08-10 19 ...

  7. H3C 高级ACL部署位置示例

  8. vs code 如何修改默认主题的注释颜色

    平时喜欢将注释的颜色调成绿色,既不刺眼,也比较醒目,在大型项目中,能很容易的根据注释找道想要的部分:但是,每次修改完使用一段时间后,当vs code 自动更新了,又变成默认的颜色了,为了方便每次快速修 ...

  9. 从零开始学习Kafka

    简介 kafka是一个分布式消息队列.具有高性能.持久化.多副本备份.横向扩展能力.生产者往队列里写消息,消费者从队列里取消息进行业务逻辑.一般在架构设计中起到解耦.削峰.异步处理的作用. Kafka ...

  10. tsung测试xmpp遇到no_free_userid

    tsung里面可以配置xmpp的参数,设置一下 <option type="ts_jabber" name="userid_max" value=&quo ...