製作原生APP（二）

天笑發表於2017-02-23
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程式碼。

相關文章