天天看點

無線動态化技術方案 Weex 快速入門

這裡會介紹一下 weex 的簡單入門開發方式

有了正文介紹的背景情況,接下來我們分享一下 weex 的方案設計和開發方式,當然在此之前,weex 能夠做出什麼樣效果的界面,可以讓大家先睹為快。

無線動态化技術方案 Weex 快速入門

如果大家對今年雙十一主會場的展示效果和體驗還有印象的話,那就是我們 weex 技術方案的首秀——當然這個頁面已經下線了。如果大家錯過了或還想再回味一下,我們有另外一個線上的頁面可供參觀:今天大家用手機淘寶掃碼打開下面這個位址:

<a href="https://h5.m.taobao.com/weappplus/viewpage.html?page=act/neoact">https://h5.m.taobao.com/weappplus/viewpage.html?page=act/neoact</a>

無線動态化技術方案 Weex 快速入門

不論是安卓還是 ios 用戶端,甚至是普通浏覽器打開,都可以看到相同的“秋意漸濃填新裝”的活動,這是目前大家可以看到的一個用 weex 渲染出來的界面。

無線動态化技術方案 Weex 快速入門

這樣的界面是如何開發出來的呢?言歸正傳,給大家介紹一下 weex 界面的制作過程——從最基礎的寫法開始

無線動态化技術方案 Weex 快速入門

螢幕上就會展示一段“hello world”的文本

我們把要展示的内容放在了 <code>&lt;template&gt;</code> 的标簽裡,這裡的内容是一個文本标簽 <code>&lt;text&gt;</code>,标簽裡的内容正是要展示的文本。

我們可以通過 <code>style</code> 特性給文本設定一些 css 樣式:

無線動态化技術方案 Weex 快速入門

或通過在外層增加 <code>&lt;style&gt;</code> 樣式表:

無線動态化技術方案 Weex 快速入門

現在我們加入一張圖檔,并且通過 flexbox 布局方式使其左右排布:

無線動态化技術方案 Weex 快速入門

點選商品資訊可以打開商品詳情:

無線動态化技術方案 Weex 快速入門

這裡的 <code>&lt;script&gt;</code> 标簽是我們引入的可以用 javascript 定義資料和方法的地方,<code>&lt;template&gt;</code> 标簽裡的 <code>onclick</code> 事件會綁定 <code>&lt;script&gt;</code> 裡的 <code>gotodefault()</code> 方法,這個方法裡的 <code>$openurl(url)</code> 是一個我們内置的 api 方法,可以打開一個網址。

如果同一個頁面中會出現多個商品,還可以通過資料綁定的方式避免進行複用:

無線動态化技術方案 Weex 快速入門

這裡我們通過雙大括号的文法将 <code>&lt;template&gt;</code> 中要展示的特性或内容和 <code>&lt;script&gt;</code> 中的資料和方法綁定在了一起。

如果頁面結構比較複雜之後,我們還可以通過一些自定義元件來将大的元素拆分成一個個小的元素,以此增強代碼的可複用性、易讀性、可擴充性:

基本的 weex 開發方式就是這些了,想主會場這樣如此複雜的界面,其實也都是這樣的代碼組合而成的。

整個開發方式應該還是蠻簡單清晰的吧,總體上是一個“傻瓜版”的 html / webcomponents 式開發,但可以做出 native 級别的體驗。