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>
<html>
<head>
<title>JSBridge Test</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="eruda.js"></script>
<script>eruda.init();</script>
<style type="text/css">
.btn {
background-color: #aaa;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
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
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>业务账单</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/main.js
// import Vue from 'vue'
// import App from './App.vue'
// import router from './router'
// import store from './store'
// import 'lib-flexible/flexible'
// import './assets/css/index.css'
// import './utils/filter'
// import FastClick from 'fastclick'
// // import initJsBridge from "./assets/js/JsBridge";
// import bridge from "./assets/js/bridge/birdge";
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'lib-flexible/flexible'
import './assets/css/index.css'
import './utils/filter'
import FastClick from 'fastclick'
// import initJsBridge from "./assets/js/JsBridge";
import bridge from "./assets/js/bridge/birdge";
// Vue.config.productionTip = false
Vue.config.productionTip = false
// Vue.prototype.globalNavLeftArrowClick = function (callback) {
// document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
// callback();
// };
// };
Vue.prototype.globalNavLeftArrowClick = function (callback) {
document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
callback();
};
};
// FastClick.attach(document.body);
FastClick.attach(document.body);
// FastClick.prototype.focus = function (targetElement) {
// let length;
// if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
// length = targetElement.value.length;
// targetElement.focus();
// targetElement.setSelectionRange(length, length);
// } else {
// targetElement.focus();
// }
// };
FastClick.prototype.focus = function (targetElement) {
let length;
if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
length = targetElement.value.length;
targetElement.focus();
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
};
// Vue.prototype.setPageNavState = function () {
// bridge.setPageNavState({
// isShowClose: false,
// isShowBack: false,
// isCloseLeft: false,
// isShowTitle: false,
// isShowNav: false,
// isCloseWebView: false
// });
Vue.prototype.setPageNavState = function () {
bridge.setPageNavState({
isShowClose: false,
isShowBack: false,
isCloseLeft: false,
isShowTitle: false,
isShowNav: false,
isCloseWebView: false
});
// bridge.getBarHeight().then(response => {
// response = JSON.parse(response);
// const barHeight = response.statusBarHeight;
// localStorage.setItem("barHeight", barHeight);
// console.log('main barHeight=', barHeight);
// })
bridge.getBarHeight().then(response => {
response = JSON.parse(response);
const barHeight = response.statusBarHeight;
localStorage.setItem("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') {
// const VConsole = require('vconsole')
// const my_console = new VConsole();
// }
if (process.env.NODE_ENV === 'development'||process.env.NODE_ENV === 'staging') {
const VConsole = require('vconsole')
const my_console = new VConsole();
}
// new Vue({
// store,
// router,
// render: h => h(App)
// }).$mount('#app')
new Vue({
store,
router,
render: h => h(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