變臉式應用 / 製作原生APP(二)

殼版本管理

請牢牢記住,由於原生殼與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代碼。

發佈了65 篇原創文章 · 獲贊 16 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章