在原生ios和android中嵌套h5, h5调用原生的方法，进行跳转

r囧r小猫 2023-06-21 14:25 21阅读 0赞

首先做一个终端判断
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    
    然后直接上代码
    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)
    					console.log(1)
    				}
    				
    				/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
    				// 点击地址打开地图
    				$('.hero-top-btn').click(function(){ 
    				
    					if (isAndroid) {    //安卓
    						// alert('isAndroid',isAndroid)
    						console.log(2)
    						var param = { 
    							
    						}
    						console.log(JSON.stringify(param))
    						window.android.invitFunc(JSON.stringify(param))
    						
    						// connectWebViewJavascriptBridge (function(bridge) { 
    						// 
    						// //客户端已经注册好一个名为“ObjC Echo”的方法，H5直接进行调用（方法名也为“ObjC Echo”）就行，调用的时候可以传客户端需要的参数
    						// bridge.callHandler('invitFunc', {'latitude': parseFloat(mapLocalObj.lat),'longitude': parseFloat(mapLocalObj.lon),'shopName': mapLocalObj.shopName, 'address': mapLocalObj.address}, function responseCallback(responseData) { 
    						// console.log("JS received response:", responseData)
    						// })
    						// })
    				
    				
    					}
    					if (isiOS) {     // iOS
    						// alert('isiOS', isiOS)
    						setupWebViewJavascriptBridge(function(bridge) { 
    							
    						   var uniqueId = 1
    						   function log(message, data) { 
    							 var log = document.getElementById('log')
    							 var el = document.createElement('div')
    							 el.className = 'logLine'
    							 el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
    							 if (log.children.length) { 
    								log.insertBefore(el, log.children[0])
    							 } else { 
    							   log.appendChild(el)
    							 }
    						   }
    						   // /* Initialize your app here */
    						  // 
    						 // /*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS：打开本demo对应的博文*/
    						   bridge.registerHandler('openWebviewBridgeArticle', function() { 
    							  log("openWebviewBridgeArticle was called with by ObjC")
    						   })
    						   /*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
    						   bridge.registerHandler('getUserInfos', function(data, responseCallback) { 
    							 log("Get user information from ObjC: ", data)
    							 responseCallback({ 'userId': '123456', 'blog': '123'})
    						   })
    				
    													  
    						   /*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
    							
    						   
    						   bridge.callHandler('invitFunc', { }, function(response) { 
    									log('JS got response', response)
    						   })
    							
    					 
    						})
    						
    					}
    					
    				})

这里面的代码直接可以复制，什么都不用改变

要注意的是  
invitFunc 这个方法，是自定义的，需要告诉android和ios这个方法名，方便他们调用

param 这个对象里面的参数，可以为空也可以传值，看你们具体的业务需要