在草料上根据页面网址生成二维码:http://192.168.36.95:8080/xx.html?type=1&id=1
用微信或者其他app扫它,判断ua然后用可以用WebViewJavascriptBridge和原生交互跳转
页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" /> <script src="bridge.js"></script> </head> <body></body> <script> let paramsObj = getParamsObj(window.location.search), platForm = bridge.getOSType(); if(paramsObj.type == 1){ let param = platForm === 'IOS' ? { "url":'xxx' } : { "url": 'xxx' }; if(platForm === 'WEIXIN' ){ window.location.href = "http://192.168.36.95:8081/"; } else { bridge.callHandler('xxx', param, (data) => { console.log('error'); }); } } </script> </html>
引入的js文件
function getOSType() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var isWeixin = u.indexOf('MicroMessenger') !== -1; //微信终端 if (isWeixin) { return 'WEIXIN'; } else if (isiOS) { return 'IOS'; } else if(isAndroid) { return 'ANDROID'; } } /** * android系统js桥接口设置 * @param {Object} callback 桥接口回调函数 桥接方式固定写法 */ function setUpAndroidBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } else { document.addEventListener( 'WebViewJavascriptBridgeReady', function () { return callback(WebViewJavascriptBridge); }, false ); } } /** * IOS系统js桥接口设置 * @param {Object} callback 桥接口回调函数 桥接方式固定写法 */ function setUpIOSBridge(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) } //确保 init 只有一次 function initAndroidBrider(bridge){ bridge.init(function(message, responseCallback) {}); initAndroidBrider = function(){} } function getParamsObj(search){ let paramsArray = search.substr(1).split('&'), i, paramsObj = {}; paramsArray.forEach((item) => { i = item.indexOf('='); paramsObj[item.slice(0, i)] = item.slice(i+1); }); return paramsObj; } let bridge = { getOSType: getOSType, getParamsObj: getParamsObj, callHandler(name, data, resultCallback) { var osType = getOSType();//获取系统类型 //按系统类型 分别执行原生交互 if (osType == 'IOS') { //苹果手机交互方式 消息体为字面量对象(json格式): action 代表执行的动作 data 代表传递的数据 setUpIOSBridge(function (bridge) { bridge.callHandler(name, data, function (response) { if (typeof resultCallback == 'function') { resultCallback(response); } }); }); } else if (osType == 'ANDROID') { //安卓手机交互方式 setUpAndroidBridge(function (bridge) { bridge.callHandler(name, data, function (response) { if (typeof resultCallback == 'function') { resultCallback(response); } }); }); } else { //其他类型 } }, registerHandler(name, callback) { var osType = getOSType();//获取系统类型 if (osType == 'IOS') { //苹果手机交互方式 消息体为字面量对象(json格式): action 代表执行的动作 data 代表传递的数据 setUpIOSBridge(function (bridge) { bridge.registerHandler(name, function (data, responseCallback) { callback(data, responseCallback) }) }); } else if (osType == 'ANDROID') { //安卓手机交互方式 setUpAndroidBridge(function (bridge) { initAndroidBrider(bridge) bridge.registerHandler(name, function (data, responseCallback) { console.log('收到数据: '+data) if(data){ data = JSON.parse(data) } callback(data, responseCallback); }); }); } else { //其他类型 } } }