在今天的文章中，我们将介绍如何把一个HTML5的应用打包为一个snap应用。我们知道有很多的HTML5应用，但是我们如何才能把它们打包为我们的snap应用呢？特别是在Ubuntu手机手机开发的时候，有很多的已经开发好的HTML5游戏。我们可以通过我们今天讲的方法来把先前的click HTML5应用直接打包为snap应用，并可以在我们的Ubuntu桌面电脑上进行运行。当然，今天介绍的方法并不仅限于Ubuntu手机开发的HTML应用。这里的方法也适用于其它的HTML5应用。
1）HTML5应用
首先，我们看一下我之前做过的一个为Ubuntu手机而设计的一个HTML5应用。它的地址为：
https://code.launchpad.net/~liu-xiao-guo/debiantrial/wuziqi
你可以通过如下的方式得到这个代码：
bzr branch lp:~liu-xiao-guo/debiantrial/wuziqi
在这个应用中，我们只关心的是在它www目录里面的内容。这个项目的所有文件如下：
$ tree
.
├── manifest.json
├── wuziqi.apparmor
├── wuziqi.desktop
├── wuziqi.png
├── wuziqi.ubuntuhtmlproject
└── www
├── css
│ └── app.css
├── images
│ ├── b.png
│ └── w.png
├── index.html
└── js
└── app.js
我们希望把在www里面的内容能够最终打包到我们的snap应用中去。
2）打包HTML5应用为snap
为了能够把我们的HTML5应用打包为一个snap应用，我们可以在项目的根目录下打入如下的命令：
$ snapcraft init
上面的命令将在我们的当前的目录下生产一个新的snap目录，并在里面生一个叫做snapcraft.yaml的文件。这实际上是一个模版。我们可以通过修改这个snapcraft.yaml文件来把我们的应用进行打包。运行完上面的命令后，文件架构如下：
$ tree
.
├── manifest.json
├── snap
│ └── snapcraft.yaml
├── wuziqi.apparmor
├── wuziqi.desktop
├── wuziqi.png
├── wuziqi.ubuntuhtmlproject
└── www
├── css
│ └── app.css
├── images
│ ├── b.png
│ └── w.png
├── index.html
└── js
└── app.js
我们通过修改snapcraft.yaml文件，并最终把它变为：
snapcraft.yaml
name: wuziqi
version: '0.1'
summary: Wuziqi Game. It shows how to snap a html5 app into a snap
description: |
This is a Wuziqi Game. There are two kind of chesses: white and black. Two players
play it in turn. The first who puts the same color chesses into a line is the winner.
grade: stable
confinement: strict
apps:
wuziqi:
command: webapp-launcher www/index.html
plugs:
- browser-sandbox
- camera
- mir
- network
- network-bind
- opengl
- pulseaudio
- screen-inhibit-control
- unity7
plugs:
browser-sandbox:
interface: browser-support
allow-sandbox: false
platform:
interface: content
content: ubuntu-app-platform1
target: ubuntu-app-platform
default-provider: ubuntu-app-platform
parts:
webapp:
after: [ webapp-helper, desktop-ubuntu-app-platform ]
plugin: dump
source: .
stage-packages:
- ubuntu-html5-ui-toolkit
organize:
'usr/share/ubuntu-html5-ui-toolkit/': www/ubuntu-html5-ui-toolkit
prime:
- usr/*
- www/*
这里的解释如下：
- 由于这是一个HTML5的应用，我们可以通过webapp-helper来启动我们的应用。在我们的应用中我们使用被叫做webapp-helper的remote part
- 由于在Ubuntu的手机中，web的底层部分是由Qt进行完成的，所以我们必须要把Qt也打包到我们的应用中。但是由于Qt库是比较大的，我们可以通过ubuntu-app-platform snap应用通过它提供的platform接口来得到这些Qt库。开发者可以参阅我们的文章https://developer.ubuntu.com/en/blog/2016/11/16/snapping-qt-apps/
- 在我们的index.html文件中，有很多的诸如。这显然和ubuntu-html5-ui-toolkit有关，所以，我们必须把ubuntu-html5-ui-toolkit这个包也打入到我们的应用中。这个我们通过stage-packages来安装ubuntu-html5-ui-toolkit包来实现
- 我们通过organize把从ubuntu-html5-ui-toolkit中安装的目录ubuntu-html5-ui-toolkit重组到我们项目下的www目录中以便index.html文件引用
我们再来看看我们的原始的index.html文件：
index.html
从上面的代码中，在index.hml文件中它引用的文件是从/usr/share这里开始的。在一个confined的snap应用中，这个路径是不可以被访问的（因为一个应用只能访问自己安装在自己项目根目录下的文件）。为此，我们必须修改这个路径。我们必须把上面的/usr/share/的访问路径改变为相对于本项目中的www目录的访问路径：
这就是为什么我们在之前的snapcraft.yaml中看到的：
parts:
webapp:
after: [ webapp-helper, desktop-ubuntu-app-platform ]
plugin: dump
source: .
stage-packages:
- ubuntu-html5-ui-toolkit
organize:
'usr/share/ubuntu-html5-ui-toolkit/': www/ubuntu-html5-ui-toolkit
prime:
- usr/*
- www/*
在上面，我们通过organize把ubuntu-html5-ui-toolkit安装后的目录重新组织并移到我的项目的www目录中，从而使得这里的文件可以直接被我们的项目所使用。我们经过打包后的文件架构显示如下：
$ tree -L 3
.
├── bin
│ ├── desktop-launch
│ └── webapp-launcher
├── command-wuziqi.wrapper
├── etc
│ └── xdg
│ └── qtchooser
├── flavor-select
├── meta
│ ├── gui
│ │ ├── wuziqi.desktop
│ │ └── wuziqi.png
│ └── snap.yaml
├── snap
├── ubuntu-app-platform
├── usr
│ ├── bin
│ │ └── webapp-container
│ └── share
│ ├── doc
│ ├── ubuntu-html5-theme -> ubuntu-html5-ui-toolkit
│ └── webbrowser-app
└── www
├── css
│ └── app.css
├── images
│ ├── b.png
│ └── w.png
├── index.html
├── js
│ ├── app.js
│ └── jquery.min.js
└── ubuntu-html5-ui-toolkit
└── 0.1
在上面，我们可以看出来ubuntu-html5-ui-toolkit现在处于在www文件目录下，可以直接被我们的项目所使用。
我们在项目的根目录下打入如下的命令：
$ snapcraft
如果一切顺利的话，我们可以得到一个.snap文件。我们可以通过如下的命令来进行安装：
$ sudo snap install wuziqi_0.1_amd64.snap --dangerous
安装完后，由于我们使用了content sharing的方法来访问Qt库，所以，我们必须安装如下的snap：
$ snap install ubuntu-app-platform
$ snap connect wuziqi:platform ubuntu-app-platform:platform
执行上面的命令后，我们可以看到：
$ snap interfaces
Slot Plug
:account-control -
:alsa -
:avahi-observe -
:bluetooth-control -
:browser-support wuziqi:browser-sandbox
:camera -
:core-support -
:cups-control -
:dcdbas-control -
:docker-support -
:firewall-control -
:fuse-support -
:gsettings -
:hardware-observe -
:home -
:io-ports-control -
:kernel-module-control -
:libvirt -
:locale-control -
:log-observe snappy-debug
:lxd-support -
:modem-manager -
:mount-observe -
:network downloader,wuziqi
:network-bind socketio,wuziqi
:network-control -
:network-manager -
:network-observe -
:network-setup-observe -
:ofono -
:opengl wuziqi
:openvswitch -
:openvswitch-support -
:optical-drive -
:physical-memory-control -
:physical-memory-observe -
:ppp -
:process-control -
:pulseaudio wuziqi
:raw-usb -
:removable-media -
:screen-inhibit-control wuziqi
:shutdown -
:snapd-control -
:system-observe -
:system-trace -
:time-control -
:timeserver-control -
:timezone-control -
:tpm -
:uhid -
:unity7 wuziqi
:upower-observe -
:x11 -
ubuntu-app-platform:platform wuziqi
- wuziqi:camera
- wuziqi:mir
当然在我们的应用中，我们也使用了冗余的plug，比如上面的camera及mir等。我们可以看到wuziqi应用和其它Core及ubuntu-app-platform snap的连接情况。在确保它们都连接好之后，我们可以在命令行中打入如下的命令：
$ wuziqi
它将启动我们的应用。当然，我们也可以从我们的Desktop的dash中启动我们的应用:
![[大整数乘法] java代码实现](https://img1.php1.cn/3cd4a/24c6f/9f3/0133bb25da242824.jpeg)
京公网安备 11010802041100号