原生_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是一个云原生的分布式消息和流媒体平台,最初创 ...
随机推荐
- H5C3--sessionStorage和localStorage的使用
一.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- jmeter的关联-正则表达式的应用
LoadRunnner中的关联为web_reg_save_param,查找左右边界,下次请求的时候会用到上次请求服务器返回的数据,那么我们把符合左右边界的数据保存下来,以便下次请求的时候用到. jme ...
- python 在init方法中导入数据
- 跟我一起认识axure（三）
交互设置,添加链接 点击预览
- jQuery之父：坚持每天都要写代码
关于作者:John Resig, jQuery之父,同时也是Pro Javascript Techniques和Secrets of the JavaScript Ninja的作者.他目前主持 Kha ...
- AI种黄桃AI卖黄桃 阿里巴巴推进一站式政务服务
7月11日,武汉城市峰会期间,武汉.枣阳.荆门等多个城市发布了同阿里巴巴的最新合作.这些合作包括用人工智能改善武汉交通拥堵.降低枣阳黄桃种植成本.提升荆门城市治理和市民服务水平等.阿里云.蚂蚁金服.高 ...
- X-editable 不能二次初始化的问题解决方案
最近用到了 X-editable 可编辑表格插件,发现了一个头疼的问题,X-editable 不能对同一个 <a> 元素二次初始化. 如下代码举例:在页面加载完成时,用“数组1”填充一个下 ...
- Notepad++ ssh NppFTP链接linux
Notepad++是一套非常有特色的自由软件的纯文字编辑器,有完整的中文化接口及支持多国语言编写的功能.现在用Notepad++来远程编辑Linux系统文本文件. Notepad++ 1.Linux操 ...
- Python学习之路2☞数据类型与变量
变量 变量作用:保存状态:说白了,程序运行的状态就是状态的变化,变量是用来保存状态的,变量值的不断变化就产生了运行程序的最终输出结果 一:声明变量 #!/usr/bin/env python # -* ...
- 2019-4-7-VisualStudio-解决方案筛选器-slnf-文件
title author date CreateTime categories VisualStudio 解决方案筛选器 slnf 文件 lindexi 2019-04-07 11:34:59 +08 ...