踩坑--- 基於釘釘的Weex微應用開發起手式（其實寫完發現變成Weex相關資料彙總了）

好吧，我知道你來看這個文章，必定是遇到坑了,因此，把這幾個放在最開始吧

如今，若是你的團隊的技術棧是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官方地址
具體的搭建環境什麼的裏面都有，能夠直接閱讀官方文檔，可是官方文檔有坑，請酌情閱讀

有如下知識須要注意

1. Weex如今支持用Vue2.0語法進行開發，因此你如今須要先具有必定的Vue基礎，關於Vue的相關知識，請參考Vue官方文檔，Weex官方說是Vue的全家桶都可以使用，可是在實際開發過程當中，咱們團隊仍是遇到了必定的問題，3端表現並不一致，請斟酌使用。若是你有原生開發經驗，那就太好了。

   很是重要,必定要仔細閱讀 Vue 2.x 在 Weex 和 Web 中的差別

2. 在樣式上，Weex對CSS的支持不是特別完善

Weex不支持CSS的簡寫，全部相似margin: 0 0 10px 10px的都是不支持的
不論是Web仍是Weex你的設計應該基於750px來繪製界面，Weex框架層面會幫你自動計算和適配。

1. 調試

若是你對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的各類坑

---

• 目前所知的，比較傾向於原生的踩坑歷程最先的踩坑歷程

---

• 基本的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開發之路

通往星辰大海的路上的坑（下面想起什麼記錄什麼，無序排列，持續更新）

• 標籤跳轉的是一個Weex頁面（也就是一個js文件），與H5下的標籤用法不一致，並非跳轉一個常見的網頁

---

• 關於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
   })
});

以上所有資源來自互聯網蒐集，歡迎轉發分享，但願Weex能愈來愈好。