? ? ? ?想必使用WeX5的各位親都應該看過了官方的WeX5開發指南,小茄覺得官方的開發指南難度系數較大,面向的受眾可能是已經敲過上萬行代碼的html5 app開發者。但是作為一個剛進入代碼世界的html5 app開發寶寶,小茄表示拿著這份指南也找不到“南”,為了讓其他跟小茄差不多等級的html5 app開發寶寶們更輕松地打怪刷副本,小茄決定分享自己的經歷,為 html5 app開發寶寶們寫一本WeX5的練級攻略,名為《WeX5的正確打開方式》。
目錄:
? ? (1)入門篇之進擊的Hello World
? ? (2)入門篇之進擊的Hello World(續)
? ? (3)WeX5綁定機制
? ? (4)WeX5綁定機制(續)

? ? ? ?本文是《WeX5的正確打開方式》系列的第一篇文章——【進擊的Hello World】
在代碼世界里,每個程序寶寶破蛋而出時看到的第一行代碼,都是名為Hello World的東西。使用WeX5的html5 app開發寶寶們也應該看過了官方版的Hello World,不過作為一名純小白,小茄表示官方的Hello World也并沒那么hello,當時理解起來也是花光了吃奶的力氣……
先拋開官方版的,下面就來看看進擊版的Hello World吧。

基礎部分

1、準備工作:打開hml5 app 開發工具——WeX5(路徑:WeX5\studio\studio.exe),在左側模型資源管理器中建立HelloWorld目錄并新建W文件,模板選空白的就好。這一步有問題找右鍵。

? ? ? ?1

2、鼠標拖一個Output放到W頁面上,效果如下:

? ? ? ?2

3、在屬性標簽頁設置Output的外觀樣式,這里常用的是class(設置類型),style(設置具體的樣式),我這里就設置了一下Output的紅色邊框。這里都是可視化鼠標操作,就不多說了,各種樣式可以盡情探索,不要生怕點錯了會弄疼軟件哈。

? ? ? ?3

4、一番精心打(rou)扮(lin)之后,當然要看看運行效果啦,試運行的步驟是:先啟動Tomcat,然后在W文件上右鍵選擇“用瀏覽器運行”。記得要先保存W文件再試運行才能看到改動效果哦。

? ? ? ?4

通過簡單的鼠標操作,很簡單就能設置好Output控件的外觀,這個也是WeX5的強大之處。而且更重要的一點是,所有設置都是符合html5 標準的!比如說你要設置一個控件的位置,并不能直接拖動控件到你想要的位置,而要通過邊距、定位等設置才能定位。所以即使是使用WeX5進行開發,還是要懂基本的HTML、CSS、JavaScript的,這里推薦不太熟悉的親們去稍微學習點基本的html5基礎知識。新手不用太糾結細節,先整體了解,日后碰到具體問題再去找相應的解決辦法。當然,小茄這邊也會分享相關的內容,大家可以關注哈~~~

5、上面的鼠標流操作設置好了外觀,但還沒看到Hello World的影子呢。大家肯定也想到了要在Output中輸出Hello World,具體操作也非常簡單:在屬性標簽頁的“bind-ref”內輸入“Hello World”就可以啦,注意要用英文模式的雙引號把Hello World引起來。有點編程基礎的同學都知道,用雙引號包起來的才是字符串,沒有雙引號的話就是變量了。這樣就設置好了,試運行時在Output里面就能看到效果了。

? ? ? ?5

? ? ? ?PS:這里的“bind-ref”是WeX5中的一個數據綁定機制,可以將其想象成一個管道,通過這個管道可以將不同組件間的數據綁定起來。例如我這里有兩個Output組件,我們可以簡單的通過bind來講兩個組件的值綁定起來,但只是綁定的話并沒有動態刷新的功能,如果需要像官方Hello World那樣做到動態刷新,還需要將綁定的值設置為可觀察對象。這個部分理解起來比較難,后續我會單獨開一個章節去講這部分,本文先略過。

? ? ? ?注意:原生的Web寫法應該是在標簽內寫入要顯示的內容,例如:Hello World。
但是WeX5將基本的HTML組件進行了封裝,而且為了方便管理數據還引入了數據綁定機制,
每次進行組件初始化的時候都會調用相應的構造函數去初始化組件,所以即使在Output組件的源碼中加入Hello World:

<div component=”$UI/system/components/justep/output/output” class=”x-output” xid=”output1″ style=”height:40px;” dataType=”String”>Hello World</div>

? ? ? ?但Output的innerText也還是會根據數據綁定的規則去初始化組件,如果沒有綁定,則初始化為空值。因此,WeX5中除了原生的HTML標簽外,都應該按照WeX5的規范使用數據綁定的方式來管理控件。

進階部分

