H5遊戲可以透過快應用的web元件快速打包成快遊戲，打包上架後的快遊戲，只要原H5遊戲的url不發生變動，快遊戲就不需要做更新，維護工作量小。

使用快應用IDE，打包快遊戲的操作很簡單。

1. 訪問官網安裝開發工具，在PC上安裝快應用IDE。

2. 選單選擇“File > New Project > New QuickApp Project”，建立專案，模板選擇“HTML5 Game”。

- App Name：應用的名稱，對應manifest.json檔案中的name欄位。

- Package Name：應用的包名，對應manifest.json檔案中的package欄位。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200930110552716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

3. 點選“OK”，建立快遊戲專案。

4. 配置manifest.json檔案。

- package：快遊戲的包名，一旦上架，此包名不能再修改，否則將無法升級版本。

- name：快遊戲的名稱。

- versionName：快遊戲版本名稱，升級時需要+1，比如2.0.0。

- versionCode：快遊戲版本號，升級時需要+1，比如2。

- icon：快遊戲的logo圖示，建立桌面圖示時使用，logo.png需要替換為H5遊戲的圖示。

- minPlatformVersion：支援的最小平臺版本號，原理同Android API Level，為避免上線後低版本導致不相容，建議設定為最高版本，例如1070。

```java
{
"package": "com.huawei.quickgamedemo",
    "name": "QuickGameDemo",
    "versionName": "1.0.0",
    "versionCode": 1,
    "icon": "/Common/logo.png",
    "minPlatformVersion": 1070,
    "features": [
        {
            "name": "system.prompt"
        },
        {
            "name": "service.pay"
        },
        {
            "name": "service.account"
        }
    ],
    "permissions": [
        {
            "origin": "*"
        }
    ],
    "config": {},
    "router": {
        "entry": "Hello",
        "pages": {
            "Hello": {
                "component": "hello"
            }
        }
    },
    "display": {
        "titleBar": false,
        "fullScreen": true
    }
}
```
5. 編輯載入H5遊戲的.ux檔案，專案工程以hello.ux檔案為例。

- src：配置H5遊戲的url。

- fullscreendirection：設定遊戲的方向。landscape：橫屏，portrait：豎屏。

- jumppolicy：遊戲內連結跳轉的策略。如果遊戲內有廣告，建議設定為browser，並且將multiwindow設定為true。

- allowthirdpartycookies：標識是否支援跨域cookies傳遞，預設為false。如果網頁需要跨域訪問cookie，比如使用第三方帳號登入，則必須設定該欄位為true。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200930110609185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200930110615655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

- trustedurl：如果遊戲登入成功載入頁面和遊戲開啟頁面不同，請進行設定。

6. 選單選擇“Tools >Certificate”，檢查是否已經生成正式證照。如果沒有生成，則點選“Create”生成證照，證照儲存在sign > release目錄下。務必保管好證照，一旦丟失將無法找回。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200930110623503.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

7. 選單選擇“Build> Run Release”，打包正式的快遊戲rpk包，生成的rpk包存放在專案工程的dist目錄下。
注意：提交上架應用市場的快遊戲必須是透過此方式打包的正式包。

最後整個快遊戲工程的目錄結構如下：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200930110632956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

至此，您已經成功將H5快遊戲打包成快遊戲，如果您還想在快遊戲中整合更多功能，並測試執行您的快遊戲，請參考開發快遊戲（H5版本）官方文件。

---
原文連結：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203363609009640070&fid=18
作者：鼓樓趙又廷

手把手教你將H5遊戲打包成快遊戲

相關文章