使用场景:原生APP内嵌套H5页面,app使用的是webview框架进行嵌套

这样就存在两种情况

1.原生app调用H5的方法

2.H5调用app的方法

分别讲解下,其实app与H5之间的交互式非常简单的,都有成熟的解决方法,下面说下,这次项目中,我们用到的方法

app调用H5方法

其实就一句话,app在引入某个页面的时候可以直接调用这个页面的js方法,但是注意一点,js方法不能有多级嵌套,否则会调用失败

//直接调用可以成功
function fn(){
console.log("调用h5");
} //下面这种情况是调用不成功的
$(document).ready(function(){
function fn(){}//如果app调用这个方法是调用不到的
}); window.onload=function(){
function fn(){}//这个方法也是调用不到的
};

H5调用app的方法

var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i) ? true : false;
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
}
};
var handler = {
callHander: function (json) {
if (isMobile.iOS()) {
window.webkit.messageHandlers.control.postMessage(JSON.stringify(json))
}
if (isMobile.Android()) {
window.control.postMessage(JSON.stringify(json));
}
}
};

直接这样调用就可以了

handler.callHander({
'body':'share' //方法名,这个是和app端自行约定的
...参数写多少都是约定好的
});

这样就可以调用原生的方法了,经常H5的页面嵌套到app中,需要定义头部的导航的标题,和右上角显示的内容,这些其实都可以通过H5传递参数给app来定义的。

混合app开发--js和webview之间的交互总结的更多相关文章

  1. 混合app开发,h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

  2. python 全栈开发,Day18(对象之间的交互,类命名空间与对象,实例的命名空间,类的组合用法)

    一.对象之间的交互 现在我们已经有一个人类了,通过给人类一些具体的属性我们就可以拿到一个实实在在的人.现在我们要再创建一个狗类,狗就不能打人了,只能咬人,所以我们给狗一个bite方法.有了狗类,我们还 ...

  3. 混合APP开发-hybrid 升级流程

    本文来自网易云社区 作者:王贝 目前大多数APP已经应用hybrid进混合开发,这不,我们的gacha APP这个版本已经开始使用hybrid来开发了,hybrid的优势这里就不多说了,这里主要讲一下 ...

  4. 什么是混合app开发

    webApp 移动app 就是在浏览器中运行的web应用 (网页应用)开发成本低 体验差 不需要安装 NativeApp :用Android和object-C原生语言开发的应用 开发成本高 需要安装( ...

  5. Cordova+vue 混合app开发(一)创建Cordova项目

    简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...

  6. 国内混合APP开发技术选型

    http://www.sunzhongwei.com/weex-react-native-ionic-technology-selection 选谁? 企业级应用是要考虑性能和流畅度的, 如果只是做个 ...

  7. phoneGap+cordova+ionic混合app开发环境搭建

    参考链接:http://www.w2  bc.com/article/177257 待补充

  8. 记录混合APP开发遇到的坑!!

    1.在IOS中给body绑定click事件会失效 2.在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是 ...

  9. Android、JavaScript、WebView之间的交互学习

    一.WebView调用Java //1.允许WebView加载jsmWebView.getSettings().setJavaScriptEnabled(true); //2.编写js的接口 ---- ...

随机推荐

  1. 「HDU6158」 The Designer(圆的反演)

    题目链接多校8-1009 HDU - 6158 The Designer 题意 T(<=1200)组,如图在半径R1.R2相内切的圆的差集位置依次绘制1,2,3,到n号圆,求面积之和(n< ...

  2. 使用Putty执行Rsync命令

    背景介绍:公司的文件服务器有多个,一个Master服务器,10个左右的Slave服务器. 当Master服务器中的文件更新之后,Slave服务器中的文件也必须做相对应的同步操作. 公司目前使用的Rsy ...

  3. Codeforces Round #449 (Div. 1) Willem, Chtholly and Seniorious (ODT维护)

    题意 给你一个长为 \(n\) 的序列 \(a_i\) 需要支持四个操作. \(1~l~r~x:\) 把 \(i \in [l, r]\) 的 \(a_i\) 加 \(x\) . \(2~l~r~x: ...

  4. 【BZOJ5298】[CQOI2018]交错序列(动态规划,矩阵快速幂)

    [BZOJ5298][CQOI2018]交错序列(动态规划,矩阵快速幂) 题面 BZOJ 洛谷 题解 考虑由\(x\)个\(1\)和\(y\)个\(0\)组成的合法串的个数. 显然就是把\(1\)当做 ...

  5. Codeforces Round #539 Div1 题解

    Codeforces Round #539 Div1 题解 听说这场很适合上分QwQ 然而太晚了QaQ A. Sasha and a Bit of Relax 翻译 有一个长度为\(n\)的数组,问有 ...

  6. 537. Complex Number Multiplication

    题目大意: 给出a, b两个用字符串表示的虚数,求a*b 题目思路: 偷了个懒,Python3的正则表达式匹配了一下,当然acm里肯定是不行的 class Solution: def complexN ...

  7. Postman的一个使用技巧----设置环境变量

    相同的api接口因为部署环境不同,分为test和pre_production 打开Postman,建两个测试集,分别测试测试环境test和演练环境pre_production 下面来介绍一下Postm ...

  8. Python 3 入门,看这篇就够了

    文章目录 简介 基础语法 运算符 变量 数据类型 流程控制 迭代器 生成器 函数 自定义函数 参数传递 可更改与不可更改对象 参数 匿名函数 变量作用域 模块 面向对象 错误和异常 文件操作 序列化 ...

  9. React之Perf

    import Perf from 'react-addons-perf' // ES6语法 var Perf = require('react-addons-perf') // ES5语法针对node ...

  10. MongoDB 学习记录(二)yum安装

    前言:接着上篇继续学习MongoDB,这次学习的是在Linux下安装MongoDB 环境:centos7.3 安装版本:MongoDB4.0 官网安装教程地址 https://docs.mongodb ...