Skip to content

hrs_app_h5 / bill

Go to a project
Commit b024323b by 展昭
Options

恢复到未修改状态

parent 51f903c5
Inline Side-by-side
Showing with 71 additions and 244 deletions
public/eruda.js deleted 100644 → 0
This diff could not be displayed because it is too large.
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head>
<head> <meta charset="utf-8">
<title>JSBridge Test</title> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8"> <meta name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script> <title>业务账单</title>
<script type="text/javascript" src="eruda.js"></script> </head>
<script>eruda.init();</script> <body>
<style type="text/css"> <noscript>
.btn { <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
background-color: #aaa; </noscript>
height: 40px; <div id="app"></div>
display: flex; <!-- built files will be auto injected -->
justify-content: center; </body>
align-items: center; </html>
color: #444444;
text-decoration: none;
margin-top: 10px;
}
#response {
background: #eeeeee;
word-wrap: break-word;
display: block;
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<p style="color: red">嵌入页区域</p>
<p>以JSBridge的方式实现</p>
<button class="btn" id="getOS">setPageNavState</button>
<button onclick="call('setPageNavState',{
isShowClose: true,
isShowBack: false,
isCloseLeft: true,
isShowTitle: true,
isShowNav: true,
isCloseWebView: true
})">call method</button>
<pre id="response"></pre>
<script type="text/javascript">
// 获取android/ios上WebViewJavascriptBridge
function initWebViewJSBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(window.WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady',
() => callback(window.WebViewJavascriptBridge), false);
}
}
// 获取WebViewJavascriptBridge的Promise版
function getWebViewJSBridge() {
return new Promise((resolve) => {
initWebViewJSBridge((bridge) => resolve(bridge));
});
}
// JS端调用Native方法
// methodName: Native暴露给JS端的方法名
// param: 调用Native方法时的参数
// 返回值: Native方法实际返回值
async function call(methodName, param) {
const bridge = await getWebViewJSBridge();
return new Promise((resolve) => {
bridge.callHandler(methodName, JSON.stringify(param), (ret) => {
alert(ret);
resolve(ret);
});
});
}
/**
* 初始化jsbridge
* @param readyCallback 初始化完成后的回调
*/
function initJsBridge(readyCallback) {
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终端
// 注册jsbridge
function connectWebViewJavascriptBridge(callback) {
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(window.WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function () {
callback(window.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)
}
}
// 调用注册方法
connectWebViewJavascriptBridge(function (bridge) {
if (isAndroid) {
bridge.init(function (message, responseCallback) {
console.log('JS got a message', message);
responseCallback(data);
});
}
bridge.registerHandler('jsbridge_showMessage', function (data, responseCallback) {
showResponse(data);
});
bridge.registerHandler('jsbridge_getJsMessage', function (data, responseCallback) {
showResponse(data);
responseCallback('native 传过来的是：' + data);
});
readyCallback();
});
}
/**
* 显示响应信息
* @param response 响应信心
*/
function showResponse(response) {
$('#response').text(response);
}
/**
* jQuery
*/
$(function () {
// 首先调用JSBridge初始化代码，完成后再设置其他
initJsBridge(function () {
$("#getOS").click(function () {
// 通过JsBridge调用原生方法，写法固定，第一个参数时方法名，第二个参数时传入参数，第三个参数时响应回调
window.WebViewJavascriptBridge.callHandler('setPageNavState', {
headerColor: "#f0f",
isShowClose: false,
isShowBack: false,
isCloseLeft: false,
isShowTitle: false,
isShowNav: false,
isCloseWebView: false
}, function (response) {
alert(response);
showResponse(response);
});
});
})
});
</script>
</body>
</html>
\ No newline at end of file
src/main.js
// import Vue from 'vue' import Vue from 'vue'
// import App from './App.vue' import App from './App.vue'
// import router from './router' import router from './router'
// import store from './store' import store from './store'
// import 'lib-flexible/flexible' import 'lib-flexible/flexible'
// import './assets/css/index.css' 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"; import bridge from "./assets/js/bridge/birdge";
// Vue.config.productionTip = false Vue.config.productionTip = false
// Vue.prototype.globalNavLeftArrowClick = function (callback) { Vue.prototype.globalNavLeftArrowClick = function (callback) {
// document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () { document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
// callback(); callback();
// }; };
// }; };
// FastClick.attach(document.body); FastClick.attach(document.body);
// FastClick.prototype.focus = function (targetElement) { FastClick.prototype.focus = function (targetElement) {
// let length; let length;
// if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') { if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
// length = targetElement.value.length; length = targetElement.value.length;
// targetElement.focus(); targetElement.focus();
// targetElement.setSelectionRange(length, length); targetElement.setSelectionRange(length, length);
// } else { } else {
// targetElement.focus(); targetElement.focus();
// } }
// }; };
// Vue.prototype.setPageNavState = function () { Vue.prototype.setPageNavState = function () {
// bridge.setPageNavState({ bridge.setPageNavState({
// isShowClose: false, isShowClose: false,
// isShowBack: false, isShowBack: false,
// isCloseLeft: false, isCloseLeft: false,
// isShowTitle: false, isShowTitle: false,
// isShowNav: false, isShowNav: false,
// isCloseWebView: false isCloseWebView: false
// }); });
// bridge.getBarHeight().then(response => { bridge.getBarHeight().then(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);
// }) })
// bridge.setBarColor({ "barColor": "#0978e7" }); bridge.setBarColor({ "barColor": "#0978e7" });
// }; };
// Vue.prototype.$bridge = bridge; Vue.prototype.$bridge = bridge;
// if (process.env.NODE_ENV === 'development'||process.env.NODE_ENV === 'staging') { if (process.env.NODE_ENV === 'development'||process.env.NODE_ENV === 'staging') {
// const VConsole = require('vconsole') const VConsole = require('vconsole')
// const my_console = new VConsole(); const my_console = new VConsole();
// } }
// new Vue({ new Vue({
// store, store,
// router, router,
// render: h => h(App) render: h => h(App)
// }).$mount('#app') }).$mount('#app')
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