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的更多相关文章

  1. 14.0 native webview H5切换

    在讲这章之前先说明一个问题,那就是 native webview 都是属于原生的...webview目前用的比较多的是谷歌内核和腾讯X5内核  H5是网页! 还是安卓市场---直接写好脚本进入个人中心 ...

  2. React Native WebView关闭缓存

    React Native WebView关闭缓存 网上搜索没有找到关闭React Native下webview控件的缓存的方法,经测试找到解决方案,记录如下 核心思路:通过请求时设置请求头,使页面缓存 ...

  3. Appium元素定位难点:混合式的native+webview

    现在大部分app都是混合式的native+webview,对应native上的元素通过uiautomatorviewer很容易定位到,webview上的元素就无法识别了. 1.认识识webview & ...

  4. Mobile testing基础之Native、Web、Hybrid、activity、webview

    应用一词指的是app,即application.原生应用指的是能直接运行于当前操作系统的应用程序:web应用指需要在浏览器中运行的网页应用,由于界面体验.功能上都更加强大,可媲美原生应用,故称web应 ...

  5. Appium解决native+webview混合型APP(公众号、小程序)切换webview后元素无法定位问题

    问题:最近在做一个安卓+H5混合开发的APP自动化测试,发现在从native切换到webview后,元素仍然无法找到,报错:no such element 思路:于是思考webview会不会像web页 ...

  6. WebView的使用--Hybrid App

    App页面是运行在WebView中的,一个App页面对应一个WebView,本例实现两个WebView之间的跳转. 实现过程(用到了MUI框架): 1.页面标识+跳转按钮(index.html.mai ...

  7. appium 切换native/ webview,findby,还有页面元素定位一直小于0的问题的解决

    之前一直有个bug没有解决. 今天,终于解决了. 疑问过程: app是混合应用,项目做了H5优化之后,以前的用例执行总会失败,体现在原来的一个元素点击无反馈 排查原因:1.项目做了H5优化,2.测试的 ...

  8. react native webview 不能滑动页面

    用RN 写Android的时候,webview点击正常,但是不能滑动,或者滑动很艰难.调试不报错,inspect一切正常. 遍查网络无良方, 最后发现其他同事在最外层套了个这东西: Touchable ...

  9. Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

    说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...

随机推荐

  1. 用户队列服务API

    /// <summary> /// 用户队列服务API /// </summary> public interface ICustomerQueueManager : ISer ...

  2. 使用template

    1.放置html片段模板 <script id="tpl" type="text/html"> <p>$title</p>& ...

  3. CF1142C U2(计算几何,凸包)

    题目大意:平面上有 $n$ 个点,第 $i$ 个点是 $(x_i,y_i)$.问有多少条抛物线(二次项系数为 $1$),经过这些点中不同的两个点,并且内部(不含边界)没有任何这些点.重合的抛物线只算一 ...

  4. HDU--4417 Super Mario (主席树模版题)

    题目链接 题目让求 L R区间 不大于H 的数有多少 数据太大需要离散化 #include<bits/stdc++.h> using namespace std; #define maxn ...

  5. mysql connections

    在使用MySQL数据库的时候,经常会遇到这么一个问题,就是“Can not connect to MySQL server. Too many connections”-mysql 1040错误,这是 ...

  6. 【洛谷P2142 高精度减法】

    题目描述 高精度减法 输入输出格式 输入格式: 两个整数a,b(第二个可能比第一个大) 输出格式: 结果(是负数要输出负号) 输入输出样例 输入样例#1: 复制 2 1 输出样例#1: 复制 1 说明 ...

  7. Django(三)框架之第二篇

    https://www.cnblogs.com/haiyan123/p/7717788.html 一.知识点回顾 1.MTV模型 model:模型,和数据库相关的 template:模板,存放html ...

  8. 整合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 ...

  9. codesmith 连接mysql

    下载地址是http://dev.mysql.com/downloads/mirror.php?id=403020 请先注册登录后才能下载mysql-connector-net-6.3.7.msi这个文 ...

  10. asp.net 获得伪静态网址解决微信sdk签名问题

    手机网站是asp.net c#编写的,前几天因为要使用微信SDK在手机网站页面使用分享功能,但是程序使用了伪静态功能.如果原地址是:http://ww.xx.com/news/show.aspx?id ...