原文转自: 点我

写在 JSbridge.js

let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //这是必须要写的,用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
//Android使用
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
callback(WebViewJavascriptBridge)
},
false
);
}
console.log('tag', '安卓')
sessionStorage.phoneType = 'android'
} //iOS使用
if (isiOS) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe)
}, 0);
console.log('tag', 'ios');
sessionStorage.phoneType = 'ios'
}
}
//注册回调函数,第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge(function (bridge) {
if (isAndroid) {
//初始化
bridge.init(function (message, responseCallback) {
var data = {
'Javascript Responds': 'Wee!'
};
responseCallback(data);
})
}
}) export default {
// js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)
callHandler(name, data, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(name, data, callback)
})
},
// APP调js方法 (参数分别为:js提供的方法名 回调)
registerHandler(name, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
}

  main.js中引入:

import Bridge from './config/JSbridge.js'
Vue.prototype.$bridge = Bridge

  组件中使用:
  方法名和app开发人员沟通好,这里js调app,app提供的方法是dataToAndroid;app调js,js提供的方法是dataToJs

注册方法
mounted(){
this.getAPPDate()
}, js调app
sendMsg(){
let msg = this.msg
this.$bridge.callHandler('dataToAndroid',msg,(res)=>{
alert('获取app响应数据:'+res)
this.test = res
})
}, app调js
getAPPDate(){
this.$bridge.registerHandler('dataToJs', (data, responseCallback) => {
alert('app主动调用js方法,传入数据:'+ data)
responseCallback(data)
})
}

  

JSbridge 在Vue的封装与交互的更多相关文章

  1. vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

    vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...

  2. vue和php-前后台交互

    vue和php-前后台交互 前端主要代码: <template> <div class="main-member-info"> <form @subm ...

  3. Vue文件封装日历组件

    封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...

  4. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  5. 基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts

    fx67llQuickEcharts A tool to help you use Echarts quickly! npm 组件说明 这本来是一个测试如何发布Vue组件至npm库的测试项目 做完之后 ...

  6. vue如何封装自己需要的方法

    因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目,我自己在做项目的时候自己去琢磨了其他的插件以及结合自己对vue和es2015的理解,自己找的了一种在vue中使用封装方法的 ...

  7. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  8. Go语言远程执行ssh命令简单封装(支持带交互命令)

    使用包:golang.org/x/crypto/ssh 以下封装一个发送命令的Cli结构体 type Cli struct { IP string //IP地址 Username string //用 ...

  9. vue axios 封装(二)

    封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...

随机推荐

  1. 解决:docker-compose端口绑定

    docker-compose 进程绑定 Bind for 0.0.0.0:3825 failed: port is already allocated 查看进程发现有进程在关闭后继续进行 docker ...

  2. Python Request-学习笔记(1)

    #导入Requests模块:import requests # 然后,尝试获取某个网页.返回的是reaponse对象,可以从这个对象中获取所有我们想要的信息.response = requests.g ...

  3. 【一统江湖的大前端(9)】TensorFlow.js 开箱即用的深度学习工具

    示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 目录 一. 上手TensorFlow.js 二. ...

  4. IO流学习总结

    IO: 概述: IO流用来处理设备之间的数据传输,如上传文件和下载文件 Java对数据的操作是通过流的方式 Java用于操作流的对象都在IO包中按照数据流向: 输入流 读入数据 从操作系统上读入文件到 ...

  5. mysql优化之分区

    mysql分区类型 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询的情况,性能会 ...

  6. Daily Scrum 12/21/2015

    Process: Zhaoyang: Integrate the oxford Speech API Code to the IOS client and do some UI optimizatio ...

  7. OkHttp 优雅封装 HttpUtils 之 上传下载解密

    曾经在代码里放荡不羁,如今在博文中日夜兼行,只为今天与你分享成果.如果觉得本文有用,记得关注我,我将带给你更多. 还没看过第一篇文章的欢迎移步:OkHttp 优雅封装 HttpUtils 之气海雪山初 ...

  8. PHP函数:array_rand

    array_rand()  - 从数组中随机取出一个或多个单元. 说明: array_rand ( array $array [, int $num = 1 ] ) : mixed 参数: array ...

  9. 【题解】P4570 [BJWC2011]元素 - 线性基 - 贪心

    P4570 [BJWC2011]元素 声明:本博客所有题解都参照了网络资料或其他博客,仅为博主想加深理解而写,如有疑问欢迎与博主讨论✧。٩(ˊᗜˋ)و✧*。 题目描述 给你 \(n\) 个二元组 \( ...

  10. sudo: 在加载插件“sudoers_policy”时在 /etc/sudo.conf 第 0 行出错 sudo: /usr/lib/sudo/sudoers.so 必须只对其所有者可写 sudo: 致命错误,无法加载插件

    解决办法:  su root chmod 644 /usr/lib/sudo/sudoers.so chown -R root /usr/lib/sudo 千万不要给 /usr 赋全部权限!!!   ...