WeX5學習筆記

目錄

WeX5學習筆記... 1

1.輕鬆看透WeX5產品能力和技術... 1

2.WeX5能夠怎麼玩？... 3

1、純本地App. 3

2、關聯一個網站，但願默認就打開某頁... 4

3、UI設計器... 4

4、打包神器... 4

5、標準玩法... 4

3.WeX5 App與服務端交互原理... 4

4.Account示例程序... 5

5.Takeout示例程序... 7

5.1Index.w.. 7

5.2mapActivity.w.. 13

問題... 13

6.頁面間交互視頻... 15

6.1 頁面打開和傳參概述... 15

6.2 Shell打開頁面... 18

6.3 對話框與數據傳遞... 19

6.4 內嵌頁面與參數傳遞... 21

7.頁面結構及生命週期視頻... 23

課程記錄... 24

1.最簡單的應用... 24

2.firstSPA.. 24

3.todoMVC.. 24

4.經過list顯示服務端json文件中的數據... 24

表單與data組件的綁定... 25

5.實現單表的CRUD.. 25

6.本身框架實現後臺服務... 25

7. 本身框架集成BaaS代碼... 26

8. WebSocket通訊應用... 26

9.播放音頻視頻... 26

10.調試... 26

 

 

WeX5學習筆記

1.輕鬆看透WeX5產品能力和技術

首先，必須理解一件事：移動和雲時代的企業應用技術，說白了，也就三塊：前端UI、後端服務、前端設備api。這後面，是一個事實和趨勢：就是先後端已經分化，並各自獨立發展：

1．前端UI

互聯網和瀏覽器已經普及和紮根，企業應用的前端UI和樣式組件，都會沿着w3c的html+css+js路線發展，資源也愈來愈多，好比bootstrap等。已經沒有任何企業，能離開w3c的html+css+js標準，另起爐竈搞本身的了。微軟試了不行，adobe試了不行，沒人能行。

2 後服務端

後端和前端正好相反，技術正走向多元化。node，Python，java並存，以及PAAS、BAAS(後端即服務:Backendas a Service 公司爲移動應用開發者提供整合雲後端的邊界服務)雲服務的成熟，數據綁定也要支持多種技術和方向。

3 前端設備api

移動和設備在急劇發展，各類硬件能力會更多的加入，想一想可穿戴設備吧，想一想智能客廳吧，想一想將來的手機吧。。。

總結起來，就是一條原則：「讓UI界面歸UI界面，讓設備api歸設備api，讓後端服務歸後端服務」。僅此而已！

這個原則，正是WeX5技術設計堅決遵循的原則。正是對這一原則的堅定遵循，才使得WeX5的技術如此開放強大。

而WeX5另外一個強大的緣由，是源於開源的力量。免費誠難得，自由價更高。開源給你的，就是自由。開源是王道啊。

下面逐條說說WeX5強大之處，以及緣由：

1．開源模式

WeX5採用的是Apache許可證開源模式，商業友好，徹底免費。開發出來的應用，每一行代碼都在你手裏，發佈部署無任何限制，自由，免費。

2．跨平臺多前端應用開發，支持app、web和微信應用快速開發

WeX5對跨平臺多前端應用開發的支持極好，一次開發，多平臺運行。

目前，WeX5能開發的跨平臺多前端應用有：

移動app（蘋果ios app、安卓Androidapp）

微信應用（包括公衆號、服務號和企業號應用）

企業web app（PC、平板和手機）

其餘輕應用（百度直達號等）

（在企業應用市場，多平臺、跨前端已成必須，而非可選！微信應用，已經勢不可擋，必將顛覆移動應用的版圖。在微信應用和百度直達號等輕應用的推進下，在企業移動應用領域，hybrid app也將固化其主流地位，毫無懸念）

3．高效精緻的UI組件體系，徹底基於主流標準和技術

 WeX5的UI組件體系是徹底基於html5+css3+js，很是乾淨標準。

 WeX5的UI組件技術徹底是開放主流，基於jquery和bootstrap（Bootstrap是Twitter推出的一個用於前端開發的開源工具包）技術，經WeX5高度優化，在移動上的表現很好，接近原生，真的很贊。

WeX5 的UI基於模塊化開發，採用加強的RequireJS模塊化技術

可視化拖拽設計的組件技術，WeX5已經提供了大量豐富的UI組件，而且支持引入和擴展第三方組件，大大提高了界面開發的效率和下降了難度

