Weex學習分享

1:什么是weex

Weex is a extendable cross-platform solution for dynamic PRogramming and publishing projects. Weex是針對動態編程和發布項目的一個可擴展、跨平臺的解決方案。

這是來自Weex Document的介紹。這句話個人感覺還是非常有誘惑力的。為什么？擊中移動端開發兩個痛點。

動態編程＋發布。Weex能做到隨時編程發布到服務端，應用端即時更新。想想以前，應用開發－測試－發布，多么繁瑣和耗時的一個流程， 萬一線上出了bug，那真是痛不欲生，尤其時用戶量上百萬千萬的應用，老板連殺你的心都有。但是有了Weex就不一樣了。修復bug，用戶都是無感知的。 跨平臺。這是移動端無數人向往的和為之努力的事。一處編寫，到處運行。Weex支持Android，iOS，Web三大平臺，一份代碼，三個平臺通用。 等到有一天，Weex真的發展強大起來，公司成本估計可以節省不少。

原理：

2：怎么安裝

[見官網]https://weex-project.io/cn/ 安裝好后，使用命令窗口進行編譯運行 各種命令等 入口

3：主要的一些方法 技術

代碼結構

文件類型是xxx.we的形式

(1)<slider>

<slider> 組件用于在一個頁面中展示多個圖片，在前端，這種效果被稱為 輪播圖。 []https://weex-project.io/cn/references/components/slider.html

(2)<image> 組件用于渲染圖片，并且它不能包含任何子組件。可以用 <img> 作簡寫。

和html不同的一點是：1：圖片必須要定義寬高 才會顯示2：圖片的地址不能配本地的，必須配置網絡地址3：應該是有相應的緩存處理的 ，第一次下載圖片會比較慢，但是以后每次啟動頁面，直接顯示，不卡殼

(3)modal 模塊提供了以下展示消息框的 API：toast、alert、confirm 和 prompt 這些樣式都基本符合移動端的顯示習慣，使用很方便

(4)子模塊的引用。。。

由于各個頁面的title_bar的樣式都比較接，所以可以將這個子模塊單獨處理，什么地方需要直接引用，在相應的頁面配置需要的參數即可，很方便 <nav> 統一構建 怎么調用

(5)自由適配各種大小類型的移動端設備，不需要我們自己實現響應式，

4：坑

1:命名文件名的 時候，不要以text.we命名，不然會出現 text不停的循環的情況 就是你weex文件里用的組件名不要跟文件名同名 就好了~

2:通過設置 if 特性值，你可以控制當前組件是否顯示。如果值為真，則當前組件會被渲染出來，如果值為假則會被移除

3: <image>組件用于渲染圖片，并且它不能包含任何子組件。

需要注意的是，需要明確指定 width 和 height，否則圖片無法顯示。

<image>組件不支持任何子組件，因此不要嘗試在 組件中添加任何組件。如果需要實現 background-image 的效果， 可以使用 組件和 position 定位來現實，如下面代碼。

還有，目前項目里的圖片路徑均來自與 網絡路徑 本地路徑如何加載 文檔中還沒有發現（等待更新）

4:根節點：每個 Weex 頁面最頂層的節點，我們稱為根節點。下面是目前我們支持的三種根節點：(這一點和html5比較，沒有那么靈活)

目前 Weex 僅支持以上三種根節點。

注意事項： 只支持一個根節點，多個根節點將無法被 Weex 正常的識別和處理。

5:a鏈接不能跳轉外網以外的鏈接頁面（第二遍進行 a鏈接測試時，a鏈接又不能正常跳轉 坑！！還需要繼續跟蹤測試）

6：switch使用官方提供的demo 和自己本地運行出來的效果不一樣

7：input標簽被 手機彈出來的 鍵盤輸入框遮擋（我覺得這個還真是個問題）

8：stream用來實現網絡請求 類似Ajax(存在的問題是 ，目前在playground中掃碼可以正常獲取 ，使用github demo 也可以正常獲取 ， 但是在我自己集成的 項目中無法獲取 ，問題已經定位在 原生代碼中。)

9:storage:存儲功能（待測試）

10：picker的demo也是（待測試）

11：編譯weex.we為weex.js生成到 D:/nodejs/node_modules/weex_tmp/h5_render文件夾后 ，需要生成一個 就保存一個 不然會被下一個覆蓋掉 也有可以一次性把所有的編寫好的.we都完成 一次性生成.js 文檔有相應的指令

12:引用模塊的時候 ，在

13：查看自己的 gradle版本

14：在調用weex的onclick方法，實現從A頁面 跳轉到B頁面時，可以實現正常跳轉 ，在“我”的模塊可以體現，但是，跳轉過去后，會帶有一個weex的藍色title 帶有返回和刷新的功能，目前在A 頁面 B頁面，找不到重寫該樣式的地方。。（等待文檔更新）

15:當在 Android studio 中運行，程序無法安裝到 手機時，先檢測自己的手機版本sdk 和配置文件中的 minSdkVersion 版本

5：(半)成品展示

下載二維碼：weex demo [源碼地址：](https://github.com/sunny66666666/Weex-Demo)