Android&IOS与js交互（一）

最新推荐文章于 2024-05-17 03:36:54 发布
最新推荐文章于 2024-05-17 03:36:54 发布
阅读量213 收藏
点赞数
分类专栏： Android&js&IOS 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42130892/article/details/82252805
版权 
/** *init* */
var  userk="";
$(function() {
	// APP点击
	var u = navigator.userAgent; // 获取用户设备
	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
	
	if (isIOS) {
		setupWebViewJavascriptBridge(function(bridge) {
			//筛选显示内容
			var data = {};
			var str = JSON.stringify(data);
			//判断权限
			try {
				//调用IOS方法“isiosLogin”
				WebViewJavascriptBridge.callHandler('isiosLogin', str, function(data) {
					userk= data;
					if(userk!=""){
						//$(".userkey").val(data);
						$("input[name=token]").val(data);
					}
				});		 
			} catch (e) { }
		
			//注册一个"pricetrend"JS函数到IOS，供IOS调用
			bridge.registerHandler("pricetrend", function(data, responseCallback) {
				pricetrend(data);
				//responseCallback(responseData);
			});
		
		});
		// ios app 设备才执行
		//这段代码是固定的，必须要放到js中
		function setupWebViewJavascriptBridge(callback) {
		    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
		    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
		    window.WVJBCallbacks = [callback];
		    var WVJBIframe = document.createElement('iframe');
		    WVJBIframe.style.display = 'none';
		    WVJBIframe.src = 'https://__bridge_loaded__';
		    document.documentElement.appendChild(WVJBIframe);
		    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
		}
        // 与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS
		var bridge =setupWebViewJavascriptBridge();
		} else {
		//安卓侨联
		 try {
			 userk= window.android.isAndroidLogin();
			 if(userk!=""){
				 //$(".userkey").val(userk);
				 $("input[name=token]").val(userk);
			 }
		} catch (e) { }
		doclick();
	};
});
/*点击列表项*/
function doclick(){
	$(".graybakhuio").unbind(); //移除之前所有绑定的事件
	//走势图锁
	$(".graybakhuio").on('tap',function(){
		var u = navigator.userAgent; // 获取用户设备
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
		if ("" == $("input[name=token]").val()) {
			if (isIOS) {
				iosnologin();
			} else {
				androidnologin();
			}
			return false;
		}else{
			//已登录 去订阅
			if (isIOS) {
				iostodingyue();
			} else {
				androidtodingyue();
			}
		}
	})
};
//列表锁-点击事件
function doclickTwo(){
	$(".lockyuip").unbind(); //移除之前所有绑定的事件
	//列表锁
	$(".lockyuip").on('tap',function(){
		var u = navigator.userAgent; // 获取用户设备
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
		if ("" == $("input[name=token]").val()) {
			if (isIOS) {
				iosnologin();
			} else {
				androidnologin();
			}
			return false;
		}else{
			//已登录 去订阅
			if (isIOS) {
				iostodingyue();
			} else {
				androidtodingyue();
			}
		}
	})
}

/*------------------------------------*/

var namey = [];
var numo = [];
var classname = "";
$(document).ready(function(){
	$.ajax({
	    type: 'post',
	    url: 'front/app/hangq/priceTrendDetail.htm',
	    data:{
	    	"goodClassId":$("input[name=goodClassId]").val(),
	    	"token":$("input[name=token]").val()
	    },
	    dataType: "json",
	    success: function (result) {
	    	//页数
	    	$("input[name=pagecount]").val(Math.ceil(result.length/20));
	    	var isshow = 0;
	       $.each(result, function (index, item) {
	            namey.push(item.dealDate);     
	            numo.push(item.currentAVGPrice);
	            classname = item.goodClassName;
	            isshow = item.isshow;
	        });
	       if(isshow=='1'){
	    	   //展示走势图
	    	   $("#container").css('display','block');//显示  
	    	   $("#containerLock").css('display','none');//隐藏   
	       }else{
	    	   $("#container").css('display','none');//隐藏 
	    	   $("#containerLock").css('display','block');//显示   
	       }
	       	//heighchart
	       	echartInit(namey, classname, numo);   
	       	doclick();
	       	showdataByPageOne("WEEK",1);
	    	
	    },
	    error: function (errorMsg) {
	        //alert("图表数据请求失败!");
	    }

	});	
})