風格樣式庫基於bootstrap技術，在bootstrap基礎上大大加強了適合移動的樣式和組件，可輕鬆引入bootstrap大量豐富的樣式資源並隨意換膚

高效靈活的雙向數據綁定技術和數據組件，使用簡單能力強大

高度優化，性能接近原生。操做爽滑，拖拽、轉場及動畫效果很好

（我我的很認同WeX5的作法，第一，凡是業界主流的好輪子，好比jquery和bootstrap，就應該直接用，並且，WeX5作了深度優化，使app運行效果媲美原生。第二，我有技術潔癖，UI組件庫，必須基於html5+css3+js這樣的標準，這也是w3c統治互聯網的三大基石，沒的其它選擇啊）

4．  本機API框架（Native APIFramework）

WeX5採用混合應用（hybrid app）開發模式。能輕鬆調用手機設備的系統和硬件能力，如相機、地圖、LBS定位、指南針、通信錄、文件、語音、電池。。。等。

這方面，phonegap/cordova幾乎是事實的標準了，不少大公司都採用。在本機框架上，WeX5有：

基於phonegap(cordova)框架

默認內嵌高性能瀏覽器，大大提高性能，特別是android低端機

提供微信等輕應用框架

提供了豐富的原生插件

支持引入和擴展第三方插件，任何原生app能實現的能力均可經過擴展插件實現

5．  可視化拖拽式集成開發環境IDE

WeX5的IDE基於eclipse，WeX5的主要工做是強化了可視化快速開發。提供了一個徹底可視化、組件化、拖拽式開發環境。

基於eclipse開源IDE

可視化、組件化拖拽設計，徹底所見即所得

嚮導化、模版化等工具，快速生成常見應用場景界面

全方位代碼智能提示，這方面WeX5作了不少功夫，WeX5全部的UI組件，乃至手機本機插件API，在WeX5的IDE裏，都能實現代碼智能提示，給開發者提供極大方便

6．  全能力的調試支持和智能代碼提示

開發手機app，模擬調試是關鍵能力，對開發者極端重要，而這也是業界現有hybrid app開發工具的軟肋。WeX5對hybrid app開發提供了業界最強大的調試支持，表現真正完美。

提供全能力、一站集成的模擬調試支持。開發手機app，平常的調試幾乎都是模擬調試，使用頻繁度遠超真機調試，WeX5提供全面、完備的模擬調試支持，表現真正完美

WeX5的模擬調試效果和真機運行效果幾乎徹底相同。因爲WeX5的UI組件體系完全基於html+css+js，並採用高仿真本機設備app模擬，模擬調試運行效果和真機運行效果幾乎徹底相同，杜絕模擬運行和真機運行不一致的問題

WeX5開放了全部的UI框架和組件源碼，使得開發者能在瀏覽器裏跟蹤進入每個組件的每一行代碼，找到和排查到真正的底層緣由，系統調試完全透明，無黑盒，無死角！

支持真機調試，提供全真機和快捷真機調試模式，爲開發者提供最大方便。

WeX5開放了所有原生app框架源碼和本機api插件源碼，開發者能夠在原生開發環境(Android ADT和XCode)內，跟蹤調試進入app的每一行代碼裏

7．  無限制、多方式、可加密的App應用打包發佈

WeX5採用Apache 許可證開源協議，商業友好。並且，在開放性上，也走的極端完全，這一點在app應用打包上獲得充分體現：

打包發佈無任何限制，無需任何費用。WeX5完全開源，應用的每一行代碼都在你手裏，自由打包，無拘無束！

輕鬆打包發佈成高性能的原生app，包括安卓Android的apk，蘋果ios的ipa

一鍵發佈微信應用（微信公衆號、服務號、企業號都可）

一鍵發佈成百度輕應用、web應用等

WeX5打包發佈的app和應用，支持所有web資源（html+css+js）的加密，WeX5採用高強度動態密鑰，每一個app每次編譯都會採用不一樣的動態密鑰，真正作到一包一祕！

支持本地快捷打包、遠程服務打包、原生環境編譯打包等模式，給你全部想要的打包方式和方便性

完全開源，支持原生代碼調整、插件自定義和插件選擇打包，真正自由

8．完全開放的App應用後端技術和部署方式

WeX5堅定走開源、開放的道路，WeX5在支持後端技術、後端部署上，體現出極端完全的開放性。

