同学的一个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
分享
二维码
< <上一篇
下一篇>>