WeX5 開發(fā)首頁

從賬目列表頁中打開記一筆頁是一種頁面跳轉(zhuǎn)方式，再介紹一種方式，用來打開賬目分類設(shè)置頁。這種方式就是使用WeX5提供的Shell。Shell可以在任何時(shí)候打開任意一個(gè)W文件，實(shí)現(xiàn)頁面跳轉(zhuǎn)；Shell可以給App增加左（右）邊欄；Shell可以響應(yīng)安卓手機(jī)的物理返回鍵，實(shí)現(xiàn)按兩次返回鍵退出App的能力。使用Shell需要增加一個(gè)W文件，進(jìn)行Shell的實(shí)例化。

1. 新建首頁index.w

在新建W向?qū)е羞x擇模板“移動(dòng)→標(biāo)準(zhǔn)→首頁”，“文件名”輸入index，在“首頁生成選項(xiàng)”中選擇“生成左側(cè)邊欄”，不選擇“左側(cè)邊欄為獨(dú)立頁”，不選擇“同時(shí)生成主頁”，建出index.w文件。

在使用首頁向?qū)Ыǔ龅捻撁嫖募?，用wing組件實(shí)現(xiàn)App的左（右）邊欄；用多內(nèi)容頁組件contents實(shí)現(xiàn)Shell的頁面跳轉(zhuǎn)。在同時(shí)建出的頁面代碼文件index.js中首先引用Shell JS類，再在Model的構(gòu)造方法中，新建Shell實(shí)例。應(yīng)用首頁構(gòu)成，如圖1-34。

圖1-34  記賬本首頁構(gòu)成

3. 在左邊欄中增加菜單

在wing組件的left部分放按鈕組件，形成左邊欄中的菜單，通過按鈕組件的單擊事件調(diào)用Shell的showPage方法打開指定的W文件。界面設(shè)計(jì)如圖1-35

圖1-35  記賬本首頁設(shè)計(jì)界面

表1-14列出了展現(xiàn)組件屬性的設(shè)置方法。

表1-14  首頁展現(xiàn)組件屬性說明

Index.js完整代碼如下

define(function(require) {

       var$ = require("jquery");

       varjustep = require("$UI/system/lib/justep");

       varShellImpl = require('$UI/system/lib/portal/shellImpl');

       varModel = function() {

              this.callParent();

              this.shellImpl = newShellImpl(this, {

                     contentsXid :"pages",

                     wingXid : "wing",

                     pageMappings : {

                            "main" : {

                                   url :require.toUrl('./list.w')

                            }

                     }

              });

       };

       Model.prototype.modelLoad = function(event) {

              justep.Shell.showPage("main");

       };

       Model.prototype.classSettingBtnClick = function(event){

              justep.Shell.showPage(require.toUrl("./classSetting.w"));

       };

       returnModel;

});