原生_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是一个云原生的分布式消息和流媒体平台,最初创 ...
随机推荐
- Django 配置MySQL数据库 mysql
Django 配置MySQL数据库 在settings.py中配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # ...
- Postgresql 正则表达式【转】
原文:http://blog.csdn.net/wugewuge/article/details/7704996 postgresql支持POSIX 风格的正则表达式,在postgresql中使用正则 ...
- Sublime Text编辑器运行Python程序控制台输入
将文件保存为 .py后,安装插件: 1)按ctrl+shift+p快捷键呼出一个输入框,输入Install Package,回车,在新出现的输入框里输入“SublimeREPL”并安装. 2)点击To ...
- SCAN listener and Node listener – How does it work
http://www.mydbspace.com/? p=324 Single Client Access Name (SCAN) is new feature of oracle 11gR2 gri ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- pygame-常用的方法
1.pygame常用的方法 2.语音 图片
- Leetcode720.Longest Word in Dictionary词典中最长的单词
给出一个字符串数组words组成的一本英语词典.从中找出最长的一个单词,该单词是由words词典中其他单词逐步添加一个字母组成.若其中有多个可行的答案,则返回答案中字典序最小的单词. 若无答案,则返回 ...
- Sublime Text3安装教程，配置教程，常用插件安装等方法
前言: sublimeText3的特点: 1.Sublime Text 是一款跨平台代码编辑器,在Linux.OS X和Windows下均可使用. 2.Sublime Text 是可扩展的,并包含大量 ...
- 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素（215）
这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...
- jdbc连接数据库的步骤(转载)
http://hzy3774.iteye.com/blog/1689525 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过jav ...