同学的一个h5页面嵌入APP的需求，10分钟搞个demo_h5系统嵌入app

作者：盐析白兔 | 2024-04-28 10:15:15

踩

h5系统嵌入app

思路：

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>

打包

发行

打包成功

本地能调试的继续往下看

发现无法调试，百度发现需要安装模拟器，需要配置，我下的夜神

注意以下两个配置

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/501724