進入與退出應用

天笑發表於2017-02-14

進入應用後,框架會自動設定一些全域性變數,如g_args, g_data等。

問:如何在H5應用中獲取URL引數?

全域性變數g_args儲存了H5應用的URL引數。 例如URL為http://myserver/myproject/index.html?orderId=10&dscr=上門洗車,則該物件有以下值:

g_args.orderId=10; // 注意:如果引數是個數值,則自動轉為數值型別,不再是字串。
g_args.dscr="上門洗車"; // 對字串會自動進行URL解碼。

要刪除一項值,可以用delete g_args.orderId.

問:全域性資料存放到哪裡有規範嗎?

全域性資料建議都放在變數g_data中,而不是到處建立全域性變數,這樣檢視這個變數就可以瞭解H5應用狀態。 框架也會設定一些全域性資料進去(例如userInfo儲存登入後的返回資料等)。另外,如果是邏輯頁之間傳遞資訊,不要用全域性變數,應使用邏輯頁介面,後面章節將介紹。

對於全域性配置資訊,一般統一存到名為g_cfg的全域性變數中。

檢視H5應用JS檔案index.js,有它們的宣告,比如:

    var g_data = {
        userInfo : null, // {id, name, uname=phone}
    };

    var g_cfg = {
        WAIT: 3000, // 3s
    };

入口頁

[任務]

在位址列直接輸入http://server/app/#hello,會發現它會跳轉到首頁,我們希望可直接進入前面我們製作的hello頁面。

開啟示例H5應用客戶端index.html對應的邏輯檔案即index.js,會發現一開始有如下設定:

$.extend(MUI.options, {
    appName: "user",
    homePage: "#home",
    pageFolder: "page",
});

MUI.validateEntry([
    "#home",
    "#me",
    "#order"
]);

第一句是設定一些框架的選項MUI.options,注意框架提供的功能多以MUI開頭。 這裡設定了H5應用內部名稱為"uesr"(表示客戶端,以後若有員工端等應用可區分開),首頁名稱是"#home",邏輯頁目錄為"page",也即首頁實際檔案為"page/home.html".

第二句用MUI.validateEntry指定允許的入口邏輯頁,如果不是從這些邏輯頁進入應用,則自動跳轉到首頁。 如果註釋掉這句,則是允許從任意邏輯頁進入應用。

要想直接輸入URL就能進入hello頁,只要將它暴露成入口頁即可,把它加到入口頁列表中來:

MUI.validateEntry([
    "#home",
    "#me",
    "#order",
    "#hello"
]);

注意我們現在製作的是H5應用,不是單純用於靜態展示的網頁,很多狀態資訊(比如已登入的資訊)儲存在全域性變數之中。 如果允許任意邏輯頁進入應用,很可能因狀態錯誤而顯示出錯。 每個入口頁都是個對外的介面,可通過URL直接訪問,如無必要,儘量不要開放。

相關文章