使用HBuilderX快速将H5网页转为简单的安卓应用

·  阅读 753

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第31天,点击查看活动详情

前言

由于课程作业要求把网站发布为安卓APP,花了两天简单研究了一下怎么使用HBuilderX快速进行转换,并实现对物理按键的正确反应,在这里分享一下入门经验。虽然了解新的api比较麻烦,但是代码本身还是挺简单的(毕竟没有太多的需求)。

5+App入门

image.png

在 HBuilderX 里新建一个项目,选择 5+App 的默认模板即可。(Hello H5+ 是示例项目,演示了各种api的使用方法,也内嵌了api文档,对于初学者很有帮助,你可以打开它来学习基本的开发。)

新建的项目中除了 unpackage 文件夹和 manifest.json,其他的都可以删掉换成你自己的文件。

首先,在首页里嵌入以下代码:

//取消浏览器的所有事件,使得active的样式在手机上正常生效
document.addEventListener('touchstart', function() {
        return false;
}, true);
// 禁止选择
document.oncontextmenu = function() {
        return false;
};
// H5 plus事件处理
function plusReady() {
        // Android处理返回键
        plus.key.addEventListener('backbutton', function() {
                ('iOS' == plus.os.name) ? plus.nativeUI.confirm('确认退出?', function(e) {
                        if (e.index > 0) {
                                plus.runtime.quit();
                        }
                }, 'HelloH5', ['取消', '确定']): (confirm('确认退出?') && plus.runtime.quit());
        }, false);
        // 关闭启动界面
        setTimeout(function() {
                plus.navigator.closeSplashscreen();
        }, 200);
}
if (window.plus) {
        plusReady();
} else {
        document.addEventListener('plusready', plusReady, false);
}
复制代码

这里提几点注意事项:

  1. 所有的 plus api 都应该放在 plusready 事件发生后调用,否则会出现 plus is undefined
  2. ios 的 h5 confirm 对话框会加一行 url,所以要调用原生的UI,当然也可以都使用原生的UI
plus.key.addEventListener('backbutton', function() {
        plus.nativeUI.confirm('确认退出?', function(e) {
                if (e.index > 0) {
                        plus.runtime.quit();
                }
        }, 
        {
            "title":"HelloH5",
            "buttons":["取消","确定"],
            "verticalAlign":"bottom"
	}
    );
}, false);
复制代码

更推荐使用上面这种写法设置样式,详情参见文档:

然后,创建一个js文件,写入以下代码

(function(w) {
        function shield() {
                return false;
        }
        document.addEventListener('touchstart', shield, false);
        document.oncontextmenu = shield;
        
        // H5 plus事件处理
        var ws = null;
        function plusReady() {
                ws = plus.webview.currentWebview();
                plus.key.addEventListener('backbutton', function() {
                        console.log('back button');
                        back();
                }, false);
        }
        if (w.plus) {
                plusReady();
        } else {
                document.addEventListener('plusready', plusReady, false);
        }
        // 返回
        w.back = function(hide) {
                if (w.plus) {
                        ws || (ws = plus.webview.currentWebview());
                        hide ? ws.hide('auto'): history.back();
                } else if (history.length > 1) {
                        console.log('back');
                        history.back();
                } else {
                        console.log('close');
                        w.close();
                }
        };
        // 处理点击事件
        var openw = null;
	w.clicked = function(id, t, ws) {
		if (openw) { //避免多次打开同一个页面
			return null;
		}
		if (w.plus) {
			ws = ws || {};
			ws.scrollIndicator || (ws.scrollIndicator = 'none');
			ws.scalable || (ws.scalable = false);
			ws.backButtonAutoControl || (ws.backButtonAutoControl = 'close');
			ws.titleNView = ws.titleNView || {
				autoBackButton: true
			};
			ws.titleNView.backgroundColor = '#D74B28';
			ws.titleNView.titleColor = '#CCCCCC';
			t && (ws.titleNView.titleText = t);
			openw = plus.webview.open(id, id, ws);
			openw.addEventListener('close', function() {
				openw = null;
			}, false);
			return openw;
		} else {
			w.open(id);
		}
		return null;
	};
})(window);
复制代码

这里和官方示例中的代码不太一样,主要是改了这句 hide ? ws.hide('auto'): history.back(); ,因为官方示例中所有的跳转链接都是新创建了一个 webview 来显示,所以返回就是 ws.close(),但是我希望用 a 标签直接跳转,所以改为 history.back() 来返回。

不过,如果你想跳转到其他人的网站的话,就需要创建一个 webview 来显示,以规避一些可能的影响。 在html中通过如下方式进行调用:

<span id="https://store.steampowered.com/" onclick="clicked(this.id, '更多游戏')"><button>更多游戏</button></span>
复制代码

其中,id 就是你要跳转的网址,clicked 的第二个参数是标题。如果你不想要生成标题栏,可以把代码中含有 ws.titleNView 的语句都删掉。

最后,将这个代码文件嵌入到每个文档中即可。

剩下的就是配置一下 mnifest.json,然后使用云打包就会在 unpackage/release/apk 下生成应用的安装包了。相关的配置比较简单,可以看一下配置指南。

总结

本篇文章介绍了如何使用HBuilderX快速将H5网页转为简单的安卓应用的流程。因为需求不高,所以配置起来倒也没那么麻烦。

最后,如果本篇文章对您有所帮助,希望您可以 点赞、收藏、评论,感谢支持 ✧(≖ ◡ ≖✿

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改