如何让一个Web App实现一个全屏的应用

96 阅读2分钟

在我们的Ubuntu SDK中,它提供了一个"Web App"的模版,它很方便地让我们把一个Web-based网页转换成一个Ubuntu的应用.大家可以参考我的文章"如何使用在线Webapp生成器生成安装包"来创建Web App.在今天的文章中,我们来介绍如实现一个全屏的Web App.

\

下面我们以百度地图为例.当我们利用我们的Ubuntu SDK创建一个应用时:

baidumap.desktop

[Desktop Entry]
Name=百度地图
Comment=webapp for baidumap
Type=Application
Icon=baidumap.png
Exec=webapp-container --enable-back-forward --store-session-cookies --webappUrlPatterns=https?://map.baidu.com/* http://map.baidu.com %u
Terminal=false
X-Ubuntu-Touch=true


细心的开发者可以看到在上面的"--enable-back-forward"选项.它让我们的Web App在最上面有一个title/header的地方,就像下面的图展示的那样:

\

\

\

在上面的图中,我们可以看到有一个"百度地图"的标题栏.它可以让我们返回以前的页面.

\

如果我们把上面的"--enable-back-forward"选项去掉,也就是:

\

Exec=webapp-container --store-session-cookies --webappUrlPatterns=https?://map.baidu.com/* http://map.baidu.com %u

\

那么我们的运行结果将是:

\

\

\

我们可以看出来,我们的header/title区域不见了.这样的好处是我们可以得到更多的显示区域.当然我们还是可以看到我们的indicator区域.

\

对于一些游戏的页面来说,能有一个全屏的用户界面是一个至高无上的需求,那么,我们可以更进一步来做如下的修改.我们添加一个"--fullscreen"的选项.

\

[Desktop Entry]
Name=百度地图
Comment=webapp for baidumap
Type=Application
Icon=baidumap.png
Exec=webapp-container --fullscreen -cookies --webappUrlPatterns=https?://map.baidu.com/* http://map.baidu.com %u
Terminal=false
X-Ubuntu-Touch=true


重新运行我们的项目:

\

\

\

我们可以看到一个全屏的应用,甚至连indicator的影子都没有.

\

更多关于Web App开发的信息可以在 网站找到.

\

整个项目的源码在: github.com/liu-xiao-gu…

\

\