同学的一个h5页面嵌入APP的需求,10分钟搞个demo
思路:
hbuidlerX快速搭建
步骤:
下软件件注册账号
打开Hbuilder创建 5+APP页面
修改index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
var plusReady = function (callback) {
if (window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
};
plusReady(function () {
var firstBack = 0;
var handleBack = function () {
var currentWebview = plus.webview.currentWebview();
var topWebview = plus.webview.getTopWebview();
var now = Date.now || function () {
return new Date().getTime();
};
currentWebview.canBack(function (evt) {
/**
* 有可后退的历史记录,则后退。
* 否则,关闭当前窗口。
* 如果当前窗口是入口页,那么执行退出的逻辑。
*/
if (currentWebview.id === plus.runtime.appid) {
if (!firstBack) {
firstBack = now();
plus.nativeUI.toast('再按一次退出应用');
setTimeout(function () {
firstBack = 0;
}, 2000);
} else if (now() - firstBack < 2000) {
plus.runtime.quit();
}
} else {
if (evt.canBack) {
history.back();
} else {
currentWebview.close('auto');
}
}
});
};
plus.key.addEventListener('backbutton', handleBack);
plus.webview.open("https://www.baidu.com/")
});
</script>
</head>
<body>
</body>
</html>
打包
发行
发行
打包成功
本地能调试的继续往下看
发现无法调试,百度发现需要安装模拟器,需要配置,我下的夜神
注意以下两个配置
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
二维码