一、建立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. css3鼠标移动图片上移效果

    css3的功能真是很强大,学无止境,不多说,直接上代码 css部分: <style> ;;} .text-center{text-align:center} .col_cont{width ...

  2. web与原生交互+活动

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Navicat for MySQL 使用SSH方式链接远程数据库(二)

    这里我们使用SSH连接远程mysql数据库 2 SSH这种方式,可以使我们连接到远程服务器,但是现在并不能访问数据库,因为我们还没有连接到数据库 3 既然已经连接到服务器了,我们就该连接服务器上的数据 ...

  4. Python--day32--struct模块

    struct模块:该模块可以把一个类型,如数字,转成固定长度的bytes

  5. P1020 从大到小排序

    题目描述 给你n个整数,请你按照从大到小的顺序输出它们. 输入格式 输入的第一行包含一个整数 \(n(1 \le n \le 10^3)\) ,用于表示元素的个数. 输入的第二行包含 \(n\) 个整 ...

  6. linux 读者/写者自旋锁

    内核提供了一个自旋锁的读者/写者形式, 直接模仿我们在本章前面见到的读者/写者旗标. 这些锁允许任何数目的读者同时进入临界区, 但是写者必须是排他的存取. 读者写者锁有 一个类型 rwlock_t, ...

  7. 浅谈javaScript数据类型、变量、内存之间的关系,文末有图解

    一.变量是没有类型的 在JavaScript中,定义变量的方法是“var 变量名=变量值”,无论这个变量要给他赋值为一个数字.字符串还是数组,他的类型都不需要声明.也就是说如果我只声明了一个变量“va ...

  8. 原 Linux:ping不通baidu.com

    如果某台Linux服务器ping不通域名, 如下提示:  [root@localhost ~]# ping www.baidu.com ping: unknown host www.baidu.com ...

  9. ASP.NET Core 连接 GitLab 与 MatterMost 打造 devops 工具

    在现代化开发工具链里面就包含了自动化的通讯工具,而日志写代码我是推到 Gitlab 平台上,我今天听了郭锐大佬的分享之后,感觉我现在的团队的自动化做的远远不够.我在他的课程上学到的最重要一句话就是做工 ...

  10. P3157 动态逆序对 CDQ分治

    动态逆序对 CDQ分治 传送门:https://www.luogu.org/problemnew/show/P3157 题意: 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对 ...