单独的一个完整的交互方法
function goToPay ( query) {
console. log ( query) ;
var data = {
'type' : pay_type_code,
'query' : query
} ;
var u = navigator. userAgent;
var isAndroid = u. indexOf ( 'Android' ) > - 1 || u. indexOf ( 'Adr' ) > - 1 ;
var isIOS = ! ! u. match ( /\(i[^;]+;( U;)? CPU.+Mac OS X/ ) ;
console. log ( '准备调起支付......' ) ;
if ( isAndroid) {
mainBridge = webViewJavascriptBridge;
mainBridge. goToPay ( JSON . stringify ( data) ) ;
return ;
}
console. log ( '吊起支付' ) ;
window. webkit. messageHandlers. goToPay. postMessage ( data) ;
}
判断安卓还是ios做单独处理
function aa ( ) {
var u = navigator. userAgent;
var isAndroid = u. indexOf ( 'Android' ) > - 1 || u. indexOf ( 'Adr' ) > - 1 ;
var isiOS = ! ! u. match ( /\(i[^;]+;( U;)? CPU.+Mac OS X/ ) ;
if ( isAndroid) {
}
if ( isiOS) {
}
}
判断微信打开
var u = navigator. userAgent;
var ua = navigator. userAgent. toLowerCase ( ) ;
var isWeixin = ua. indexOf ( 'micromessenger' ) != - 1 ;
if ( u. indexOf ( 'Android' ) > - 1 || u. indexOf ( 'Linux' ) > - 1 ) {
if ( isWeixin) {
this . flag = true ;
}
}
安卓还是IOS 对应APP下载地址
let u = navigator. userAgent;
if ( u. indexOf ( 'Android' ) > - 1 || u. indexOf ( 'Linux' ) > - 1 ) {
window. location. href = "http://im.hfgld.net/hanlife.apk" ;
} else {
window. location. href = "http://itunes.apple.com/cn/app/%E6%B1%89%E5%AF%8C%E6%96%B0%E7%94%9F%E6%B4%BB/id1458588987?mt=8" ;
}
从原生获取参数的方法
this . getToken = function ( ) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
console. log ( "android未初始化:WebDemo" ) ;
} else {
return that. mainBridge. getToken ( ) ;
}
}
if ( typeof that. mainBridge == "undefined" ) {
let iOSInfo = JSON . parse ( JSON . stringify ( window. iOSInfo) ) ;
return iOSInfo. token;
}
} ;
向原生传递参数的方法
this . pageJump = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
console. log ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. pageJump ( JSON . stringify ( query) ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. pageJump. postMessage ( query) ;
}
}
封装的js文件
"use strict" ;
function WebDemo ( ) {
var u = navigator. userAgent;
this . name = "webdemo1.0" ;
this . debug = true ;
this . isAndroid = u. indexOf ( 'Android' ) > - 1 || u. indexOf ( 'Adr' ) > - 1 ;
this . isIOS = ! ! u. match ( /\(i[^;]+;( U;)? CPU.+Mac OS X/ ) ;
this . say = function ( ) {
if ( this . debug) {
console. log ( "name:" , this . name) ;
console. log ( "isandroid:" , this . isAndroid) ;
console. log ( "isIOS:" , this . isIOS) ;
}
var that = this ;
if ( this . isAndroid) {
if ( this . debug) {
console. log ( 'setup For ..Android' ) ;
}
if ( typeof webViewJavascriptBridge != 'undefined' ) {
this . mainBridge = webViewJavascriptBridge;
}
}
if ( this . isIOS) {
if ( this . debug) {
console. log ( 'setup For ..IOS' ) ;
}
this . mainBridge = undefined;
this . setupWebViewJavascriptBridge = function ( 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 = 'wvjbscheme://__BRIDGE_LOADED__' ;
document. documentElement. appendChild ( WVJBIframe) ;
setTimeout ( function ( ) { document. documentElement. removeChild ( WVJBIframe) } , 0 )
} ;
console. log ( "setupWebViewJavascriptBridge is :" , typeof this . setupWebViewJavascriptBridge) ;
this . mainBridge = undefined;
this . setupWebViewJavascriptBridge ( function ( bridge) {
console. log ( 'get bridge:' , typeof bridge) ;
that. mainBridge = bridge;
} ) ;
}
this . statusHeight = function ( ) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
console. log ( "android未初始化:WebDemo" ) ;
} else {
return that. mainBridge. statusHeight ( ) ;
}
}
if ( typeof that. mainBridge == "undefined" ) {
let iOSInfo = JSON . parse ( JSON . stringify ( window. iOSInfo) ) ;
return iOSInfo. statusHeight;
}
} ;
this . setData = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. setData ( query) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. setData. postMessage ( query) ;
}
}
this . exit = function ( ) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. exit ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. exit. postMessage ( ) ;
}
}
this . finishApp = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. finishApp ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. finishApp. postMessage ( query) ;
}
}
this . statusHeight = function ( ) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
console. log ( "android未初始化:WebDemo" ) ;
} else {
return that. mainBridge. statusHeight ( ) ;
}
}
if ( typeof that. mainBridge == "undefined" ) {
let iOSInfo = JSON . parse ( JSON . stringify ( window. iOSInfo) ) ;
return iOSInfo. statusHeight;
}
} ;
this . saveScreenshotToLibrary = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. saveScreen ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. saveScreenshotToLibrary. postMessage ( query) ;
}
}
this . ClearMemery = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. clearMemery ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. ClearMemery. postMessage ( query) ;
}
}
this . updateApp = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. updateApp ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. updateApp. postMessage ( query) ;
}
}
this . doScan = function ( query) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. doScan ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
console. log ( '...................' ) ;
console. log ( query) ;
window. webkit. messageHandlers. doScan. postMessage ( query) ;
}
}
this . doScan_ = function ( callback) {
if ( that. debug) {
console. log ( 'mainBridge type is :' , typeof that. mainBridge) ;
console. log ( 'callback is type :' , typeof callback) ;
}
if ( that. isAndroid) {
if ( typeof that. mainBridge == "undefined" ) {
alert ( "android未初始化:WebDemo" ) ;
} else {
that. mainBridge. doScan ( ) ;
}
return ;
}
if ( typeof that. mainBridge == "undefined" ) {
var ret = {
status: - 1
}
if ( typeof callback != 'undefined' ) {
callback ( ret) ;
} else {
alert ( "未初始化:WebDemo" ) ;
}
}
var data = { type: 'scanResponseCallback:' , param: [ ] } ;
that. mainBridge. callHandler ( 'getBlogNameFromObjC' , data, function ( res) {
if ( that. debug && res. status != 1 ) {
console. log ( "错误:" , res. msg) ;
}
if ( typeof callback != 'undefined' ) {
callback ( res) ;
}
} ) ;
}
} ;
this . say ( ) ;
}
export default WebDemo;
使用方法
import WebDemo from '@/common/js/webdemo.js'
var demo = new WebDemo ( ) ;
Vue. prototype. $demo = demo
this . $demo. say ( )
< ! DOCTYPE html>
< html>
< head>
< meta charset= "utf-8" / >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< title> h5打包APP ,与原生交互< / title>
< / head>
< body>
< / body>
< ! -- 引入webdemo -- >
< script src= "./webdemo.js" type= "text/javascript" > < / script>
< script type= "text/javascript" >
var webdemo = new WebDemo ( ) ;
webdemo. statusHeight ( )
webdemo. setData ( '给安卓传递的参数' )
webdemo. exit ( ) ;
< / script>
< / html>