Skip to content

hrs_app_h5 / bill

Go to a project
Commit 1522c898 by 赵艳波
Options

update

parent 00eeafc6
Inline Side-by-side
Showing with 170 additions and 43 deletions
src/assets/js/bridge/birdge.js 0 → 100644
import jsBridge from './jsBridge';
/**
* H5与移动端桥接公共方法
*/
class Bridge {
/**
* 设置齐刘海头部颜色
*
* @param {"barColor": "#0978e7"} data 请求数据
*/
setBarColor(data = {}) {
return new Promise((resolve, reject) => {
try {
jsBridge.callHandler('setBarColor', data, function (response) {
console.log('44444=>', response);
resolve(response)
});
resolve(null);
} catch (err) {
reject(err)
}
})
}
/**
* 获取头部栏高度
*
* @param {Object} data
*/
getBarHeight(data = {}) {
return new Promise((resolve, reject) => {
try {
jsBridge.callHandler("getBarHeight", data, function (response) {
resolve(response);
});
resolve(null);
} catch (err) {
reject(err);
}
})
}
}
export default new Bridge();
src/assets/js/bridge/jsBridge.js 0 → 100644
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// 执行回调函数
function setupWebViewJavascriptBridge(callback) {
if (isAndroid) {
// 如果该对象已存在则直接执行
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
// 否则添加事件监听在执行
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
callback(WebViewJavascriptBridge)
},
false
)
}
return;
}
if (isIOS) {
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)
}
}
// 注册回调函数
setupWebViewJavascriptBridge(function () {
if (isAndroid) {
//初始化
bridge.init(function (message, responseCallback) {
var data = {
'Javascript Responds': 'Wee!'
};
responseCallback(data);
})
}
})
// 暴露当前模块的方法
export default {
// js调APP方法 （参数分别为:app提供的方法名 传给app的数据 回调）
callHandler(name, data, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(name, data, callback)
})
},
// APP调js方法 （参数分别为:js提供的方法名 回调）
registerHandler(name, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
}
\ No newline at end of file
src/main.js
...@@ -7,6 +7,7 @@ import './assets/css/index.css' ...@@ -7,6 +7,7 @@ import './assets/css/index.css'
import './utils/filter' import './utils/filter'
import FastClick from 'fastclick' import FastClick from 'fastclick'
import initJsBridge from "./assets/js/JsBridge"; import initJsBridge from "./assets/js/JsBridge";
import bridge from "./assets/js/bridge/birdge";
Vue.config.productionTip = false Vue.config.productionTip = false
...@@ -30,54 +31,56 @@ FastClick.prototype.focus = function (targetElement) { ...@@ -30,54 +31,56 @@ FastClick.prototype.focus = function (targetElement) {
}; };
Vue.prototype.setPageNavState = function (params = { headerColor: false, isShowClose: false, isShowBack: false, isCloseLeft: false, isShowTitle: false, isShowNav: false, isCloseWebView: false }) { Vue.prototype.setPageNavState = function (params = { headerColor: false, isShowClose: false, isShowBack: false, isCloseLeft: false, isShowTitle: false, isShowNav: false, isCloseWebView: false }) {
try { // try {
initJsBridge((params) => { // initJsBridge((params) => {
window.WebViewJavascriptBridge.callHandler( // window.WebViewJavascriptBridge.callHandler(
"setPageNavState", // "setPageNavState",
{ // {
isShowClose: params.isShowClose ? params.isShowClose : false, // isShowClose: params.isShowClose ? params.isShowClose : false,
isShowBack: params.isShowBack ? params.isShowBack : false, // isShowBack: params.isShowBack ? params.isShowBack : false,
isCloseLeft: params.isCloseLeft ? params.isCloseLeft : false, // isCloseLeft: params.isCloseLeft ? params.isCloseLeft : false,
isShowTitle: params.isShowTitle ? params.isShowTitle : false, // isShowTitle: params.isShowTitle ? params.isShowTitle : false,
isShowNav: params.isShowNav ? params.isShowNav : false, // isShowNav: params.isShowNav ? params.isShowNav : false,
isCloseWebView: params.isCloseWebView ? params.isCloseWebView : false // isCloseWebView: params.isCloseWebView ? params.isCloseWebView : false
}, // },
function (response) { // function (response) {
console.log("setPageNavState来自 ios/android的回传数据： ", response); // console.log("setPageNavState来自 ios/android的回传数据： ", response);
} // }
); // );
window.WebViewJavascriptBridge.callHandler( // window.WebViewJavascriptBridge.callHandler(
"getBarHeight", // "getBarHeight",
null, // null,
function (response) { // function (response) {
console.log( // console.log(
"main getBarHeight来自 ios/android的回传数据： ", // "main getBarHeight来自 ios/android的回传数据： ",
response // response
); // );
if (response) { // if (response) {
response = JSON.parse(response); // response = JSON.parse(response);
const barHeight = response.statusBarHeight; // const barHeight = response.statusBarHeight;
localStorage.setItem("barHeight", barHeight); // localStorage.setItem("barHeight", barHeight);
console.log('main barHeight=', barHeight); // console.log('main barHeight=', barHeight);
} // }
} // }
); // );
window.WebViewJavascriptBridge.callHandler( // window.WebViewJavascriptBridge.callHandler(
"setBarColor", // "setBarColor",
{ "barColor": params.headerColor ? params.headerColor : "#0978e7" }, // { "barColor": params.headerColor ? params.headerColor : "#0978e7" },
function (response) { // function (response) {
console.log("main setBarColor的回传数据：", response); // console.log("main setBarColor的回传数据：", response);
} // }
); // );
}); // });
} catch (err) { // } catch (err) {
console.log("main setPageNavState is error,err=", err); // console.log("main setPageNavState is error,err=", err);
} // }
}; };
Vue.prototype.$bridge = bridge;
const VConsole = require('vconsole') const VConsole = require('vconsole')
const my_console = new VConsole(); const my_console = new VConsole();
......
src/views/test.vue
...@@ -43,6 +43,9 @@ export default { ...@@ -43,6 +43,9 @@ export default {
// console.log("hasAccess=", hasAccess); // console.log("hasAccess=", hasAccess);
// }); // });
this.setPageNavState(); this.setPageNavState();
this.$bridge.setBarColor({ barColor: "#0978e7" }).then(res => {
console.log("结果=>", res);
});
}, },
methods: { methods: {
...mapActions([ ...mapActions([
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment