Native/Webview bridge for Hybrid
Native/Webview bridge for Hybrid
安装
npm i --save webview-bridge
特点
- 支持自定义app URL scheme
- 支持多种处理方式(全部涵盖)
- 支持Promise处理回调
使用
import Bridge from 'hybride-webview-bridge'; // 如果客户端没有使用URL scheme,则不需要传递参数
const WebViewBridge = new Bridge('mqq://');
WebViewBridge.call(); // 将会唤起手机版qq软件 /**
* 调用原生方法
* @param {String} method 方法名
* @param {Object} params 参数
* @return {Promise} 当收到原生方法执行的返回结果时resolve
*/
// WebViewBridge.call(method, params); // for instance
WebViewBridge.call('getUserInfo').then(res => {
// handle response info
}); // for instance
WebViewBridge.call('getLocation', { CacheMode: 0 }).then(res => {
// handle response info
});
要求(原理)
1、如果ios开发在ios8及以上系统使用postMessage,请支持js变量window.webkit.messageHandlers.WebViewBridge,内部实现如下:
window.webkit.messageHandlers.WebViewBridge.postMessage(JSON.stringify({
method: 'getLocation',
params: {
CacheMode: 0,
},
}));
2、客户端注入全局对象 WebViewBridge,并实现call方法,js用法如下:
window.WebViewBridge.call('getLocation', JSON.stringify({
CacheMode: 0,
}));
如果没有实现call方法,则js内部会调用被注入WebViewBridge对象方法,如:
window.WebViewBridge.getLocation(JSON.stringify({
CacheMode: 0,
}));
3、如果不支持postMessage发送消息,也没有注入全局js对象,最一种就是使用URL scheme了,客户端url拦截处理,这种方式需要使用setTimeout延时处理,避免后者覆盖前者(同时调用多次)协议地址类似如下:
const msg = decodeURIComponent(JSON.stringify({
method: 'getLocation',
params: {
CacheMode: 0,
},
}));
const URLScheme = `qq://${msg}`;
callback 回调
当调用 WebViewBridge.call('getUserInfo')成功,要求客户端调用前端 WebViewBridgeCallback 方法进行响应,源码如下:
/**
* 调用原生客户端方法后执行的回调函数
* @param {String} method 方法名
* @param {Object|String} res 回调响应信息
*/
window.WebViewBridgeCallback = (method, res) => {
if (typeof res === 'String') {
res = JSON.parse(res);
}
window.WebViewBridge.receiveResponse(method, res);
};
知识点扩充
android
安卓通过addJavaScriptInterface方法注入Java对象到js上下文对象window中,由于4.2以下版本中,该方法有漏洞, 解决该漏洞的方法有两种,第一种通过URL scheme解决,第二种通过如下方案解决:
webview.loadUrl("javascript:if(window.WebViewBridge === undefined) { window.WebViewBridge = { call: function(jsonString) { window.prompt(jsonString); }}};");
在webview中通过loadUrl定义一个window.WebViewBridge及call通用方法,方法体内执行了window.prompt,然后在WebChromeClient类中处理onJsPrompt,设置拦截规则,onJsPrompt返回true,将不处理dialog;
推荐文章:安卓Webview
ios
ios8系统及以上版本可以通过注入 window.webkit.messageHandlers.XXX.postMessage方法,我们可以使用这个方法直接向 Native 层传值,非常方便。 推荐文章:postMessage技术 ios官方webkit网站
ios7开始,还可以使用javascriptcore注入Java对象到js上下文对象window中 最后一种 ios也支持URL scheme
推荐文章:WKWebview相关
个人微信公众号:
Native/Webview bridge for Hybrid的更多相关文章
- 14.0 native webview H5切换
在讲这章之前先说明一个问题,那就是 native webview 都是属于原生的...webview目前用的比较多的是谷歌内核和腾讯X5内核 H5是网页! 还是安卓市场---直接写好脚本进入个人中心 ...
- React Native WebView关闭缓存
React Native WebView关闭缓存 网上搜索没有找到关闭React Native下webview控件的缓存的方法,经测试找到解决方案,记录如下 核心思路:通过请求时设置请求头,使页面缓存 ...
- Appium元素定位难点:混合式的native+webview
现在大部分app都是混合式的native+webview,对应native上的元素通过uiautomatorviewer很容易定位到,webview上的元素就无法识别了. 1.认识识webview & ...
- Mobile testing基础之Native、Web、Hybrid、activity、webview
应用一词指的是app,即application.原生应用指的是能直接运行于当前操作系统的应用程序:web应用指需要在浏览器中运行的网页应用,由于界面体验.功能上都更加强大,可媲美原生应用,故称web应 ...
- Appium解决native+webview混合型APP(公众号、小程序)切换webview后元素无法定位问题
问题:最近在做一个安卓+H5混合开发的APP自动化测试,发现在从native切换到webview后,元素仍然无法找到,报错:no such element 思路:于是思考webview会不会像web页 ...
- WebView的使用--Hybrid App
App页面是运行在WebView中的,一个App页面对应一个WebView,本例实现两个WebView之间的跳转. 实现过程(用到了MUI框架): 1.页面标识+跳转按钮(index.html.mai ...
- appium 切换native/ webview,findby,还有页面元素定位一直小于0的问题的解决
之前一直有个bug没有解决. 今天,终于解决了. 疑问过程: app是混合应用,项目做了H5优化之后,以前的用例执行总会失败,体现在原来的一个元素点击无反馈 排查原因:1.项目做了H5优化,2.测试的 ...
- react native webview 不能滑动页面
用RN 写Android的时候,webview点击正常,但是不能滑动,或者滑动很艰难.调试不报错,inspect一切正常. 遍查网络无良方, 最后发现其他同事在最外层套了个这东西: Touchable ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
随机推荐
- 用户队列服务API
/// <summary> /// 用户队列服务API /// </summary> public interface ICustomerQueueManager : ISer ...
- 使用template
1.放置html片段模板 <script id="tpl" type="text/html"> <p>$title</p>& ...
- CF1142C U2(计算几何,凸包)
题目大意:平面上有 $n$ 个点,第 $i$ 个点是 $(x_i,y_i)$.问有多少条抛物线(二次项系数为 $1$),经过这些点中不同的两个点,并且内部(不含边界)没有任何这些点.重合的抛物线只算一 ...
- HDU--4417 Super Mario (主席树模版题)
题目链接 题目让求 L R区间 不大于H 的数有多少 数据太大需要离散化 #include<bits/stdc++.h> using namespace std; #define maxn ...
- mysql connections
在使用MySQL数据库的时候,经常会遇到这么一个问题,就是“Can not connect to MySQL server. Too many connections”-mysql 1040错误,这是 ...
- 【洛谷P2142 高精度减法】
题目描述 高精度减法 输入输出格式 输入格式: 两个整数a,b(第二个可能比第一个大) 输出格式: 结果(是负数要输出负号) 输入输出样例 输入样例#1: 复制 2 1 输出样例#1: 复制 1 说明 ...
- Django(三)框架之第二篇
https://www.cnblogs.com/haiyan123/p/7717788.html 一.知识点回顾 1.MTV模型 model:模型,和数据库相关的 template:模板,存放html ...
- 整合shiro出现【Correct the classpath of your application so that it contains a single, compatible version of org.quartz.Scheduler】
跑的时候出现错误: Description: An attempt was made to call the method org.quartz.Scheduler.getListenerManage ...
- codesmith 连接mysql
下载地址是http://dev.mysql.com/downloads/mirror.php?id=403020 请先注册登录后才能下载mysql-connector-net-6.3.7.msi这个文 ...
- asp.net 获得伪静态网址解决微信sdk签名问题
手机网站是asp.net c#编写的,前几天因为要使用微信SDK在手机网站页面使用分享功能,但是程序使用了伪静态功能.如果原地址是:http://ww.xx.com/news/show.aspx?id ...