原生_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是一个云原生的分布式消息和流媒体平台,最初创 ...
随机推荐
- 『StabilityGuide』| 10+位阿里技术专家共同发起稳定性知识库开源项目
我们穿过山和大海,也见过人山人海.我们见过各类故障,也排过千雷万险.这一次,不如我们一起,开启稳定性的探索之旅.让无法解决的问题少一点点,让世界的确定性多一点点. 无论是前端业务的开发者,还是后端架构 ...
- facebook登录深入研究
PHP sdk https://developers.facebook.com/docs/php/gettingstarted javascript对接PHP https://developers.f ...
- Sublime Text3 安装less
1.安装Sublime 插件 (1)安装LESS插件:因为Sublime不支持Less语法高亮,所以,先安装这个插件,方法: ctrl+shift+p>install Package>输入 ...
- IO-02. 整数四则运算
本题要求编写程序,计算2个正整数的和.差.积.商并输出.题目保证输入和输出全部在整型范围内. 输入格式: 输入在一行中给出2个正整数A和B. 输出格式: 在4行中按照格式“A 运算符 B = 结果”顺 ...
- 纯CSS3绘制的黑色图标按钮组合
在线演示 本地下载
- IIS 设置 FTP 服务器 添加多个账户
我们有很多童鞋经常开不动IIS自带的FTP如何创建,就算创建了也不会实现多用户,下面我来分享一下我的经验吧: 使用 IIS 设置 FTP 服务器 依次单击“开始”按钮.“控制面板”和“添加或删除程序” ...
- FinalShell for Mac
Mac一键安装脚本 curl -o finalshell_install.sh www.hostbuf.com/downloads/finalshell_install.sh;chmod +x fin ...
- 2019-10-18-dotnet-文件读写务必注意事项
title author date CreateTime categories dotnet 文件读写务必注意事项 lindexi 2019-10-18 08:42:53 +0800 2019-10- ...
- TIJ——Chapter Thirteen:Strings
String 对象是不可修改的,对于被String 重载的'+' 和'+=' 运算符来说,当你用它们来连接两个String 对象的时候,它在底层并不会对于每一次连接均生成一个String 对象,取而代 ...
- Vue CLI图形化创建项目