//初始化填充表格
function initTable(plist){
	$("tbody").empty();
	var html = "";	
	for(var i=0;i<plist.length;i++){
		html = html+"<tr><td><span>"+plist[i].goodClassName+"</span></td>"+
			"<td><span>"+plist[i].goodArea+"</span></td>";
		
		if(plist[i].isshow=='1'){
			html = html+"<td><span class='colrRed'>￥"+plist[i].currentAVGPrice+"</span></td>";
			
			if(plist[i].currentAVGPrice > plist[i].preAVGPrice){			
				html=html+"<td><span class='colrRed'>"+plist[i].sandByOne+"</span></td>";
			}else if(plist[i].currentAVGPrice < plist[i].preAVGPrice){
				html=html+"<td><span class='colGreen'>"+plist[i].sandByOne+"</span></td>";			
			}else {
				html=html+"<td><span>"+plist[i].sandByOne+"</span></td> ";
			} 
			$("#container").css('display','block');//显示
			$("#containerLock").css('display','none');//隐藏   
		}else{
			html = html+ "<td><span><i class='lockyuip'></i></span></td>"+
			"<td><span><i class='lockyuip'></i></span></td>";
		}
		html=html+"<td><span>"+plist[i].dealDate+"</span></td></tr>";
	}
	$("tbody").append(html);
	//doclick();
}

//选择显示周期：一周、一月、三月、一年
$(document).ready(function(){
	$(".section_roptab ul li").click(function(){
		$(this).addClass("active");
		$(this).siblings("li").removeClass("active")
		$("input[name=dateBetweenType]").val($(this).attr("name"));
		$("input[name=channelchanged]").val("1");
		//获取选定月份
		//加载表格数据列表，默认加载首页
		mui('#pullrefresh').pullRefresh().enablePullupToRefresh(true);
		showdataByPageOne($(this).attr("name"),1);
		//加载则线图数据
		showdatas($(this).attr("name"));
	});
})
function showdatas(dateBetweenType){
	$.ajax({
	    type: 'post',
	    url: 'front/app/hangq/priceTrendDetail.htm',
	    data:{
	    	"goodClassId":$("input[name=goodClassId]").val(),
	    	"dateBetweenType":dateBetweenType,
	    	"areaId":$("input[name=areaId]").val(),
	    	"colorId":$("input[name=colorId]").val(),
	    	"formId":$("input[name=formId]").val(),
	    	"token":$("input[name=token]").val()
	    },
	    dataType: "json",
	    success: function (result) {
	    //清空数组
	    namey=[];
	    numo=[];
	    //页数
	    $("input[name=pagecount]").val(Math.ceil(result.length/20));
	       $.each(result, function (index, item) {
	            namey.push(item.dealDate);     
	            numo.push(item.currentAVGPrice);
	            classname = item.goodClassName;
	        });
	     //heighchart
	     echartInit(namey, classname, numo); 
	     doclick();
	    },
	    error: function (errorMsg) {
	    }
	});
}
//实时报价详情列表-分页展示 
function showdataByPageOne(dateBetweenType,currentPage){
	$.ajax({
	    type: 'post',
	    url: 'front/app/hangq/priceTrendDetailPage.htm',
	    data:{
	    	"goodClassId":$("input[name=goodClassId]").val(),
	    	"dateBetweenType":dateBetweenType,
	    	"currentPage":"1",
	    	"areaId":$("input[name=areaId]").val(),
	    	"colorId":$("input[name=colorId]").val(),
	    	"formId":$("input[name=formId]").val(),
	    	"token":$("input[name=token]").val()
	    },
	    dataType: "json",
	    success: function (result) {
	       initTable(result);
	       //列表添加成功-添加事件
	       doclickTwo();
	    },
	    error: function (errorMsg) {
	    }
	});
}
//---------------------修改为highchart
function echartInit(xdata,name,mydata){
	Highcharts.chart('container', {
	        chart: {
	            zoomType: 'x'
	        },
	        title: {
	            text: ''
	        },
	        subtitle: {
	            text: ''
	        },
			colors: ['#4cd4c8'],
	        xAxis: {
	        	 tickInterval: 8,
	        categories: xdata
	    },
			credits: {
	          enabled:false
	},
	       exporting: {
	            enabled:false
	},
	        yAxis: {
	        	allowDecimals:false,//tickPositions: [0, 5, 10, 15,20,25,30],
	        	title: {
	            	text: ''
	        	}
	        	/*labels: {
		            formatter: function () {
		            	return this.value + "%";
		            }
		        }*/
	    	},
	        legend: {
	            enabled: false
	        	//enabled: true
	        },
			
	        plotOptions: {
	            area: {
	                fillColor: {
	                    linearGradient: {
	                        x1: 0,
	                        y1: 0,
	                        x2: 0,
	                        y2: 1
	                    },
	                    stops: [
	                        [0, '#4cd4c8'],
	                        [1, Highcharts.Color('#4cd4c8').setOpacity(0).get('rgba')]
	                    ]
	                },
	                marker: {
	                    radius: 1,
						lineWidth: 1,
						fillColor: '#fff',//点填充色
						lineColor: '#4cd4c8',//点边框色
	                },
	                lineWidth: 1,
					
	                states: {
	                    hover: {
	                        lineWidth: 1
	                    }
	                },
	                threshold: null
	            },
	            tooltip: {
	            	formatter: function () {
	            	var s = "haha";
	            	return s;
	            	}
	            }
	        },
	        series: [{
				type: 'area',
		        name: name,
		        data: mydata,
		        lineWidth:1
	    }]
	    });
};