開放的後端技術支持，WeX5的後端徹底開放，可經過http、Websocket等協議鏈接各類後端中間件或雲服務（java、node、php、.net等）

無限制的後端部署，能夠部署在任何本身選擇的公有云、私有云服務器上，WeX5的部署徹底開放自由，無任何限制

總而言之，WeX5是多平臺、跨前端應用開發的優秀工具，業界收費的同類工具，和WeX5相比，技術要落後和老化很多。最可貴的是：WeX5採用商業友好的Apache許可證開源模式，用的放心啊。

企業移動應用大潮滾滾，微信應用撲面而來，祝各位朋友用好開源的WeX5，多多發財！

2.WeX5能夠怎麼玩？

1、純本地App

沒任何服務請求，已經有開發好的一堆html+js，但願本地App中能夠方便的使用，那能夠參考默認的Native/X5工程，把本身開發好的資源放到www目錄下就能夠，注意工程的幾個重要選項：

服務地址：http://localhost

首頁: 假設你www中有一個入口的index.html，那寫 /index.html

生成App包的嚮導中，「從新編譯使用到的UI資源」必定不要選

2、關聯一個網站，但願默認就打開某頁

例如想把本論壇作成一個app，那能夠新建一個本地App，把

服務地址：http://bbs.justep.com

首頁: /forum.php

 這樣生成的app，一啓動就打開論壇的首頁

3、UI設計器

UI2下建本身應用（例如demo），造成本身的一組頁面，而後Native新建一個本地App，選擇新建的資源demo，點右鍵「編譯使用到的UI資源」，則在ww下生成標準的html+js，該資源能夠放到標準 web 服務器（apache, iis, tomcat等）直接進行網絡訪問

4、打包神器

什麼UI2，什麼X5不要，我就只要一個能夠生成App的環境，點這裏下載

xcode，adt, 哈哈，都有

5、標準玩法

外賣爲例，「WeX5 App與服務端交互原理」 有交互原理介紹。

資源打進app，bass 部署到tomcat上做爲服務， 這個是推薦用法。

什麼，資源咋升級？沒問題，按「App資源和版本更新」將最新的資源按更新到服務器便可。

剛下載的一個WeX5，解壓後運行目錄的「啓動WeX5開發工具.bat」和「啓動WeX5運行平臺.bat」，這樣就能夠用瀏覽器鏈接和訪問，若是App不選擇打包資源，那修改的資源，App 也會自動更新。

3.WeX5 App與服務端交互原理

拿WeX5自帶的外賣來講舉例，它由三部分組成

1. UI2/takeout 這個是頁面，由頁面文件.w和js以及css等構成，js中有$.ajax的請求

2. Native/外賣這個是本地app的工程，用來打包app

3. tomcat的webapps/baas 這個是服務端，提供步驟1中的$.ajax訪問

啓動服務

開發工具Studio中啓動Tomat，這個將啓動兩個服務，一個是tomcat的webapps下的baas服務，另一個是用於解析運行UI2資源的UIServer（在runtime\UIServer）。爲描述方便，這裏假設本機ip地址是192.168.1.1, tomcat的端口是8080

瀏覽器訪問

瀏覽器輸入

1

http://192.168.1.1:8080/x5/UI2/takeout/index.w

這樣就能夠訪問外賣功能，這個在電腦瀏覽器或者手機瀏覽器均可以（電腦推薦使用chrome瀏覽器）。

 解釋一下這個URL：8080後面的x5是UIServer的名字，在tomcat的server.xml中定義，具體請參考tomat的相關說明，表示訪問UIServer，UI2/takeout/index.w 這個會請求到UIServer後，由UIServer作編譯，生成html和js供前端使用。

 本地App

首先要生成App，先看看默認的App定義，在 Native/外賣 上點右鍵選擇「編輯本地App」，嚮導中有三個重要的參數：

1. 服務地址：這裏應該寫 http://192.168.1.1:8080, 由於baas在這個服務上

2. 首頁： 就是默認打開的頁面寫 /x5/UI2/takeout/index.w，這裏 x5那個能夠寫成任意的，和前面介紹的UIServer的那個x5名字沒任何關係

3. 須要打包的資源：默認選擇了takeout，這裏若是選擇了，那UI2/takeout下的資源會被打包到App裏面，也就是說tomat中沒有UISever那個服務運行也是正常的，若是不選擇，則首頁那個就必須寫成/x5/UI2/takeout/index.w，由於默認的UIServer的名字叫x5，App啓動時是經過UIServer來獲取頁面，和瀏覽器訪問徹底相同

 補腦

