原生_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是一个云原生的分布式消息和流媒体平台,最初创 ...
随机推荐
- WCF 服务
1.代码 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Seriali ...
- !important覆写css行内样式
<div class="block"> <span style="font-weight: bold; color: red;">Hel ...
- poj2195&&hdu1533 最小费用流
这题也可以用km做,我写的代码km比费用流快很多. 最小费用流: #include<stdio.h> #include<string.h> #include<math.h ...
- c++之手写strcmp
int strcmp(const char* str1, const char*str2){ assert(str1 != NULL&&str2 != NULL); while (*s ...
- 洛谷2254 BZOJ1499 瑰丽华尔兹题解
洛谷链接 BZ链接 一个很容易想到的做法就是用f[i][j][t]表示t时刻在i,j处的可以滑动的最大值 f[i][j][t]=max(f[i][j][t-1],f[*i][*j][t-1]),这样大 ...
- 替换^M字符
关于回车与换行 很久以前,老式的电传打字机使用两个字符来另起新行.一个字符把滑动架移回首位 (称为回车,ASCII码为0D),另一个字符把纸上移一行 (称为换行,ASCII码为0A).当计算机问世以后 ...
- 【JZOJ4876】【NOIP2016提高A组集训第10场11.8】基因突变
题目描述 邪恶的707刚刚从白垩纪穿越回来,心中产生了一个念头:我要统治人类! 但是统治人类是很庞大且复杂的一个工程,707尝试了洗脑,催眠,以及武装镇压都没能成功地统治人类,于是她决定从科学上对人类 ...
- 【JZOJ1922】【Usaco 2005 NOV Gold】小行星群
题目描述 Bessie想驾驶她的飞船穿过危险的小行星群,小行星群是一个N×N的网格(1 <= N <= 500),在网格内有K个小行星(1 <= K <= 10,000). 幸 ...
- SqlSugar 笔记
分组: 日期分组一: var result = await temp .GroupBy("date_format(Day,'%Y-%m')") .Select(s => ne ...
- JSTL的时间格式化
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 开头第一句必须上 ...