vuejs里封装的和IOS,Android通信模块
项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致。使用WebViewJavascriptBridge。
其实也是通过拦截url scheme,支持ios6往前的系统
iOS与H5交互的方案
纵观所有iOS与H5交互的方案,有以下几种:
- 第一种:有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互,通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所对应的要处理的功能是什么。任意版本都支持。
- 第二种:iOS7之后出了JavaScriptCore.framework用于与JS交互,但是不支持iOS6,对于还需要支持iOS6的app,就不能考虑这个了。
- 第三种:WebViewJavascriptBridge开源库使用,本质上,它也是通过webview的代理拦截scheme,然后注入相应的JS。
- 第四种:react-native
/**
* 函数描述:js调用webview事件
*
* jsBridge.callHandler(method, data, callBack(response));
* @param method {string} 方法名
* @param data {Object} 参数
* @return {Object} 回调
*/ /**
* 函数描述:webView调用JS事件
*
* jsBridge.registerHandler(method, callBack(response));
* @param method {string} 方法名
* @return {Object} 回调
*/ var JsBridge = {
init: function(callback) {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (!isiOS) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
callback(WebViewJavascriptBridge)
},
false
);
}
} else {
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)
}
}, first: function() {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (!isiOS) {
var _this = this;
_this.init(function(bridge) {
bridge.init(function(message, responseCallback) {
responseCallback(data);
})
})
}
}, registerHandler: function(name, fun) {
var _this = this;
_this.init(function(bridge) {
bridge.registerHandler(name, fun);
})
}, callHandler: function(name, data, fun) {
var _this = this;
_this.init(function(bridge) {
bridge.callHandler(name, data, fun);
})
}
} JsBridge.first(); export {
JsBridge
};
vuejs里封装的和IOS,Android通信模块的更多相关文章
- 微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播(VoD)方案
微软的云平台媒体服务为流媒体服务提供了多种选择,在使用流媒体服务为企业做流媒体方案时,首先需要确认要流媒体接收目标,如针对广大iOS, Android移动设备,由于它们都支持HLS 格式的流媒体,基于 ...
- 微软云平台媒体服务实践系列 2- 使用动态封装为iOS, Android , Windows 等多平台提供视频点播(VoD)方案
文章微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播(VoD)方案 介绍了如何针对少数iOS, Android 客户端的场景,出于节约成本的目的使用媒体服务的静 ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- 【转】从开发者的角度看待各移动平台 ios/android/wp7/win8ost title
T_T 这伪技术博客都快给写成Tron的读书笔记专栏了,这样可不行欸~ 如今正是移动平台的战国时期,厌烦了去讨论移动平台的未来,也无意于在HTML5和Native App之间纠结.本文只从开发者纯技术 ...
- Xamarin体验:使用C#开发iOS/Android应用
Xamarin是Mono创始人Miguel de Icaza创建的公司,旨在让开发者可以用C#编写iOS, Android, Mac应用程序,也就是跨平台移动开发. 简介 Xamarin是基于Mo ...
- fir.im Weekly - iOS/Android 应用程序架构解析
假如问你一个iOS or Android app的架构,你会从哪些方面来说呢? 本期 fir.im Weekly 收集了关于 iOS/Android 开发资源,也加入了一些关于 Web 前端方面的分 ...
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- C#/IOS/Android通用加密解密方法
原文:C#/IOS/Android通用加密解密方法 公司在做移动端ios/android,服务器提供接口使用的.net,用到加密解密这一块,也在网上找了一些方法,有些是.net加密了android解密 ...
- 关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js
一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...
随机推荐
- Oracle的优化器介绍
Oracle优化器介绍 本文讲述了Oracle优化器的概念.工作原理和使用方法,兼顾了Oracle8i.9i以及最新的10g三个版本.理解本文将有助于您更好的更有效的进行SQL优化工作. RBO优化器 ...
- Using Script and Style Bundles【翻译】
遇到个MVC4中的bundles的问题,问了别人,由于不熟悉MVC4,始终问不到点子上,所以自己就翻译了下资料,搞明白了这个VS显示正常IIS显示异常的小问题,申明我翻译的很烂,不过共享出来或许会帮到 ...
- 11g新特性-dba_users安全性的一些增强
1.dba_user表的password(除了GLOBAL和EXTERNAL的密码)不再保存密码. 查询10g的dba_user表 SQL> select username,password f ...
- UVA 12544 - Beehives O(nm) 无向图最小环
Bees are one of the most industrious insects. Since they collect nectarand pollen from flowers, they ...
- HDU1003 简单DP
Max Sum Problem Description Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the ...
- 黑科技装点圣诞节,美国邮政局用AR APP邮寄圣诞包裹
AR手游<精灵宝可梦Go>的出现将增强现实技术带到了众人的视线中,各大公司纷纷紧抓AR的发展前景,同时积极将AR功能引入自家产品中.临近圣诞,又到了一年一度的快递高峰期,据591ARVR资 ...
- Bugtags 测试平台(支持ios、android)
官网:https://bugtags.com/ 注意:小米手机 授权 打开漂浮窗 App 集成 Bugtags SDK 后,测试人员就可直接在 App 里所见即所得的提交 Bug; SDK 会自动截屏 ...
- 洛谷 P1204 [USACO1.2]挤牛奶Milking Cows Label:模拟Ex 74分待查
题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶,一直到1000秒.第二个农民在700秒开始,在 1200秒结束.第三个农民在1500秒开 ...
- [BZOJ1501][NOI2005] 智慧珠游戏
Input 文件中包含初始的盘件描述,一共有10行,第i行有i个字符.如果第i行的第j个字符是字母”A”至”L”中的一个,则表示第i行第j列的格子上已经放了零件,零件的编号为对应的字母.如果第i行的第 ...
- 在docker 中配置hadoop1.2.1 cluser
最近一直在找工作,比较空闲,就没事研究一下hadoop,网上的视频及书,讲的差不多都是1.2.1这个版本,然后就试着在docker中搭建了一个hadoop集群, 项目已经放到了github上面了,供新 ...