如何三分钟将网站转换为 APP? by 草梅友仁 前言 现在用前端技术来写一个 app 实在是太方便了,尤其是有像 HBuilder(现已更名为 HBuilderX,功能一样)能将原生 H5 打包成原生 APP 的软件,那就更加方便了。
下面我们就来看看,如何在三分钟之内将你的网站转换为 APP。
【本案例以草梅友仁自己的个人网站https://www.caomeiyouren.cn/ 为例】
0.首先 首先,你肯定得先做好一个网站,也已经适配好了手机。但毕竟只是一个网站,还要通过手机浏览器来访问,有点不方便,如果能打包成 app 岂不美哉?【如图,已经做好了手机适配】
1.使用 HBuilder 新建移动 App 工程 先用 HBuilder 建一个空的移动 App 工程
2.在 index.html 页面添加如下代码 1 2 3 4 <script type ="text/javascript" > window .location .href = "https://www.caomeiyouren.cn/#/index" ; </script >
3.配置 App 信息
4.发行打包
5.下载 app 到手机试用
效果可以说是非常完美了!
6.优化用户体验 但是这个时候又会遇到新的问题了。
用户一旦按了手机的物理退出键,会触发 app 的默认退出事件,也就是说这个 app 就直接退出了
解决方案如下,在你的网站首页添加这样一段代码。请注意,是你的网站首页!
本段示例仅适用于单页面应用。多页面应用需要每个页面都有这么一段。
同时为了避免在首页还会返回原来页面的 bug,建议通过路由来判断是否为首页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <script > document .addEventListener ('plusready' , function ( ) { var webview = plus.webview .currentWebview (); plus.key .addEventListener ('backbutton' , function ( ) { webview.canBack (function (e ) { if (e.canBack && location.hash !== "#/index" ) { webview.back (); } else { var first = null ; plus.key .addEventListener ('backbutton' , function ( ) { if (!first) { first = new Date ().getTime (); plus.nativeUI .toast ('再按一次退出应用' ); setTimeout (function ( ) { first = null ; }, 1000 ); } else { if (new Date ().getTime () - first < 1500 ) { plus.runtime .quit (); } } }, false ); } }) }); }); </script >
本文作者:草梅友仁 本文地址: https://blog.cmyr.ltd/archives/a7652497.html 版权声明:本文采用 CC BY-NC-SA 4.0 协议 进行分发,转载请注明出处!