//移动端调用-筛选
function pricetrend(data){
	var str = JSON.stringify(data);
	if(str==null||str==''||str=='{}')
		return ;
	var obj = $.parseJSON(str);
	
	var areaId = obj.areaid;
	var colorId = obj.colorid;
	var formId = obj.formid;
	var goodClassId = obj.pinleiid;
	
	$("input[name=goodClassId]").val('');
	$("input[name=areaId]").val('');
	$("input[name=colorId]").val('');
	$("input[name=formId]").val('');
	
	//参数暂存
	$("input[name=goodClassId]").val(goodClassId);
	$("input[name=areaId]").val(areaId);
	$("input[name=colorId]").val(colorId);
	$("input[name=formId]").val(formId);
	
    //设置时间跨度区间恢复为 一周 WEEK
    $("input[name=dateBetweenType]").val("WEEK");
    $("input[name=channelchanged]").val("1");
    //默认选着一周
    $("ul li:eq(0)").addClass('active');
    //去掉兄弟节点样式
    $("ul li:eq(0)").siblings('li').removeClass('active');
	mui('#pullrefresh').pullRefresh().enablePullupToRefresh(true);
	
	//初始化填充数据列表数据列表
	showdataByPage(goodClassId,1,areaId,colorId,formId);
	
	var namey=[];
    var numo=[];
	$.ajax({
	    type: 'post',
	    url: 'front/app/hangq/priceTrendDetail.htm',
	    data:{
	    	"goodClassId":goodClassId,
	    	"areaId":areaId,
	    	"colorId":colorId,
	    	"formId":formId,
	    	"token":$("input[name=token]").val()
	    },
	    dataType: "json",
	    success: function (result) {
	    //页数
	    $("input[name=pagecount]").val(Math.ceil(result.length/20));
	    
	    var isshow = 0;
	       $.each(result, function (index, item) {
	            namey.push(item.dealDate);     
	            numo.push(item.currentAVGPrice);
	            classname = item.goodClassName;
	            isshow = item.isshow;
	        });
	       if(isshow=='1'){
	    	   //展示走势图
	    	   $("#mainAll").css('display','block');//显示  
	    	   $("#mainAllLock").css('display','none');//隐藏   
	       }else{
	    	   $("#mainAll").css('display','none');//隐藏   
	    	   $("#mainAllLock").css('display','block');// 显示
	       }
	        echartInit(namey, classname, numo);
	        //调用移动端函数，通知加载完成
	        window.android.affection();
	    },
	    error: function (errorMsg) {
	    	//调用移动端函数，通知加载完成
	    	window.android.affection();
	    }
	});
}
//实时报价详情列表-分页展示 
function showdataByPage(goodClassId,currentPage,areaId,colorId,formId){
	$.ajax({
	    type: 'post',
	    url: 'front/app/hangq/priceTrendDetailPage.htm',
	    data:{
	    	"goodClassId":goodClassId,
	    	"dateBetweenType":"WEEK",
	    	"currentPage":currentPage,
	    	"areaId":$("input[name=areaId]").val(),
	    	"colorId":$("input[name=colorId]").val(),
	    	"formId":$("input[name=formId]").val(),
	    	"token":$("input[name=token]").val()
	    },
	    dataType: "json",
	    success: function (result) {
	       //初始化填充数据列表数据列表
	       initTable(result);
	       //列表添加成功-添加事件
	       doclickTwo();
	    },
	    error: function (errorMsg) {
	        //alert("图表数据请求失败!");
	    }
	});
}
/*android未登录*/
function androidnologin() {
	window.android.androidnologin();
	return false;
}; 
/*IOS未登录*/
function iosnologin() {
	var data = {}
	var str = JSON.stringify(data);
	WebViewJavascriptBridge.callHandler('iosnologin', str, function() { });
	return false;
};
/*android订阅*/
function androidtodingyue() {
	var data = {};
	var str = JSON.stringify(data);
	window.android.androidtodingyue();
	return false;
}

