好吧，我知道你來看這個文章，一定是遇到坑了,所以，把這幾個放在最開始吧
現在，如果你的團隊的技術棧是react，請嘗試這個吧,跟react很像，如果你的團隊一直使用react，這是一個更好的選擇Rax · 跨容器的渲染引擎
Vue問題，你可以在Vue官方提交issues，【地址】 。
Weex問題，你可以在中文討論板塊提交問題，【地址】 。
Weex官方github提issues地址Weex的Issues
weex支援有限的Style，頁面的佈局使用Flex，建議仔細閱讀：Weex 元件支援的通用樣式規則
weex的上層業務框架有三層：vue2.0，rax，we，如果你用vue2.0來編寫上層業務，建議仔細閱讀：Vue 2.x 在 Weex 和 Web 中的差異 和 Vue 官方文件
內建元件和內建模組基本上是你開發Weex應用的基礎，建議仔細閱讀：內建模組 和 內建元件
weex debug 的使用方式，建議仔細閱讀：weex dev tool 的使用
常用社群與資源
相當於阿里的weex官方UI庫Weex Ui 官網
Weex + Ui – Weex Conf 2018
餓了麼前端關於Weex的知乎專欄
超級全的Weex大集合，大禮包，千萬不要錯過
據說來著阿里的同學的 可能是史上最全的weex踩坑攻略
3個比較活躍的Weex開發QQ群 327169027 112304356 140596030
可以借鑑的Demo weex-eleme
Weex學院
Weex中文社群
一個weex的UI元件庫
一個weex答題牛人，荔枝我大哥
Weex的github地址
做app的推薦使用遠方的狼的腳手架,做了很多優化，極力推薦使用遠方的狼的腳手架專案地址:
iOS的同學可以看看這個iOS開發者的Weex偽最佳實踐指北
Weex專案實戰及踩坑記錄
weex-eros 是基於 [weex 封裝面向前端的 Vue2 寫法的解決方案](https://www.gitbook.com/book/…
首先，你肯定想知道Weex是個什麼玩意
來給你甩個連結，來看看官方如何解釋weex是個啥Weex官方地址
具體的搭建環境什麼的裡面都有，可以直接閱讀官方文件，但是官方文件有坑，請酌情閱讀
有以下知識需要注意
-
Weex現在支援用Vue2.0語法進行開發，所以你現在需要先具備一定的Vue基礎，關於Vue的相關知識，請參考Vue官方文件，Weex官方說是Vue的全家桶都能夠使用，但是在實際開發過程中，我們團隊還是遇到了一定的問題，3端表現並不一致，請斟酌使用。如果你有原生開發經驗，那就太好了。
非常重要,一定要仔細閱讀 Vue 2.x 在 Weex 和 Web 中的差異
- 在樣式上，Weex對CSS的支援不是特別完善
Weex不支援CSS的簡寫，所有類似margin: 0 0 10px 10px的都是不支援的
不管是Web還是Weex你的設計應該基於750px來繪製介面，Weex框架層面會幫你自動計算和適配。
-
除錯
如果你對Native比較熟悉可以直接編一下weex開源的專案，如果實在搞不明白的話，你可以去各大應用市場裡下載 weex playground 這個App，然後用weex debug src/weex-bootstrap.we 來開啟除錯介面。
如果你只想檢視一下在Native端的渲染，用weex playground這個App掃描一下第二個二維碼即可。
如果你需要除錯，依然是用weex playground這個App先掃描第一個二維碼，此時會出現第二個節目，然後再掃描下方，你自己頁面的二維碼來渲染。
除錯分為兩個部分Debugger和Inspector，如果你選擇Debugger，那麼你可以在source裡看到你寫的檔案，來斷點之類的。如果你選擇後者，那麼你可以在element皮膚裡檢視元素。
重要的事情再說一遍：（要用weex playground掃二維碼）。
推薦閱讀 前人留下的印跡
- 釘釘官方人員，基於Weex的釘釘高效能微應用倡導者與實踐者，寫的相關文章 請仔細閱讀 地球上最全的weex踩坑攻略-出自大量實踐與沉澱
- 關於字型圖示的解決辦法，字型圖示需要處理後才能正常使用 字型圖示的Bug
<text :style="{fontFamily:`iconfont`,color:`red`,fontSize:`40px`}">{{getFontName}}</text><script>
`var he = require(`he`);
module.exports = {
data: function () {`
return {
fontName: ``,
}
`},`
`computed: {`
getFontName: function() {
return he.decode(this.fontName)
}
`}`}</script>
- 一個可愛的萌妹子的探路歷程比較詳細的Weex踩坑過程
- 目前所知的，比較傾向於原生的踩坑歷程最早的踩坑歷程
- 基本的Weex介紹視訊 ，釘釘研發人員開講 快到讓你難以置信的Weex技術
- 強烈推薦的釘釘封的一個js庫，非常好用，這個庫存在的意義是提供一些便捷的Utility函式，這些Utility函式將抹平Web Weex之間的一些差異，提供統一的介面，讓使用者使用，目前實現了7個模組可供使用。抹平差異的Utility庫
- 釘釘給出的常見小問題
- Weex相關的視訊，但是Weex1.0版本的，可以學習思想 暴走親年的weex教學視訊
- weex-hackernews專案原始碼，Weex官方給的一個Demo https://github.com/weexteam/weex-hackernews
- 我是從這個Demo上手的，基於Vue2.0 強烈推薦，強烈推薦，強烈推薦 ，Android可直接打包為apk，無須配置一個老外寫的todo-list Demo
- 關於最多的Playground掃碼白屏的問題，這個文章中有提到我的Weex開發之路
通往星辰大海的路上的坑（下面想起什麼記錄什麼，無序排列，持續更新）
-
關於fetch(options, callback[,progressCallback])發起網路請求中有關Timeout的問題
當你在請求資料時，可能會發現官方的文件裡沒有設定 timeout 這個屬性，官方大概把這個屬性值設定為了3秒，在弱網情況下，這個值是不夠的。經過研究，其實，你可以大膽使用，如下：
stream.fetch({
method: `GET`,
type: `json`,
url: `https://api.github.com/repos/` + repo,
timeout:6000 //單位為ms
}, callback)-
使用Weex中的refresh，loading上拉與下拉重新整理，3端體驗不一致，Android上拉下拉都沒問題，iOS都不行
原因是因為在iOS 上由於 Scroller 的contentSize 小於scroller 本身高度所以導致不能滑動，所以需要設定你想滑動的內容或容器高度
（建議同loadmore事件替換loading元件，loading的問題有點多，即使你的content足夠長，高度大於螢幕高度，多拽幾次也有可能出現載入中…情況收不下去的）
-
目前圖片不支援使用本地圖片，並且不支援gif格式，如果需要類似loading的動圖，可以嘗試使用動畫實現
-
可以考慮用來做loading動畫持續旋轉的動畫效果
Tips: transform: `rotateZ(360deg)`, 其中你旋轉的角度每次動畫過後都是儲存了的，並沒有歸0,也就是說你第一次是從0度轉到360度，以後（你的每600ms）都是從360度到360度。
-
文字展現必須使用<text>標籤
-
關於Android端的點透事件
需要在上層檢視上加上@click.stop，如果上層檢視有事件，多加一箇中間層，把@click.stop加在空事件檢視上
-
關於Page 事件
注意：僅支援 iOS 和 Android，H5 暫不支援。
Weex 通過 viewappear和 viewdisappear事件提供了簡單的頁面狀態管理能力。
viewappear 事件會在頁面就要顯示或配置的任何頁面動畫被執行前觸發，例如，當呼叫 navigator模組的 push方法時，該事件將會在開啟新頁面時被觸發。viewdisappear事件會在頁面就要關閉時被觸發。必須繫結到頁面的根元素上。
(我們遇到的坑是在Playground中這兩個事件都能夠觸發，但是iOS和Android的觸發時間好像有微小的差異，但是這個事件在釘釘客戶端中，Android上表現完好，iOS端無法觸發,原因 不明，但是在釘釘中的解決辦法如下)
頁面resume事件
當頁面重新可見並可以互動的時候，釘釘客戶端會觸發這個事件。
import dingtalk from `weex-dingtalk`;
dingtalk.ready(function(){
dingtalk.on(`resume`,function(){
// do something
})
});頁面pause事件
當頁面不可見時，釘釘客戶端會觸發這個事件。
import dingtalk from `weex-dingtalk`;
dingtalk.ready(function(){
dingtalk.on(`pause`,function(){
// do something
})
});