web与原生交互+活动
<!doctype html>
<html lang="en">
<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>活动demo</title>
<link rel="stylesheet" type="text/css" href="http://m.yinhu.com/static/app/common/reset.min.css"/>
</head>
<style type="text/css">
.M_body{
padding-bottom: 5rem;
}
button{
display: block;
margin:0 auto;
margin-top: 1rem;
width: 5rem;
height: 2rem;
color: #FFFFFF;
background-color: #53BEF7;
border-radius:0.2rem ;
box-shadow: 0px 3px 5px #444444;
}
.M_massage{
position: fixed;
top: 2.3rem;
left: 4rem;
width: 8rem;
min-height: 1.5rem;
background-color: rgba(0,0,0,0.5);
border-radius: 0.8rem;
line-height: 1.5rem;
color: #ffffff;
text-align: center;
font-size: 0.8rem;
}
</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>
</div>
<div class="M_massage" id="I_massage" style="display: none;"></div>
<script src="http://m.yinhu.com/static/app/common/flexible.16.min.js"></script>
<script src="http://m.yinhu.com/static/app/common/activity2.0.0.min.js"></script>
<script src="http://m.yinhu.com/static/app/common/zepto.min.js"></script>
<script>
/*
* 移动端（m站）与App的区分就是url 是否有from = app 这个参数
* 1.检查登录
* 2.登录
* 3.调产品列表
* 4.分享功能
* 5.注册功能
* 回调参数说明
* 参数 值
* n 回调对象
* n.userNm 用户名
* n.mobileNo 手机号
* n.result 分享失败failure
* n.result 分享成功success
*
*/
//1. 检查登录
$("#btn1").tap(function(){
MobilePort.App(function(){
C_interaction(function(n){ // 有参数 n.userNm、n.mobileNo
if(n!=null){
alertMse('已经登录');
}else{
alertMse('没有登录');
}
},"checkLogin");
},"from=app");
});
//2. 登录
$("#btn2").tap(function(){
MobilePort.App(function(){//*************app登录
C_interaction(function(n){ // 有参数 n.userNm、n.mobileNo
alertMse('已经登录');
},"loginAction");
},"from=app");
MobilePort.noApp(function(){//*************m站的登录
window.location.href="https://m.yinhu.com/login/login.bl"
},"from=app");
})
//3.产品列表
$("#btn3").tap(function(){
MobilePort.App(function(){//*************app产品列表
C_interaction(function(n){},"productListAction");
},"from=app");
MobilePort.noApp(function(){//*************m站的产品列表
window.location.href='http://m.yinhu.com/loan/ydb_loan_list.bl';
},"from=app");
})
//4.分享功能
$("#btn4").tap(function(){
MobilePort.App(function(){//*************app分享功能
C_interaction(function(n){
// 返回要分享的内容
return {
title:"活动demo",
content:"m站App",
contentURL:"http://192.168.34.250:8020/0914-sunKU/activity1.0.0.html",//内容链接
imageURL:"https://www.baidu.com/", //图片链接
shareFrom:"1",//分享来源
shareFromCode:"1"//分享码
};
},"shareAction",function(n){ //有参数 n.result
alertMse("分享结果："+n.result)//success 表示成功, failure 表示失败
});
},"from=app");
MobilePort.noApp(function(){//*************m站的分享功能
MobilePort.wxQQ(function(){ //微信或QQ
alertMse('微信浏览器或QQ内置浏览器');
});
MobilePort.noWxQQ(function(){//非微信非QQ
alertMse('非微信浏览器非QQ浏览器');
});
},"from=app");
})
//5.注册
$("#btn5").tap(function(){ MobilePort.App(function(){//*************app的注册
C_interaction(function(n){ // 有参数 n.userNm、n.mobileNo
alertMse("注册的回调");
},"registerAction");
},"from=app");
MobilePort.noApp(function(){//*************m站的注册
window.location.href="https://m.yinhu.com/regist/go_regist.bl"
},"from=app");
}); $("#btn6").tap(function(){ MobilePort.App(function(){//*************
C_interaction(function(n){
return {
"title":'页面的标题', //页面的tittle
"item":'事件名称', //页面的事件名称
"sourceUrl":'页面的url' //页面的url
}
},"dealUMAnalyics");
},"from=app");
MobilePort.noApp(function(){//*************m站的注册
//加百度统计 或者不加
},"from=app"); }); /**
* 2016/12/14
* @sunjx
* 弹框js与交互无关
*/
function alertMse(n){
$("#I_massage").show();
$("#I_massage").html(n);
setTimeout(function(){
$("#I_massage").hide();
},2000)
}
</script>
</body>
</html>
/* * 2016/12/14 * yinhuweb * V 2.0.0 * */ (function(){ /* * v 1.1.0 * 使用方法： * 一、引入ua.js * 二、直接调用 MobilePort 对象的属性与方法。 * 三、目前共1个属性15个方法 * MobilePort 对象 * 属性：MobilePort.back;// 数组 内容如下 * 方法：MobilePort.androidBrowser(callBack) 1 安卓浏览器 //callBack 回调只有在安卓浏览器下执行 * 方法：MobilePort.iosBrowser(callBack) 2 ios浏览器 // 下面全部类似 * 方法：MobilePort.qqBrowser(callBack) 3 QQ浏览器 * 方法：MobilePort.ucBrowser(callBack) 4 uc浏览器 * 方法：MobilePort.wxBrowser(callBack) 5 微信浏览器 * 方法：MobilePort.pc(callBack) 6 pc浏览器 * 方法：MobilePort.move(callBack) 7 移动浏览器 * 方法：MobilePort.androidApp(callBack, parameter) 8 安卓APP * 方法：MobilePort.iosApp(callBack, parameter) 9 iosApp * 方法：MobilePort.androidWx(callBack) 10 安卓WX * 方法：MobilePort.iosWx(callBack) 11 iosWX * 2016 11 17 添加 * 方法：MobilePort.wxQQ(callBack) 12 微信浏览器 QQ内置浏览器 * 方法：MobilePort.noWxQQ(callBack) 13 非微信浏览器与QQ浏览器 * 2016 12 2 添加 * 方法：MobilePort.App(callBack, parameter) 14 App打开 * 方法：MobilePort.noApp(callBack, parameter) 15 非App打开 * 方法：MobilePort.noWxBrowser(callBack) 16 非微信浏览器 * * * * * callBack 是回调函数，在指定环境下执行的函数。 * parameter 是url上的参数，用于识别APP与Browser(必须)，字符串。 * 例如 www.baidu.com?from=app parameter 指 from=app * from=app 是前后端约定好的指代 App请求的网页。 * * back数组中可能的值：内核、浏览器、移动端平台、pc端平台 、其他 * webkit Trident Presto Gecko //内核 webkit内核 Trident内核 Presto内核 Gecko内核 * IE chrome firefox opera safari //浏览器 IE浏览器 chrome浏览器 firefox浏览器 opera浏览器 safari浏览器 * UCBrowser MQQBrowser //浏览器 UC浏览器 QQ浏览器 * android ipad iphone //移动端平台 android平台 ipad平台 iphone平台 * Mac windows Linux //pc端平台 Mac平台 windows平台 Linux平台 * move wx //其他 move移动端平台 wx微信浏览器 */ /* * 正则赋值 内核 */ // webkit 内核 var webkit = /webkit/i; //IE内核 var Trident = /Trident/i; //opera内核 var Presto = /Presto/i; //火狐内核 var Gecko = /Gecko/i; /* * 正则赋值 浏览器 */ // chrome 浏览器 var chrome1 = /chrome\/(\d+\.\d+)/i; // firefox 浏览器 var firefox = /firefox\/(\d+\.\d+)/i; // opera 浏览器 var opera = /opera(\/| )(\d+(\.\d+)?)(.+?(version\/(\d+(\.\d+)?)))?/i; // safari 浏览器 var safari = /(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i; // IE 浏览器 var IE = /msie (\d+\.\d+)/i; // UC 浏览器 var UCBrowser = /UCBrowser/i; //QQ浏览器 var MQQBrowser = /MQQBrowser/i; /* * 正则赋值 pc端 */ // macintosh 系统 var Mac = /macintosh/i; // windows 平台 var windows = /windows/i; // Linux 平台 var Linux = /Linux/i; /* * 正则赋值 移动端 */ // android 系统 var android = /android/i; // ipad 系统 var ipad = /ipad/i; // iphone 系统 var iphone = /iphone/i; /* * 正则赋值 其他 */ // 移动终端 var move = /(nokia|iphone|android|ipad|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i; // 微信打开 var wx = /MicroMessenger/i; var back = []; var ua = navigator.userAgent; /* * 2016 11 17 * 添加微信QQ浏览器 */ var T_androidQQ = new RegExp(' QQ');//安卓正则 var T_iosQQ = new RegExp(' QQ');//安卓正则 //内核判断 if (webkit.test(ua)) { //webkit back.push("webkit"); }; if (Trident.test(ua)) { //IE back.push("Trident"); }; if (Presto.test(ua)) { //欧朋 back.push("Presto"); }; if (Gecko.test(ua)) { //火狐 back.push("Gecko"); }; //浏览器 判断 if (IE.test(ua)) { back.push("IE"); }; if (chrome1.test(ua)) { back.push("chrome"); }; if (firefox.test(ua)) { back.push("firefox"); }; if (opera.test(ua)) { back.push("opera"); }; if (safari.test(ua)) { back.push("safari"); }; if (UCBrowser.test(ua)) { back.push("UCBrowser"); }; if (MQQBrowser.test(ua)) { back.push("MQQBrowser"); }; //pc 平台判断 if (Mac.test(ua)) { back.push("Mac"); }; if (windows.test(ua)) { back.push("windows"); }; if (Linux.test(ua)) { back.push("Linux"); }; //移动平台 判断 if (android.test(ua)) { back.push("android"); }; if (ipad.test(ua)) { back.push("ipad"); }; if (iphone.test(ua)) { back.push("iphone"); }; //其他 if (move.test(ua)) { back.push("move"); }; if (wx.test(ua)) { back.push("wx"); }; MobilePort = {}; //back 包含所有信息 MobilePort.back = back; //1 android 浏览器 MobilePort.androidBrowser = function (callBack) { if (android.test(ua)) { callBack(); } else { return "error"; } }; //2 ios 浏览器 MobilePort.iosBrowser = function (callBack) { if (ipad.test(ua) || iphone.test(ua)) { callBack(); } else { return "error"; } }; //3 QQ 浏览器 MobilePort.qqBrowser = function (callBack) { if (MQQBrowser.test(ua)) { callBack(); } else { return "error"; } }; //4 UC 浏览器 MobilePort.ucBrowser = function (callBack) { if (UCBrowser.test(ua)) { callBack(); } else { return "error"; } }; //5 微信打开 MobilePort.wxBrowser = function (callBack) { if (wx.test(ua)) { callBack(); } else { return "error"; } }; //6 pc 平台 MobilePort.pc = function (callBack) { if (Linux.test(ua) || windows.test(ua) || Mac.test(ua)) { callBack(); } else { return "error"; } } //7 移动平台 MobilePort.move = function (callBack) { if (move.test(ua)) { callBack(); } else { return "error"; } } //8 androidApp MobilePort.androidApp = function (callBack, parameter) { var oUrl = location.search; var tc = new RegExp(parameter); if (android.test(ua) && tc.test(oUrl)) { callBack(); } else { return "error"; } }; //9 iosApp MobilePort.iosApp = function (callBack,parameter) { var oUrl = location.search; var tc = new RegExp(parameter); if ((ipad.test(ua) || iphone.test(ua)) && tc.test(oUrl)) { callBack(); } else { return "error"; } }; //10 androidWx MobilePort.androidWx = function (callBack) { if (android.test(ua)&&wx.test(ua)) { callBack(); } else { return "error"; } }; //11 iosWx MobilePort.iosWx = function (callBack) { if ((ipad.test(ua)||iphone.test(ua))&&wx.test(ua)) { callBack(); } else { return "error"; } }; //12 微信浏览器 QQ内置浏览器 MobilePort.wxQQ = function(callBack){ if(T_androidQQ.test(ua)||T_iosQQ.test(ua)||wx.test(ua)){ callBack(); }else{ return "error"; } }; //13 非微信浏览器与QQ浏览器 MobilePort.noWxQQ = function(callBack){ if(T_androidQQ.test(ua)||T_iosQQ.test(ua)||wx.test(ua)){ return "error"; } else{ callBack(); } } //14 App MobilePort.App = function(callBack,parameter){ var oUrl = location.search; var tc = new RegExp(parameter); if(tc.test(oUrl)){ callBack(); } else{ return "error"; } } //15 非App MobilePort.noApp = function(callBack,parameter){ var oUrl = location.search; var tc = new RegExp(parameter); if(tc.test(oUrl)){ return "error"; } else{ callBack(); } } //16 非微信浏览器 MobilePort.noWxBrowser = function(callBack,parameter){ if (wx.test(ua)) { return "error"; } else { callBack(); } } })(); // /* * 适合版本为 2.2.0 * 前提是url上加 from=app * 2016 11 18 */ var Native = {}; var ua = navigator.userAgent; var oUrl = location.search; var tc = /from=app/i; //原生H5交互 function C_interaction(a,b,c){ 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"){ Native.registerAction = function(n){ a(n); }; var parameter = '{"obj":"Native","funcName":"registerAction"}'; yinhu.registerAction(parameter); } //7.js调native 分享功能 无回调 有参数 else if(b=="shareAction"){ var a = a(); Native.shareResult=function(n){ c(n); }; var C_code = { "title":a.title, "content":a.content, "contentURL":a.contentURL, "imageURL":a.imageURL, "shareFrom":a.shareFrom, "shareFromCode":a.shareFromCode, "obj":"Native", "funcName":"shareResult" }; var C_code = JSON.stringify(C_code); yinhu.shareAction(C_code); } //8.js调 native统计 else if(b == "dealUMAnalyics"){ var a = a(); var C_code = { "title":a.title, "item":a.item, "sourceUrl":a.sourceUrl }; var C_code = JSON.stringify(C_code); yinhu.dealUMAnalyics(C_code); } //9 js调native风险评估 else if(b == "submitAssess"){ var C_code = a(); yinhu.submitAssess(C_code); } else{ console.log("参数错误") } }else { console.log("url没有from=app") } }; /** * 自动加版本号 * 2017/1/19 */ var C_version = (new Date).getTime() var C_tc_version = /version/i; var C_tc_parameter = /\?/i; var C_currentUrl = window.location.href; if(C_tc_version.test(C_currentUrl)){ }else{ if(C_tc_parameter.test(C_currentUrl)){ window.location.href = C_currentUrl+'&version='+C_version; }else{ window.location.href = C_currentUrl+'?version='+C_version; } }
web与原生交互+活动的更多相关文章
- （五）react-native开发系列之Android原生交互
react-native可以做web与原生的交互,这是使用react-native开发项目的主要目的之一,也是主要优势,用rn而不用原生交互则毫无价值,这篇文章用来记录在项目中rn的原生交互使用过程. ...
- h5 做app时和原生交互的小常识。
距离上次随笔或许有半年了吧,最近在用hybrid模式开发移动app,所以就简单的说说用h5技术开发app时候,做原生交互的几个小常识: 一.拨打电话或者发送短信: <a href="t ...
- 1.PHP与Web页面的交互
一.概览: PHP是一种专门用于Web开发的服务器端脚本语言.从这个描述可以知道,PHP要打交道的对象主要有服务器(Server),和基于Web的HTML(超文本标识语言).使用PHP处理Web应用时 ...
- WEB的数据交互具体流程
前一段时间小小的总结了一下,web的前后交互的各种方式可能没写全,后期再写,话不多说 前端传递数据到servlet,servlet获取数据后操作DAO修改数据库,然后servlet将某些参数返回到前端 ...
- 二 Android Studio 打包EgretApp (开机画面、横竖屏、调试、和原生交互)
测试环境: Windows7 Egret Engine 5.0.14 Egret support 5.0.12 Android Studio 2.3 目录: 一 修改开机画面 二 横竖屏设置 三 修改 ...
- 使用 Drag and Drop 给Web应用提升交互体验
什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程. 我相信每个人 ...
- web前后端交互，nodejs
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 web前后端交互 前后端交互可以采用混合 ...
- web实现数据交互的几种常见方式
前言 在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴:你说你会制作网页,好吧,只能说你算是一个前端程序猿.但这是你作为一个程序猿最基本的能力,并不会为你进行加分: 我们都明白, ...
- Flutter的需要与原生交互的一些常用库
[说明]由于这些库一直在更新,请自己选择合适的稳定版本下载. 另外如果发现有问题或者你有更好的库,欢迎留言告诉我. 谷歌官方的针对Dart语言的一些实用性的功能以及扩展的库 -- Quiver Qui ...
随机推荐
- js 正则去除html代码
function delHtmlTag(str){ return str.replace(/<[^>]+>/g,"");//去掉所有的html标记 }
- webpack--安装，使用
1. webpack 1.1. webpack介绍 webpack是一个资源的打包工具,目前最新为webpack3,可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一 ...
- Hdu 1045 二分匹配
题目链接 Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- 初探 jQuery
为什么要学习jQuery? 使用javascript开发过程中,有许多的缺点: 1. 查找元素的方法太少,麻烦. 2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环. 3. 有兼容性问题. 4. 想 ...
- python学习笔记10--协程、IO、IO多路复用
本节内容 一.协程 1.1.协程概念 1.2.greenlet 1.3.Gevent 1.4.协程之爬虫 1.5.协程之socket 二.论事件驱动与异步IO 三.IO 3.1.概念说明 3.2.IO ...
- CMake学习笔记六-引用cmake文件
include(${CMAKE_CURRENT_SOURCE_DIR}/../Share/share.cmake)
- 日期格式之——new Date()的用法
获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getF ...
- sqlserver 带返回值的存储过程
create proc test ) output as begin select @result = 'haha' ; end go ), @count int exec @count = test ...
- 洛谷2501 BZOJ1801中国象棋题解
题目链接 BZ链接 其实dp只要把状态想好后转移就很好写了(flag*1) f[i][j][k]表示到了第i行,有j列放了一个跑,有k列放了两个跑的方案总数 然后大力讨论,转移即可 # include ...
- 【C++】判断一个图是否有环 无向图 有向图（转载）
没有找到原文出处,请参考一下链接: http://www.cnblogs.com/hiside/archive/2010/12/01/1893878.html http://topic.csdn.ne ...