/*IOS订阅*/
function iostodingyue() {
	var data = {}
	var str = JSON.stringify(data);
	WebViewJavascriptBridge.callHandler('iostodingyue', "", function() { });
	return false;
}

 

bin53719
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniApp或者vue 与 Android或者ios原生交互
07-18
uniApp或者vue 与 Android或者ios实现原生交互，使用bridge.js可以轻松实现。
iOS JS交互总结，看这一篇文章就够了！
小小爬山虎
02-16 1826
序言 本文总结了我对JS交互的一些使用经验。包含Web调用OC、OC调用Web、JS文件本地化维护、纯原生的JS写法、开源库（WebViewJavascriptBridge）的详细用法，以及Html的实现片段。 一、Web调用OC 1.1 直接调用无返回值。如调用原生的验证码校验控件。 首先要在JS文件中添加方法实现： 然后在.m中注册并拦截方法： [self.bridge registerHandler:JSApi_booking handler:^(id data, WVJBResp.
iOS与JS交互的4种方法
热门推荐
dolacmeng的专栏
03-20 5万+
iOS与JS交互的方法：1.拦截url（适用于UIWebView和WKWebView） 2.JavaScriptCore（只适用于UIWebView，iOS7+） 3.WKScriptMessageHandler（只适用于WKWebView，iOS8+） 4.WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架） 下面以假设的需求进行
2024年最全IOS和Android在与js交互的差别(1)，2024年最新京东的面试题
最新发布
2401_84544914的博客
05-17 616
Js将要发送的消息存放在Js端——>调用iframe.src，触发通知Native——>Native拦截请求，调用Js bridge里面的fetchQueue并获取返回的消息内容，处理消息——>将需要返回的数据通过直接调用Js的方式，让Js处理。这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。
iOS(安卓/客户端)与JS交互方案设计
kangpp的博客
06-07 3139
iOS 原生与JS交互设计方案
iOS与JS交互
烂笔头
02-16 3474
1.使用JavaScriptCoreJavaScriptCore中常用的类型： JSContext ：JSContext代表JS的执行环境，它的对象通过-evaluateScipt: 方法就可以执行JS代码。可以通过JSContext *jscontext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptCo
ios运行js文件，执行方法获取数据
weixin_44836266的博客
03-29 3472
一、解决问题 目前我们的app大多都是与前端h5页面混合开发，有些数据类似但却要app端和h5端各维护一套代码，不便于管理，代码逻辑也可能存在差异 二、新技术概述 JavaScriptCore是webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境iOS7后苹果在iPhone平台推出，极大的方便了我们对js的操作。我们可以脱离webview直接运行我们的js。iOS7以前我们对JS的操作只有webview里面一个函数 stringByEvaluatingJavaScriptFromString
IOS与网页JS交互详解及实例
01-04
IOS与网页JS交互 随着移动APP的快速迭代开发趋势，越来越多的APP中嵌入了html网页，但在一些大中型APP中，尤其是电商类APP，html页面已经不仅仅满足展示功能，这时html要求能与原生语言进行交互、相互传值。比如携程...
vue实现与安卓、IOS交互的方法
10-17
在开发跨平台应用时，Vue.js 作为前端框架与原生Android和iOS系统的交互是非常常见的需求。本篇文章将详细介绍如何在Vue项目中实现与Android和iOS的交互。 首先，我们需要理解这种交互的基本原理：通常，Android和...
JS调用Android、Ios原生控件
11-28
在混合式应用开发中，JavaScript (JS) 与原生平台如Android和iOS之间的交互是至关重要的。这种交互使得Web视图能够利用移动设备的原生功能，提供更丰富的用户体验。本文将探讨JS如何调用Android和iOS原生控件，并...
3D WebView for Android and iOS Web Browser 4.1
03-22
使用与支持 Vuplex VR/AR 浏览器的相同代码，... • 与Android插件不同，iOS插件不支持悬停交互、拖拽交互或WebGL。 • 欲使用 OES 纹理，Android 插件需使用 GLSL 着色器，这类着色器无法与通用渲染管线一起正常使用
跨android和iOS平台的js和原生代码相互调用示例
10-24
跨android和ios平台的js和原生代码相互调用的工程代码和html示例文件。
ios 原生与js交互
09-26
ios7之后，ios中加入了JavaScriptCore框架。该框架让Objective-C和JavaScript代码直接的交互变得更加的简单方便。ios 原生与js交互，demo代码，其中包括利用JSBinding简单使用！
android原生与HTML之间的交互
12-03
用JS实现android原生与html之间的交互
iOS与js相互调用
07-21
Ios中oc调用js中方法,js调用oc方法
iOS和Js互调的简单例子
05-17
在项目中有时候需要APP和Js之间相互调用方法来实现某些功能，本例子主要介绍iOS和Js是怎么实现相互调用对方的方法。
iOS和JS交互(含OC、html、js)代码不使用第三方库(二)
whuizhou的专栏
12-21 1346
洲洲哥学院,ios和h5交互
iOS原生和前端JS交互真没那么简单，了解背后实现让你受益匪浅
砥砺前行的博客
04-06 3785
JavaScriptCore 开发 App 的框架 ，比如React Native、Weex、小程序、WebView Hybird等框架。
js与Android、IOS数据交互
熊猫卓Sun博客
01-07 4894
一、先说一下js与Android的数据交互 重点了解js调用Android的方法：window.jstojava.closeDialog(参数1，参数2)   其中jstojava为与app协商好的类名，closeDialog()为Android原生方法名 二、再说IOS与js的交互 查询一些资料了解到，js与ios的交互有很多方式目前很流行的库有WebviewJavaScriptBridg
vue(h5)与app(android,ios)端交互
12-27
在Vue (H5) 与 App (Android, iOS) 端交互方面，可以通过以下几种方式实现： 1. 使用跨平台开发框架：可以选择使用Vue或其他跨平台开发框架如Flutter或React Native，在同一套代码基础上同时开发H5和App端，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值