原生_H5交互插件(适用于与V2.1)
这是js代码
/*
* 适合版本为 2.1.0
* 前提是url上加 from=app
*/
var Native = {};
var ua = navigator.userAgent;
var oUrl = location.search;
var tc = /from=app/i;
//原生H5交互
function C_interaction(a,b){
if(tc.test(oUrl)){
//1.checkLogin js调native 判断登录 有回调 有参数
if(b=="checkLogin"){
Native.checkLogin = function(n){
a(n);
};
var parameter = '{"obj":"Native","funcName":"checkLogin"}';
yinhu.checkLogin(parameter);
}
//2.loginAction js调native 调用登录 有回调 有参数
else if(b=="loginAction"){
Native.loginAction =function(n){
a(n);
};
var parameter = '{"obj":"Native","funcName":"loginAction"}';
yinhu.loginAction(parameter);
}
//3.productListAction js调native 产品列表 无回调 无参数
else if(b=="productListAction"){
yinhu.productListAction();
}
//4.dialService js调native 拨打客服 无回调 有参数
else if(b=="dialService"){
var C_phone = a();
yinhu.dialService(C_phone)
}
//5.checkAppVersion js调native 版本号 有回调 有参数
else if(b=="checkAppVersion"){
Native.checkAppVersion = function(n){
a(n);
};
var parameter = '{"obj":"Native","funcName":"checkAppVersion"}';
yinhu.checkAppVersion(parameter);
}
//待优化部分
//6.registerAction js调native 注册 无回调 有参数
else if(b=="registerAction"){
if(ua.indexOf('iPhone') >= ||ua.indexOf('iPad') >= ){
location.href="inyinhu://yinhu/router/?buttonAction=register&code="+a();
}
else if(ua.indexOf('Android') >= ){
var C_code = a;
yinhu.registerAction(C_code)
}
}
//7.native调js 分享功能 无回调 有参数
else if(b=="shareAction"){
var a = a();
if(ua.indexOf('iPhone') >= ||ua.indexOf('iPad') >= ){
location.href="inyinhu://yinhu/router/?buttonAction=socialShare&title="+a.title+"&content="+a.content+"&contentURL="+a.contentURL+"&imageURL="+a.imageURL;
}
else if(ua.indexOf('Android') >= ){
var C_code = {"title":a.title,
"content":a.content,
"contentURL":a.contentURL,
"imageURL":a.imageURL,
"shareFrom":a.shareFrom,
"shareFromCode":a.shareFromCode
};
var C_code = JSON.stringify(C_code);
yinhu.shareAction(C_code);
}
}
//8.shareResult native调js 分享回调 js方函数
else{
console.log("参数错误")
}
}else {
console.log("url没有from=app")
}
};
这是html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<title>H5与native交互demo</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<script src="flexible-min.js"></script>
</head>
<style type="text/css">
button{
display: block;
margin: auto;
margin-top: 1rem;
width: 5rem;
height: 2rem;
color: #;
}
</style>
<body>
<div class="M_body">
<button id="btn1">判断登录</button>
<button id="btn2">调用登录</button>
<button id="btn3">产品列表</button>
<button id="btn4">拨打客服</button>
<button id="btn5">版本号</button>
<button id="btn6">注册</button>
<button id="btn7">分享功能</button>
<button id="btn8">分11享功能</button>
</div>
<script src="H5_Native.js"></script>
<script src="zepto.min.js"></script>
<script>
$("#btn1").tap(function(){
//1. 判断登录 js调native 有回调 有参数
C_interaction(function(n){
// App 已登录 n 是 {mobileNo:"xxx",userNm:"xxx"}
// App 未登录 ios n=null 安卓不回调
alert(n);
alert(n.mobileNo);
alert(n.userNm);
},"checkLogin");
});
$("#btn2").tap(function(){
//2.调用登录 js调native 有回调 有参数
C_interaction(function(n){
// n 是 {mobileNo:"xxx",userNm:"xxx"}
alert(n);
alert(n.mobileNo);
alert(n.userNm);
},"loginAction");
});
$("#btn3").tap(function(){
//3.产品列表 js调native 无回调 无参数
C_interaction(function(n){
// 无回调 无参数 跳转到产品列表
},"productListAction"); });
$("#btn4").tap(function(){
//4.拨打客服 js调native 无回调 有参数
C_interaction(function(n){
// 返回字符串 电话号码
return "";
},"dialService"); });
$("#btn5").tap(function(){
//5.版本号 js调native 有回调 有参数
C_interaction(function(n){
// n 是 {version:"2.1.1"}
alert(n.version)
},"checkAppVersion"); });
$("#btn6").tap(function(){
//6.注册 js调native 无回调 有参数
C_interaction(function(n){
//返回1 新手注册
var n="";
return n;
},"registerAction"); });
$("#btn7").tap(function(){
//7. 分享功能 native调js 无回调 有参数
C_interaction(function(n){
// 返回要分享的内容
return {
title:"标题",
content:"分享内容",
contentURL:"https://www.baidu.com/",//内容链接
imageURL:"https://www.baidu.com/", //图片链接
shareFrom:"分享来源",
shareFromCode:"分享来源编码"
};
},"shareAction");
//8. js的方法
Native.shareResult=function(n){
alert("分享功能："+n.result);
};
});
$("#btn8").click(function(){
alert("")
location.href="inyinhu://yinhu/router/?buttonAction=productList&code=1";
})
/*
* 适用于app 2.1.0
* 1.checkLogin js调native 判断登录 有回调 有参数
* 2.loginAction js调native 调用登录 有回调 有参数
* 3.productListAction js调native 产品列表 无回调 无参数
* 4.dialService js调native 拨打客服 无回调 有参数
* 5.checkAppVersion js调native 版本号 有回调 有参数
* 6.registerAction js调native 注册 无回调 有参数
* 7.shareAction js调native 分享功能 无回调 有参数
* 8.shareResult native调js 分享回调 无回调 有参数
*/
</script> </body>
</html>
原生_H5交互插件(适用于与V2.1)的更多相关文章
- Cordova - 与iOS原生代码交互2（使用Swift开发Cordova的自定义插件）
在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
- 10 个基于 jQuery 的 Web 交互插件推荐
英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...
- 原生Js交互之DSBridge
文章链接:https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg 在上一篇文章「android 记一次富文本加载之路」中 介绍了关于android加载富文本 ...
- 开发原生安卓cordova插件（基础）
cordova应用如果需要调用原生安卓接口,方法是使用cordova插件,cordova官方提供了主流原生功能的插件,但如果还不能满足需求,也可以自己开发cordova插件 以下介绍开发一个最简单的插 ...
- h5 与原生 app 交互的原理
现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...
- 客户端相关知识学习（二）之h5与原生app交互的原理
前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
- iOS下JS与原生的交互一
本篇主要讲的是UIWebView和JS的交互,在下一节会有wkWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/9144110.html JS调用原生OC ...
- Pulsar云原生分布式消息和流平台v2.8.0
Pulsar云原生分布式消息和流平台 **本人博客网站 **IT小神 www.itxiaoshen.com Pulsar官方网站 Apache Pulsar是一个云原生的分布式消息和流媒体平台,最初创 ...
随机推荐
- HR招聘_(三)_招聘方法论（招聘途径及流程）
1.招聘途径 网络招聘:企业官网,招聘网站,微信,论坛等. 校园招聘:学校信息栏海报,学校组织招聘会,校企业联合专场. 现场招聘会: 专场招聘会,人才市场招聘会. 猎头公司:猎头(年薪高于350K), ...
- web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解
1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...
- web前端学习（三）css学习笔记部分（4）-- CSS选择器详解
4. 元素选择器详解 4.1 元素选择器 4.2 选择器分组 用英文逗号","相连,使用相同的样式表 使用通配符对所有元素进行通用设定. 4.3 类选择器详解 4.3.1. ...
- chrome 浏览器 添加访问助手来访问网上应用商店
chrome浏览器的强大之处,在于可以chrome浏览器的扩展程序来实现很多功能.然而不能下载扩展程序.可以借助chrome访问助手来实现: 下载chrome访问助手:https://pan.baid ...
- mytop安装，使用mytop监控MySQL性能 (总结)
mytop 是一个类似 Linux 下的 top 命令风格的 MySQL 监控工具,可以监控当前的连接用户和正在执行的命令. 1. 安装TermReadKey 下载地址: wget http ...
- Sql基本知识回顾
一. SQL 基本语句 SQL 分类: DDL —数据定义语言 (Create , Alter , Drop , DECLARE) DML —数据操纵语言 (Select , Delete , Upd ...
- iOS 使用Quartz和OpenGL绘图
http://blog.csdn.net/coder9999/article/details/7641701 第十二章 使用Quartz和OpenGL绘图 有时应用程序需要能够自定义绘图.一个库是Qu ...
- 洛谷 P1073 最优贸易 最短路+SPFA算法
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1073 最优贸易 题目描述 C国有 $ n $ 个大城市和 ...
- JavaScript--对象继承（组合继承）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring_使用(JDBC)
Spring_对JDBC的支持 使用JdbcTemplate更新数据库 导入jar包 创建applicationcontext.xml <?xml version="1.0" ...