製作原生APP(二)

天笑發表於2017-02-23

殼版本管理

請牢牢記住,由於原生殼與H5應用的分離,使用者安裝的使用者殼可能是舊版本的,而線上的H5應用永遠是最新版本。

假如在原生殼中新增加了外掛,應增加殼版本號。 操作上也可將殼版本等同於原生應用的版本程式碼(安卓叫App Version Code,蘋果叫CF Bundle Version),那麼要注意外掛變動時,一定也要變動原生應用版本。

需求:新版本殼中增加了某外掛,希望安裝舊版本殼的使用者在用到此外掛時,提示更新APP。

假定當前殼版本為1,注意在配置檔案intelxdk.config.additions.xml中修改殼版本,假如為2:

<content src="http://myserver/myproject/index.html?cordova=2" />

然後編譯好新版本安裝包。 由於外掛變化了,仍然需要更新原生外掛介面到H5應用,將新的外掛合併到H5應用的cordova或cordova-ios目錄中。

注意cordova_plugins.js檔案定義H5應用可用哪些外掛,需要手工合併和設定版本。

假設我們在使用者端上新增加了一個微信分享外掛,cordova_plugins.js檔案如下:

module.exports = [
    ...,
    // 以下為新增部分:
    {
        "file": "plugins/com.xxx.weixin/www/weixin.js",
        "id": "com.xxx.weixin",
        "clobbers": [
            "navigator.weixin"
        ]
    }
]

前面提到過,每個筋斗雲H5應用都有一個惟一的應用名(MUI.options.appName),例如使用者端設定應用名為"user"。 我們為新的外掛加上filter屬性:

module.exports = [
    ...,
    // 以下為新增部分:
    {
        "file": "plugins/com.xxx.weixin/www/weixin.js",
        "id": "com.xxx.weixin",
        "clobbers": [
            "navigator.weixin"
        ]
        // 指定客戶端應用(名為user)從殼版本2開始支援該外掛
        "filter": [ ["user", 2] ]
    },
]
// 新加上這一句處理版本
filterCordovaModule(module);

filter屬性的格式為[ [app1, minVer?=1, maxVer?=9999], ...], 僅當應用名匹配且版本在minVer/maxVer之間才使用。 如果未指定filter,則表示載入該外掛。 假定還有個員工端應用名為emp,在殼版本300時增加了該外掛,則可以設定:

"filter": [ ["user", 2], ["emp", 300] ]

這樣,不同的H5應用版本載入的外掛是不一樣的,要在瀏覽器中測試檢視每個殼版本分別載入了哪些外掛,可以直接訪問帶cordova引數的H5應用地址如:

http://myserver/myproject/index.html?cordova=1

然後在Web控制檯中執行:

cordova.require('cordova/plugin_list')

最後,我們在H5應用中檢查外掛是否可用,以及提示使用者升級:

if (navigator.weixin == null) {
    app_alert("您的APP版本太舊,請升級後使用本功能。");
    return;
}
// 呼叫新外掛的功能。

除錯原生應用

由於原生應用除錯複雜,只要不是原生外掛本身的問題,儘量先在電腦瀏覽器上除錯。

對於只能在手機上執行的功能,注意加些除錯程式碼,讓它也在網頁中也能模擬執行。 比如微信分享後可以領取紅包,為了在普通瀏覽器中可除錯,可以這樣做:

if (! g_cordova) {
    // 模擬程式碼
    if (g_args.mock) {
        if (confirm("模擬分享?"))
            onShareOk();
    }
    app_alert("必須在App中執行");
    return;
}
微信分享(成功後回撥 onShareOk);

function onShareOk()
{
    // 領取紅包
}

g_args.mock表示在URL引數中有"?mock=1"時走模擬分支。這樣絕大多數問題都不用在手機上除錯。

如果在電腦瀏覽器上執行正常,但在手機應用中執行出錯,需要嘗試在裝置上除錯H5應用。 對於安卓應用,可在Chrome中除錯手機應用。注意在編譯殼的選項中,我們曾設定過:

<preference name="debuggable" value="true" />

在安卓手機上,開啟USB除錯選項(請自行搜尋如果進入開發者模式及開啟USB除錯),連上電腦, 然後在Chrome位址列中輸入chrome://inspect即可進入裝置除錯。

注意:由於google的站點國內很難訪問,如果除錯頁面打不開,須通過代理訪問。

除錯蘋果應用,得用蘋果電腦上的Safari瀏覽器。 由於蘋果要求只有使用開發證照的App才能除錯,所以要麼用開發證照重新編譯個用於除錯的App殼,要麼更簡單地直接在Safari瀏覽器中除錯。 先開啟iPhone/iPad上的Safari的遠端除錯功能:“設定 > Safari > 高階” > Web檢查器選中。 將iphone插入電腦,彈出是否允許除錯,選擇“是”。 開啟Safari,在“開發”選單下可見有一行是 該手機的名字,裡面顯示有可除錯的頁面。

如果是首次在mac上使用safari時,應先啟用“開發工具”選單項: (menu)preference(偏好設定)->高階->在選單欄中顯示“開發”選單。

如果以上除錯環境很難配置成功,那麼只能通過在程式碼中加alert來一點點逼近問題。

如果確定問題出在原生外掛上,或者需要修改原生外掛,那麼只有搭建cordova工程,除錯原生java或object-c程式碼。

相關文章