? ? ? ?上面這種純輸出的頁面沒什么意思,現在試試加點交互效果。比如說加個按鈕,點擊按鈕改變輸出信息為”Hello WeX5”。官方原版的Hello World案例中使用了WeX5的數據雙向綁定機制來實現,因為我們都不熟悉WeX5的數據綁定機制,所以理解起來非常吃力。拋開綁定機制,WeX5的寫法其實很簡單:
Model.prototype.button2Click = function(event){
var output = this.getElementByXid(‘output1’);
output.innerText = “Hello WeX5”;
};
? ? ? ?WeX5提供了一個事件標簽頁來方便地設置組件的各種事件,這樣一來可以一覽組件的事件接口,二來也方便集中管理所有組件事件。使用方法就是在需要的事件中填入函數名(不填則使用默認函數名)并雙擊,然后就可以進入js源碼頁了,這里系統會自動生成Model.prototype.函數名 = function(event){}代碼段。細心的同學會發現,這里的事件也是帶bind前綴的。沒錯,這里也采用了數據綁定機制一樣的實現方式,不過這里暫時先不用管這些,知道用法即可。

? ? ? ?6

這里小茄也默認大家有Web編程基礎的了,先對比原生的web寫法:

<p id=”output1″>Hello World</p>
<button onclick=”button2Click()”>Button</button>
<script type=”text/javascript”>
function button2Click(event) {
var output = document.getElementById(‘output1’);
output.innerText = ‘Hello WeX5’;
}

</script>
? ? ? ?可以看出主要的差異點是WeX5中使用了xid代替了原生的id,所以要用getElementByXid來獲取元素節點。之所以這樣做的原因,主要是為了解決命名沖突的問題,在一個復雜頁面中通常是將頁面分成很多頁面片段來開發的,而很多時候某幾個頁面片段都可能引用了同一個組件,那么在總頁面中就會產生id的命名沖突。而xid是通過在id后面加入一個頁面標示,即使是同一個id在不同的頁面片段中的xid也是不同的,這樣就解決了id沖突的問題。

? ? ? ?另外一點差異是WeX5中還創建了一個Model對象,頁面中資源都放入了Model變量中,使用的時候也要在Model中進行操作。而原生的寫法是將所有函數和變量都放在全局環境中,使用的時候直接引用全局中的函數變量。當一個頁面比較復雜的時候,全局下就會有非常多的函數和變量,這樣就容易產生變量沖突和變量覆蓋,因為js中是可以重復聲明的,后聲明的變量會覆蓋掉前面聲明的變量,這樣一來后聲明的函數就將前面的函數體覆蓋掉了。更為嚴重的是,瀏覽器給js提供了很高的權限,你甚至可以覆蓋掉系統提供的接口。比如說:
alert = function () { window.close(); }
alert(“hello”);
? ? ? ?這樣alert就由報警變成了關閉頁面,但瀏覽器是允許這種行為的,所以我們應該盡量避免污染全局變量。

? ? ? ?最后還有一點就是我們定義的方法是放在Model.prototype之下的,也就是放在Model原型下面的。也就是說采用了混合模式(構造+原型)來創建對象,當然,直接寫在對象下也是OK的,只是不推薦這種寫法,例如:
var Model = function(){
this.callParent();
this.button2Click = function(event){
var output = this.getElementByXid(‘output1’);
output.innerText = “Hello WeX5”;
};
};

總結
? ? ? ?上面的例子實現了一個按鈕改變輸出文字的功能,通過這個例子,大家應該能掌握WeX5中頁面布局設計與簡單交互事件的寫法,上面介紹的寫法與原生比較相似,對有web基礎的同學來說應該是很好理解的。沒有基礎的同學,還是推薦先到w3school 去學習web基礎,過一遍HTML、CSS,熟悉一下js語法即可。
關于Hello World可說的內容還有許多,下一篇我會介紹一下HTML源碼以及js源碼結構。

? ? ? ?附錄:官方Hello World的WeX5寫法與原生js寫法對比,可以看出在頁面復雜的時候WeX5的代碼更簡潔,更方便管理。

原生js寫法:

Input1: <input type=”text” id=”input1″ value=”” /><br />
Input2: <input type=”text” id=”input2″ value=”” />
<script type=”text/javascript”>
var input1 = document.getElementById(‘input1’),
input2 = document.getElementById(‘input2’);
input1.addEventListener(‘input’, function (e) {
input2.value = this.value;
});
input2.addEventListener(‘input’, function (e) {
input1.value = this.value;
});

</script>

WeX5寫法:

define(function(require){
? ? var?$ = require(“jquery”);
? ? var?justep = require(“$UI/system/lib/justep”);
? ? var?Model = function(){
? ? ? ? this.callParent();
? ? ? ? this.input1 = justep.Bind.observable(“”);?//核心語句
};
? ? return?Model;
});

 

本文源自WeX5開發者——小茄投稿,開發者可在WeX5論壇中記錄浙江福彩過程中的點滴。

也可以直接發送到WeX5官方郵箱中投稿,Email地址:[email protected][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]