若是takeout資源打包了，服務地址寫 http://localhost 能否？

還真不行，由於資源中有$.ajax的請求會發到 192.168.1.1:8080/baas 上，若是寫localhost，那頁面打開沒問題，但ajax請求會遇到傳說中的跨域問題，致使失敗，因此這裏服務地址要寫baas服務的地址。換句話說，對於資源打到App的狀況，服務地址更可能是告訴ajax請求當前域是誰，從而避免跨域問題(全部請求都是http://192.168.1.1:8080/xxx，但app內部作了處理，會優先找打入app的資源，沒有找到的資源在去請求服務端，對於app來講，是讀取本地資源仍是服務端請求沒任何區別，從而解決跨域問題)。固然，若是沒有任何ajax請求或者用插件方式發http來訪問，實際上能夠寫 http://localhost。而若是要訪問多個地址，那就只能寫成 http://localhost，在配合http的插件發請求（自帶的plugin.http.request插件），就不能使用jquery的了（其實純html能夠用jsonp方案，不過比較麻煩，具體baidu，推薦插件方案）。

 

4.Account示例程序

UI2/demo/account

記帳本演示程序。

演示了 list 、windowReceiver， windowDialog等的用法。

在主頁面中，windowDialog經過src屬性指定頁面w文件，將窗口指定爲對話框。這樣可打開對話框，並傳遞數據到對話框中。在對話框頁面中，經過windowReceiver接收主頁傳遞的數據、關閉對話框，並傳遞返回數據到主頁。

 

另外，data.save()方法，觸發 data 組件的 onCustomSave 事件，事件處理函數完成具體保存操做。這裏實際上經過事件觸發和處理機制，實現了save保存操做的重寫。容許程序員實現自定義操做。

justep.Shell.showLeft();實現側邊欄切換顯示狀態。

 

Swing組件，實現左右側邊欄。

 

contents組件：在.w文件中使用contents組件能夠實現不一樣頁面的展示，特別是能夠經過手勢滑動來切換頁面。contents組件使用content來展示頁面，contents組件中能夠包括多個content，content能夠動態生成，刪除，加強了頁面顯示的靈活性，contents組件和buttonGroup組件配合使用，使用button組件的target屬性關聯content，能夠實現按鈕和頁面的綁定

 

組件路徑：/UI2/system/components/justep/contents

組件標識：$UI/system/components/justep/contents/contents

 

配合其它組件使用，可實現如下功能：

 

滑動切換頁面

實現圖片輪換效果

模擬門戶打開w頁面

新增空白content，並動態建立組件

contents嵌套contents，分類切換頁面

 

經過ShellImpl的contentsXid屬性指定。 可在多個頁面中實現切換顯示。

 

       this.shellImpl = new ShellImpl(this, {

                     contentsXid : "pages",

                     wingXid : "wing",

                     pageMappings : {

                            "list" : {

                                   url :"$UI/demo/account/list.w"

                            },

                            "detail" :{

                                   url :"$UI/demo/account/detail.w"

                            },

                            "classSetting": {

                                   url :"$UI/demo/account/classSetting.w"

                            }

                     }

              });

 

 

 

 

代碼觸發事件，經過事件傳遞數據，觸發操做：

       Model.prototype.classDataAfterSave =function(event) {

              // 經過Shell發出一個消息，通知其餘頁面分類數據已改變，而且在消息中攜帶了改變後的分類數據

              var classData =this.comp("classData");

              justep.Shell.fireEvent("onClassChanged", {

                     "classData" :classData.toJson()

              });

       };

 

Detail.w對應的腳本detail.js中：

Model.prototype.onClassChanged = function(event) {

       this.comp("classData").clear();

       this.comp("classData").loadData(event.classData, true, null, null, true);

    };

5.Takeout示例程序

5.1Index.w

5.1.1模型

Data和baasData的圖標不一樣，baasData的圖標 ，data的圖標 。

foodData（baasData）

計算規則：

CalcPriceText: js:'¥ ' + val('fPrice') + '元'

calcImageURL: js:$model.transURL('./img/'+val('fImage'))

 

userData（baasData）

過濾條件userFilter：

fID = :user

orderData（baasData）

過濾條件userFilter：

fID = :user

 

cartData（data）

計算規則： calcMoney ---- js:val('fPrice') *val('fCount')

statusData（data）

計算規則：

calcCartSumMoneyText ---- js:'¥ ' +$model.comp('cartData').sum('calcMoney') + '元'

 

calcCartCountText----js:($model.comp('cartData').count()> 0) ? '購物車(' + $model.comp('cartData').count() +')' : '購物車'

 

calcCanSaveOrder ----js:$model.comp('cartData').sum("calcMoney") > 0

 

calcCanClearCart ----js:$model.comp('cartData').count() > 0

 

 

payData（data）

 

 

5.1.2 UI界面

1.對話框

Src: $UI/takeout/mapActivity.w

2.主要內容

四個content顯示食品、購物車、訂單和個人四個頁面。

四個按鈕實現頁面切換：foodBtn、cartBtn、orderBtn、ownBtn

切換實現：按鈕的target屬性設置。

佈局組件contents上可經過右鍵菜單添加多個content：

這樣作估計有一個好處，那就是主要內容都在一個.w文件裏，能夠共用模型的定義。

1）foodContent

使用list組件顯示食品列表foodList，在list模板中使用了 media(bootstrap) 組件。media-left中顯示食品圖片，類型image(html)，經過bind-attr-src 將image組件的src屬性和foodData的列calcImageURL綁定， val('calcImageURL')。

media-body 中顯示 「來一份」按鈕 addCartBtn，三個output輸出食品名稱、描述和計算價格文本。

「來一份」按鈕處理代碼中，下面代碼

       if(cartData.find([ 'fFoodID' ], [ row.val('fID') ]).length === 0) {

       的做用是使同一食品在購物車中不能重複添加，具體份數可在購物車頁面修改。也就是一種食品在購物車中只能做爲一條記錄出現。

       按鈕的span使用bind-text屬性 statusData.ref('calcCartCountText')顯示購物車中的食品數量。

2）cartContent

       兩個panel，一個用於顯示購物車內容；一個用於顯示聯繫人信息。

       顯示購物車內容用list組件；

       顯示聯繫人信息用了form(html)，css類是 form-horizontal。formGroup（bootstrap）

       付款類型用了radioGroup，單選按鈕組。單選按鈕組經過itemset屬性和payData模型數據關聯在一塊兒。

      

       兩個按鈕：清空購物車，調用cartData.clear()方法。

下單

3）orderContent

       List組件顯示訂單內容：

 

4）ownContent

顯示用戶姓名、電話、地址。

保存用戶信息。

經過定位功能獲取用戶位置，做爲地址。

5.2mapActivity.w

經過 iframe 引入map.html

在 map.html 中，經過js調用了百度地圖。

問題

transURL

calcImageURL: js:$model.transURL('./img/'+val('fImage'))中 transURL的用法？

 

       //轉換動態圖片URL

       Model.prototype.transURL= function(url) {

              returnrequire.toUrl(url);

       };

過濾條件 過濾條件userFilter中 fID= :user，:user的用法？

:user用法估計相似於SQL語句中的綁定變量。佔個位置，便於外部傳入數據。

Model.prototype.modelLoad 函數中，直接設置:

       this.comp('userData').filters.setVar("user",this._userID);

       this.comp('orderData').filters.setVar("user",this._userID);

media(bootstrap) 組件

http://www.uedsc.com/bootstrap-media-object.html

Bootstrap 中的多媒體對象（MediaObject）。這些抽象的對象樣式用於建立各類類型的組件（好比：博客評論），咱們能夠在組件中使用圖文混排，圖像能夠左對齊或者右對齊。媒體對象能夠用更少的代碼來實現媒體對象與文字的混排。

媒體對象輕量標記、易於擴展的特性是經過向簡單的標記應用 class 來實現的。你能夠在 HTML 標籤中添加如下兩種形式來設置媒體對象：

.media：該 class 容許將媒體對象裏的多媒體（圖像、視頻、音頻）浮動到內容區塊的左邊或者右邊。

.media-list：若是你須要一個列表，各項內容是無序列表的一部分，可使用該 class。可用於評論列表與文章列表。

formGroup（bootstrap）

課程中提到的form-group樣式和form-control有什麼實質的區別呢？form-group通常用於div,form-control通常用於置於div中的標籤元素。

justep.Util.hint

顯示提示信息框：

justep.Util.hint("請填寫完整的用戶信息", {

                            "type": "danger"

                     });

 

當前日期格式化

justep.Date.toString(new Date(),justep.Date.STANDART_FORMAT)

jQuery的deferred對象

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

開發網站的過程當中，咱們常常遇到某些耗時很長的javascript操做。其中，既有異步的操做（好比ajax讀取服務器數據），也有同步的操做（好比遍歷一個大型數組），它們都不是當即能獲得結果的。

一般的作法是，爲它們指定回調函數（callback）。即事先規定，一旦它們運行結束，應該調用哪些函數。可是，在回調函數方面，jQuery的功能很是弱。爲了改變這一點，jQuery開發團隊就設計了deferred對象。簡單說，deferred對象就是jQuery的回調函數解決方案。在英語中，defer的意思是"延遲"，因此deferred對象的含義就是"延遲"到將來某個點再執行。它解決了如何處理耗時操做的問題，對那些操做提供了更好的控制，以及統一的編程接口。它的主要功能，能夠歸結爲四點。下面咱們經過示例代碼，一步步來學習。

deferred對象有三種執行狀態----未完成，已完成和已失敗。若是執行狀態是"已完成"（resolved）,deferred對象馬上調用done()方法指定的回調函數；若是執行狀態是"已失敗"，調用fail()方法指定的回調函數；若是執行狀態是"未完成"，則繼續等待，或者調用progress()方法指定的回調函數（jQuery1.7版本添加）。前面部分的ajax操做時，deferred對象會根據返回結果，自動改變自身的執行狀態；可是，在wait()函數中，這個執行狀態必須由程序員手動指定。dtd.resolve()的意思是，將dtd對象的執行狀態從"未完成"改成"已完成"，從而觸發done()方法。相似的，還存在一個deferred.reject()方法，做用是將dtd對象的執行狀態從"未完成"改成"已失敗"，從而觸發fail()方法。

jQuery提供了deferred.promise()方法。它的做用是，在原來的deferred對象上返回另外一個deferred對象，後者只開放與改變執行狀態無關的方法（好比done()方法和fail()方法），屏蔽與改變執行狀態有關的方法（好比resolve()方法和reject()方法），從而使得執行狀態不能被改變。

6.頁面間交互視頻

6.1 頁面打開和傳參概述

打開頁面的三種方式：

使用Shell，例如 UI2/portal/sample/index.w，這種方式不返回參數；

打開對話框；

使用內嵌頁面（WindowContainer）；

 

傳參數的三種方式：

？參數，進入URL，

Params，#！參數，經過序列化也能進入URL；

Params.data，不支持序列化，不進入URL，因此不能隨連接一塊兒分享。

 

傳參數的例子：

UI2/demo/page/index.w ，這個首頁中，

 

點擊按鈕

打開頁面

演示打開頁面的方式和打開頁面傳參數。

上面頁面文件是 interactive/page.w

6.2 Shell打開頁面

 

第一種代碼：

    //"p2"是index.w中 pageMappings定義的頁面標識

       justep.Shell.showPage("p2");

第二種代碼：

    var url = require.toUrl("./page2.w");

       justep.Shell.showPage(url);

 

三種參數傳遞：

    var url = require.toUrl("./page2.w?p1=p1Value&p2=p2Value");

       var params = {

           a1: "a1Value",

           a2: 2,

           data: {

              d1: "d1Value",

              d2: "d2Value"

           }

       }

       justep.Shell.showPage(url,params)

 

require.toUrl 相對路徑轉換爲絕對路徑。

參數接收，都在model組件的onParamsReceive事件中。此處是在page2.w中。可在該事件處理中經過event.params訪問後兩種參數，也可經過this.params隨時訪問後兩種參數。

6.3 對話框與數據傳遞

 

打開對話框並傳遞參數到對話框:有兩種方法。不傳參數可使用按鈕關聯open操做。傳參數能夠向下面同樣寫代碼。經過寫代碼可實現每次打開不一樣的頁面。

Model.prototype.button1Click = function(event){

       var dialog = this.comp("dialog");

       var url = require.toUrl("./dialog.w?p1=參數1&p2=參數2");

       dialog.open({

           src: url,

           params: {

              a1: "簡單數據a1",

              a2: 2,

              //data是特殊的參數, 這部份內容不能被分享

              data: {

                  //將一個函數傳遞給對話框

                  fn: function(){        

                     alert("將一個函數傳到對話框中");

                  }, 

                  //將data中的一行數據傳給對話框

                  data1: this.comp("data1").getCurrentRow().toJson()

              } 

           }

           

       })

    };

 

對話框dialog.w中接收參數：

Model.prototype.modelParamsReceive= function(event){

       var context = this.getContext();

       

       //獲取URL中的參數

       var p1 = context.getRequestParameter("p1");

       var p2 = context.getRequestParameter("p2");

       var buf = "來自url的參數: p1=" + p1 + ", p2=" + p2 + "\n";

       

       //獲取簡單參數

       buf += "簡單參數：params.a1=" + event.params.a1 + ",params.a2=" + event.params.a2 + "\n";

       

       //獲取複雜參數

       buf += "複雜參數：\n"

       if (event.params.data){

           buf += "    params.data.fn=" + event.params.data.fn + "\n";

           this.comp("dlgData").loadData([event.params.data.data1]);

           this.comp("dlgData").first();

       }

       alert(buf);

    };

 

對話框關閉並返回參數給主窗口 page.w

    Model.prototype.button3Click = function(event){

       this.owner.send(this.comp("dlgData").getCurrentRow());

       this.close();

    };

this.owner是誰？是page.w中的dialog組件。

 

主窗口page.w接收對話框dialog.w返回的數據：

    Model.prototype.dialogReceive = function(event){

alert("頁面接收對話框架返回的數據：" +JSON.stringify(event.data.toJson()));

    };

對話框的屬性

onClose指向 dialogClose函數。

onReceive指向dialogReceive函數。

src指向./dialog.w。

 

何時將返回數據寫入主頁的data1組件的呢？用的是對話框的mapping機制。對話框mapping屬性點擊打開對話框

注意對話框事件onReceive和onReceived的區別。

onReceive在mapping以前進行，onReceived在mapping以後進行。

6.4 內嵌頁面與參數傳遞

page.w頁面的containerContent中有兩個windowContainer組件，windowContainer1指向./page3.w，windowContainer2指向./page4.w。這樣就把page3和page4做爲內嵌頁面放到了page中。

windowContainer1

src屬性./page3.w?p1=p1&p2=p2同時指定了url參數。

Params指定{a1: "a1", a2: "a2"}了第二種參數。

Page3.js中接收了參數：

Model.prototype.modelParamsReceive= function(event){

       var context = this.getContext();

       

       //獲取URL中的參數

       var p1 = context.getRequestParameter("p1");

       var p2 = context.getRequestParameter("p2");

       var buf = "來自url的參數: p1=" + p1 + ", p2=" + p2 + "; ";

       

       //獲取簡單參數

       buf += "簡單參數：params.a1=" + event.params.a1 + ",params.a2=" + event.params.a2 + "; ";

       

       //獲取複雜參數

       buf += "複雜參數：\n"

       if (event.params.data){

           buf += "    params.data.d1=" + event.params.data.d1 + "; ";

           buf += "    params.data.d2=" + event.params.data.d2 + "; ";

       }

       

       var id = this.getIDByXID("container");

       $("#" + id).text(buf);

    };

顯示全部參數按鈕演示瞭如何在頁面中獲取使用參數：

Model.prototype.button1Click = function(event){

       var context = this.getContext();

       

       //獲取URL中的參數

       var p1 = context.getRequestParameter("p1");

       var p2 = context.getRequestParameter("p2");

       var buf = "來自url的參數: p1=" + p1 + ", p2=" + p2 + "\n";

       

       //獲取簡單參數

       buf += "簡單參數：params.a1=" + this.params.a1 + ", params.a2=" + this.params.a2 + "\n";

       

       //獲取複雜參數

       buf += "複雜參數：\n"

       if (this.params.data){

           buf += "    params.data.d1=" + this.params.data.d1 + "\n";

           buf += "    params.data.d2=" + this.params.data.d2 + "\n";

       }

       alert(buf);

    };

返回參數按鈕代碼：

    Model.prototype.button2Click = function(event){

       this.owner.send({r1: "r1Value"});

    };

向主頁page.w發送了名爲r1的參數，值爲r1Value。

主頁page.w中下面代碼接收並顯示了參數r1的值。

    Model.prototype.windowContainer1Receive = function(event){

       alert("接收到內嵌頁面的返回數據：r1=" + event.data.r1);

    };

 

主頁page.w中「刷新內嵌頁面」按鈕執行代碼：

    Model.prototype.button8Click = function(event){

       var url = require.toUrl("./page3.w?p1=p1ValueNew&p2=p2NewValueNew");

       var params = {

           a1: "a1ValueNew",

           a2: 20,

           data: {

              d1: "d1ValueNew",

              d2: "d2ValueNew"

           }

       }

       this.comp("windowContainer1").load(url, params);

    };

代碼從新裝入內嵌頁面page3，並傳遞了新的參數。

Load方法智能判斷，src沒變只傳參數；src變了刷新頁面。Refresh頁面會強制刷新頁面。

windowContainer2

src屬性./page4.w指定了內嵌頁面。

Params屬性{data: $model.data1}將主頁模型中數據組件data1的值傳遞給內嵌頁面。

頁面./page4.w中分別使用input和list顯示了參數數據：$model.params.data。

 

讓人比較意外的是，這種數據關聯竟然是雙向的：即主頁數據改變可實時傳遞到內嵌頁面，內嵌頁面數據改變也可實時傳遞到主頁。緣由是主頁和內嵌頁面UI綁定的是同一個對象，就是data1。

主頁和內嵌頁面可互相訪問對方的model組件

7.頁面結構及生命週期視頻

 

課程記錄

1.最簡單的應用

Hello

介紹應用建立，app打包

2.firstSPA

本身利用頁面嚮導建立程序。不用WeX5網站提供的視頻中的方法。

3.todoMVC

       介紹模型、窗口組件、事件、js代碼等

4.經過list顯示服務端json文件中的數據

       練習list組件和data組件的用法

goosData.json

參考 demo/taobao /list.w

1）  新建listJsonData應用

2）  複製demo/taobao/cart文件夾。裏面有圖片和json格式的數據文件。

3）  建立標準頁面 index.w

4）  頁面model中添加data組件goodsData，根據json數據文件格式，創建數據模型列定義

Index.js 中添加代碼 （代碼參考demo/taobao/list.w中同名函數）

Model.prototype.loadDataFromFile= function(url, objData, operation) {

       if (operation) {

           objData.clear();

       }

       $.ajaxSettings.async = false;

       $.getJSON(url, function(data) {

           objData.loadData(data);

       });

    };

 

    // 獲取商品列表

    Model.prototype.goodsDataCustomRefresh = function(event) {

       

       var url = require.toUrl("./cart/json/goodsData.json");

       this.loadDataFromFile(url, event.source, true);

    };

5）  goodsData的onCustomRefresh事件綁定函數goodsDataCustomRefresh

6）  index.w 的panel面板的content中添加scrollview組件。Scrollview實現下拉刷新，上劃加載更多數據。

7）  scrollview的中間content中添加list組件，設置data屬性值爲goodsData。list組件會自動根據關聯data數據循環顯示。

8）  在li中添加row組件，row中添加output，引用data中當前行的列。

9）  啓動tomcat，運行index.w。

10） 知識點講解：參考教材的scrollview，list，data組件。

 

 

表單與data組件的綁定

 

5.實現單表的CRUD

       經過baas服務。

       包括經過Java實現自定義的Action

       Baas打包部署

       參考：WeX5後端服務教程.zip

6.本身框架實現後臺服務

本身有j2ee的後臺服務能夠提供數據，wex5應該怎麼訪問呢，能夠不用baas嗎？

可使用ajax直接訪問，不過返回的json數據格式要保證能加載到data組件中http://doc.wex5.com/?p=4932

 或者是像這樣的：/UI2/demo/tuniu/json/cityData.json建議集成3.2.1的baas,這樣數據交互會簡單些能夠看看baas服務視頻：http://wex5.com/cn/1-wex5#06

  打包下載的那個視頻（3.2.1之前版本的baas）

 

 

7. 本身框架集成BaaS代碼

 

8. WebSocket通訊應用

9.播放音頻視頻

10.調試

       一種需求是界面基本不變，調試後端服務。這時可在native文件夾建立app，而後，右鍵菜單選擇編譯UI資源，成功後將www文件夾內的文件複製到myeclipse調試用的tomcat服務器應用程序部署文件夾內，做爲一個應用程序便可。

       在這種狀況下，經過瀏覽器調試UI中的腳本程序是能夠的。

       另一種需求是後臺服務基本不變，主要是開發調試UI。這時，應該把後端服務部署到WeX5開發環境所用的tomcat服務下。可是這個尚未嘗試。