混合app开发--js和webview之间的交互总结
使用场景:原生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之间的交互总结的更多相关文章
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- python 全栈开发,Day18(对象之间的交互,类命名空间与对象,实例的命名空间,类的组合用法)
一.对象之间的交互 现在我们已经有一个人类了,通过给人类一些具体的属性我们就可以拿到一个实实在在的人.现在我们要再创建一个狗类,狗就不能打人了,只能咬人,所以我们给狗一个bite方法.有了狗类,我们还 ...
- 混合APP开发-hybrid 升级流程
本文来自网易云社区 作者:王贝 目前大多数APP已经应用hybrid进混合开发,这不,我们的gacha APP这个版本已经开始使用hybrid来开发了,hybrid的优势这里就不多说了,这里主要讲一下 ...
- 什么是混合app开发
webApp 移动app 就是在浏览器中运行的web应用 (网页应用)开发成本低 体验差 不需要安装 NativeApp :用Android和object-C原生语言开发的应用 开发成本高 需要安装( ...
- Cordova+vue 混合app开发(一)创建Cordova项目
简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...
- 国内混合APP开发技术选型
http://www.sunzhongwei.com/weex-react-native-ionic-technology-selection 选谁? 企业级应用是要考虑性能和流畅度的, 如果只是做个 ...
- phoneGap+cordova+ionic混合app开发环境搭建
参考链接:http://www.w2 bc.com/article/177257 待补充
- 记录混合APP开发遇到的坑!!
1.在IOS中给body绑定click事件会失效 2.在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是 ...
- Android、JavaScript、WebView之间的交互学习
一.WebView调用Java //1.允许WebView加载jsmWebView.getSettings().setJavaScriptEnabled(true); //2.编写js的接口 ---- ...
随机推荐
- 「HDU6158」 The Designer(圆的反演)
题目链接多校8-1009 HDU - 6158 The Designer 题意 T(<=1200)组,如图在半径R1.R2相内切的圆的差集位置依次绘制1,2,3,到n号圆,求面积之和(n< ...
- 使用Putty执行Rsync命令
背景介绍:公司的文件服务器有多个,一个Master服务器,10个左右的Slave服务器. 当Master服务器中的文件更新之后,Slave服务器中的文件也必须做相对应的同步操作. 公司目前使用的Rsy ...
- 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: ...
- 【BZOJ5298】[CQOI2018]交错序列(动态规划,矩阵快速幂)
[BZOJ5298][CQOI2018]交错序列(动态规划,矩阵快速幂) 题面 BZOJ 洛谷 题解 考虑由\(x\)个\(1\)和\(y\)个\(0\)组成的合法串的个数. 显然就是把\(1\)当做 ...
- Codeforces Round #539 Div1 题解
Codeforces Round #539 Div1 题解 听说这场很适合上分QwQ 然而太晚了QaQ A. Sasha and a Bit of Relax 翻译 有一个长度为\(n\)的数组,问有 ...
- 537. Complex Number Multiplication
题目大意: 给出a, b两个用字符串表示的虚数,求a*b 题目思路: 偷了个懒,Python3的正则表达式匹配了一下,当然acm里肯定是不行的 class Solution: def complexN ...
- Postman的一个使用技巧----设置环境变量
相同的api接口因为部署环境不同,分为test和pre_production 打开Postman,建两个测试集,分别测试测试环境test和演练环境pre_production 下面来介绍一下Postm ...
- Python 3 入门,看这篇就够了
文章目录 简介 基础语法 运算符 变量 数据类型 流程控制 迭代器 生成器 函数 自定义函数 参数传递 可更改与不可更改对象 参数 匿名函数 变量作用域 模块 面向对象 错误和异常 文件操作 序列化 ...
- React之Perf
import Perf from 'react-addons-perf' // ES6语法 var Perf = require('react-addons-perf') // ES5语法针对node ...
- MongoDB 学习记录(二)yum安装
前言:接着上篇继续学习MongoDB,这次学习的是在Linux下安装MongoDB 环境:centos7.3 安装版本:MongoDB4.0 官网安装教程地址 https://docs.mongodb ...