WeeX FAQ

QQ:

Weex大前端 516682889
Weexbox： 943913583

WeeX相關資源

weex官方資源
- weex官網
- Weex Market 已掛 : 一個提供 Weex 第三方組件的網站，您可以在這里找到你需要的 Weex 組件。
  - Playground : Playground在線，直接在線編寫代碼并預覽效果
- weex-toolkit : Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和調試
- weex-ui官網
- weex團隊的github主頁
- Weex 中文聊天室
- 輕舟（BOAT）已掛 : 基于 Weex 技術快速開發跨平臺 App 的一站式解決方案
- segmentfault weex專欄
- stackoverflow weex專欄
- weex jira
Weex增強框架
- WeexBox : WeexBox 致力于打造一套簡單、高效的基于 weex 的APP混合開發解決方案。
  - 合摩 WeexBox 正式發布
  - WeexBox 1.2.0 新增 Lottie 動畫，媽媽再也不用擔心我加班寫動畫了！
- weexplus
  
  侵入型較低
  - 用weexplus從0到1寫一個app(1)-環境搭建和首頁編寫
- bmfe/eros
  
  eros 不是框架，是基于 weex 封裝、面向前端的 vue 寫法的一整套 APP 開源解決方案，是由本木醫療大前端團隊經過大量實踐沉淀而出。
  - 那些年沒錯過的彎路，WEEX-EROS 開源一年記
  - weex eros框架源碼解析
  - 教程：EROS集成到現有iOS應用
Weex 第三方UI組件
- Weex UI ：阿里巴巴的weex UI
- Weex AMUI
- bui-weex :

專門為 Weex 前端開發者打造的一套高質量UI框架

natjs 輕松為你構建的 Weex 應用加入原生功能
hbteam/weex-droplet-ui

weex實例
- 官方提供的examples（weex代碼中也有同樣的例子）
  - 在線體驗
- weex playground app : weex源碼自帶的demo
- [Weex集成到現有app的示例]
  - Weex與swift集成的示例
  - https://github.com/apache/inc...
  - https://github.com/apache/inc...
- Weex開發的網易嚴選App（原始版zwwill版）
- Weex開發的網易嚴選App 使用Eros跨平臺開發框架實現的嚴選功能
- Weex開發的網易嚴選App 這個是另一個版本，用eros框架
- Weex版本跨平臺的開源Github客戶端App : 有很多資源
- WEEX仿咸魚app
- WeexList
  
  A complete Demo about Weex, including Custom UI, Network, Events, and the Drop-Down Refresh is Achieved By two ways.
- mpvue-weex
  
  一套 Vue 代碼，五端可用(H5、小程序、PC、蘋果App、安卓App）,使用mpvue實現小程序，weex打包APP。系統含50+頁面，30+組件(5端通用)，170+元件(每個終端獨立完成)
- weexext/weex-toutiao weex仿今日頭條 Weex [今日頭條]客戶端 weexdemo
- Huahua-Chen/toutiao_Vue2.0 基于Vue2.0全家桶的低配版今日頭條
- MasonLiuChn/WeexExplorer: Web端做SPA，Native端做多頁應用并使用Vuex
weex相關文章
- awesome-weex ：資料大全
- Weex從入門到超神系列
- [頭條祁同偉系列文章]
  - Weex系列（一）之Weex入門準備
  - Weex系列（二）之列表頁實戰
  - Weex系列（三）之列表頁實戰沖突解決
  - 深入Weex系列（四）之Module組件源碼解析
  - 深入Weex系列（五）之Component組件源碼解析
  - 深入Weex系列（六）之Weex渲染流程分析
  - 深入Weex系列（七）之Adapter組件源碼解析
  - 深入Weex系列（八）之Weex SDK架構分析
  - 深入Weex系列（九）Weex SDK可借鑒細節總結
  - 深入Weex系列（十）Weex SDK可優化細節思考
  - 深入Weex系列（十一）使用Weex構建一個完整App的思考
- 木羽系列
  - 【入門】WEEX快速創建工程 Hello World
- 【Weex】網易嚴選 App 感受 Weex 開發
- 記一次 Weex 的 iPhone X 適配
- 【Weex】純 Weex 開發一個小游戲
- Weex BindingX 嘗鮮
- 使用BindingX開發客戶端炫酷動畫
- 使用 Weex 和 Vue 開發原生應用
教程
- weex官方入門教程
- weex 學習/實踐指南
- Weex 開發教程
- 集成
  - Swift 中的 weex
  - 【iOS 開發】集成 Weex 注意事項
- Weex 開發小游戲是件很 high 的事兒
- 一起來玩Weex
- iOS開發之Weex爬坑之路環境部署和Devtools Debug（一）
進階教程
技術文章
https://github.com/joggerplus...
- 網易嚴選 App 感受 Weex 開發
- Weex實戰分享|企鵝電競Weex實踐和性能優化
- [Weex實戰分享|Weex在極客時間APP中的實踐

](https://mp.weixin.qq.com/s/at...

Weex BindingX 嘗鮮
擁抱大前端——從Weex開始

深度文章
- 深入了解 Weex
- weex頁面傳參
- Halfrost-Field官網
  - Halfrost-Field 冰霜之地:的Weex 源碼解析系列 :
  - Weex 是如何在 iOS 客戶端上跑起來的
  - 由 FlexBox 算法強力驅動的 Weex 布局引擎
  - Weex 事件傳遞的那些事兒
  - Weex 中別具匠心的 JS Framework
  - iOS 開發者的 Weex 偽最佳實踐指北
- Weex與原生頁面間的相互跳轉
應用實踐
- 尚妝達人店 UI 組件化工程實踐（weex vue）
- Weex在達人店的一年實踐
- Weex 技術在蘇寧移動辦公開發中的實踐
- Weex避坑指南-理論篇
- 基于weex的考拉移動端動態化方案
- Weex避坑指南-理論篇
- 51信用卡 Android 架構演進實踐
- 網易嚴選App感受Weex開發（已完結）
- 基于weex的有贊無線開發框架
應用實踐-企鵝電競系列
- 企鵝電競weex實踐——UI開發篇
- Weex實戰分享|企鵝電競Weex實踐和性能優化
- 企鵝電競動效揭秘
- 精準微動效解決之道-Lottie
WeeX相關ppt
- weex conf2018大會資料
- Weex社區過去、現在和未來
- Weex技術演進
- Weex在盛大游戲中的應用實踐
- Weex + UI
- Weex在極客時間App中的實踐
- 企鵝電競Weex實踐和性能優化
howto
- 用Swift寫WeexDemo
- 用Swift寫WeexDemo 2
- 用Swift寫WeexDemo 3
- SimpleSwiftWeexDemo github上的配套源碼

知識樹

重點關注的知識點

頁面傳參
Native-JS通信
- JS 調用Native
- Native調用JS
屏幕適配
配置下發
降級
集成到app (Native 接入)
- 在Android方面，我們把weex的接入放入了自定義的WeexFragment。另外，新建WeexActivity，引用WeexFragment。這樣使用起來更靈活。
- 在iOS方面，我們把weex的接入放入了自定義的WeexViewController。
分辨率和尺寸

Weex 對于長度值目前只支持像素 px 值，還不支持相對單位（em、rem）,需要 pt 和 px 的換算
在 Weex 中定義的默認的屏幕寬度是750
通信
- native 到 Weex js 通信
- Native 產生的一些事件，是怎么傳回給 JS
- Weex 的事件傳遞
  
  一是 Module 模塊的 callback，二是通過 Component 組件自定義的通知事件
- Weex js 到 native 之間的通信
- Weex js 之間的通信
- Web 到 Weex js 通信
- event
  - 輕掃事件
  - 長按事件
  - 拖動事件
  - 通用觸摸事件
  - Appear 事件
  - Disappear 事件
  - Page 事件
- 生命周期事件

工程化

devops

如何構建發布流程
- weex頁面里，如何調用native的網絡模塊獲取到數據
- 多頁面的跳轉
- 調試工具weex devtool的使用方法
  - 利用Weex DevTool調試Native應用-iOS篇
如何解除App組件之間和App頁面之間的耦合性？
1.頁面降級
性能監控和埋點
1. 增量更新和全量更新
1. 首屏加載時間極致優化

Router

App之間跳轉實現
- 自家的一系列App之間如何相互跳轉？
從外部跳轉到App內部一個很深層次的一個界面。
如何在App任何界面都可以調用同一個界面或者同一個組件？
如何能統一iOS和Android兩端的頁面跳轉邏輯？甚至如何能統一三端的請求資源的方式？
組件如何拆分？
Native 產生的一些事件，是怎么傳回給 JS
- Weex中js和Native的交互-iOS篇

使用場景

集成 Weex 到已有應用
用weex實現活動模塊
原生的iOS工程局部頁面嵌入weex的view
如何在H5中使用

擴展

Module 擴展非 UI 的特定功能。
Component（UI）
Adapter
handler
擴展 Android 的功能
擴展 iOS 的功能
使用 swift 擴展 iOS 的功能
擴展 HTML5 的功能

擴展 Web 渲染器
weex-vue-render
《拓展JS framework》

最佳實踐

需要優化的內容

自定義網絡adapter / handler,可以針對網絡請求進行攔截修改

掛接自己的 http 適配器，適度復用 Native 的 http 實現并定制到 weex 中，同時這也是打通 native 登陸憑證和 weex 登陸憑證的必要一環。
- wb-network [Weexbox]
自定義圖片適配器（adapter / handler），可以對圖片進行壓縮和緩存處理
UI增強：confirm、toast、alert
路由：自定義路由，跳轉規則
- 自定義a標簽component 攔截url進行跳轉
- weex native webview 無縫跳轉
相對地址熱更新 & 預加載weex-JS頁面提高渲染速度

為了提升渲染效率，我們會提前把js文件下載到本地，使用時直接加載本地文件
- 靜態資源的緩沖和緩沖更新策略配置
- SonicRuntime VasSonic是騰訊開源的一套完整的Hybrid方案，Github地址: VasSonic,官方定義是一套輕量級和高性能的Hybrid框架，專注于提升H5首屏加載速度。
- 預加載: 靜態資源離線預推
動態緩存：storage module增強
- wb-storage [Weexbox]
頁面局部刷新

工程化

腳手架：對于公司接入來說我們不太會使用官方提供的腳手架工具，一般都是自己實現
- webpack
建立組件庫
錯誤監控

參考：「大前端」Weex在達人店的一年實踐

A: 官方文檔是最好的入門

Q: 運行weex github上的代碼報錯：
CMake Error: CMAKE_C_COMPILER not set, after EnableLanguage
CMake Error: CMAKE_CXX_COMPILER not set, after EnableLanguage

設置環境變量（mac下   ~/.bash_profile)
export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_NDK=$HOME/Library/Android/sdk/ndk-bundle
source ~/.bash_profile同時修改weex_sdk/build.gradle 去掉armeabi(armeabi和mips已經不被cmake支持了)ndk {abiFilters "armeabi-v7a","x86"}

Q: 如何從零開始，創建weex標準項目

第一步：準備開發環境

# 請確保你已經安裝了 Node.js，然后全局安裝 weex-toolkit。
npm install weex-toolkit -g如果要添加ios或android支持，需要安裝xcode或android studio

創建一個空的Weex + Vue.js 模板項目：

weex create awesome-app

運行項目

cd awesome-app
npm install
npm start
或
weex run web然后工具會啟動一個本地的 web 服務，監聽 8081 端口。你可以打開 http://localhost:8081 查看頁面在 Web 下的渲染效果。 源代碼在 src/ 目錄中，你可以像一個普通的 Vue.js 項目一樣來開發.

添加特定ios或android支持

默認情況下 weex create 命令并不初始化 iOS 和 Android 項目，需要執行以下命令：安裝相關組件
weex platform add ios
weex platform add android

在模擬器或真實設備上啟動應用

weex run ios
weex run android
weex run web

Q: 如何在自己的app項目中d導入weex官方正式發布的Weex SDK（集成 Weex 到已有應用）

WEEX 會在jcenter 定期發布穩定版本。jcenter
注:國內可能需要翻墻

android集成：
修改build.gradle 加入如下基礎依賴(版本請替換為最新版)

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.5.1@aar'

iOS集成
在 Podfile 文件中添加如下內容

pod 'WeexSDK', '0.17.0'   ## 建議使用WeexSDK新版本pod install

Q: 如何在自己的app項目中將Weex SDK源碼作為模塊導入項目中（集成 Weex 到已有應用）

一般來說，直接使用官方正式發布的week-sdk庫（android通過jcenter引入sdk，ios通過cocoaspod引入sdk），只有希望使用最新的weex功能時才需要將sdk源碼導入到自己的app中（作為模塊和app一起編譯）。能夠快速使用WEEX最新功能，可以根據自己項目的特性進行相關改進。

Andorid通過以下步驟import SDK

下載源碼 
git clone https://github.com/apache/incubator-weex.git創建 Android 工程。通過以下路徑引入 SDK Module：
File->New-Import Module-> 選擇 WEEX SDK Module(weex/android/sdk) -> Finish設置app 的 build.gradle，添加如下依賴:
compile project(':weex_sdk')

iOS通過以下步驟import SDK

自己編譯好SDK后，將sdk（framework文件）導入自己app工程：
,參考官方文檔：https://weex.apache.org/cn/guide/integrate-to-your-app.html

Q: 如何自己編譯week SDK

一般來說，推薦使用官方正式發布的week-sdk庫（android通過jcenter引入sdk，ios通過cocoaspod引入sdk），只有希望使用最新的weex功能時才需要自己手工編譯SDK

編譯sdk方法有兩個，一種是用提供的編譯腳本進行自動編譯（請參考代碼庫中的HOW-TO-BUILD.md），一種是用android studio或xcode手工編譯

Andorid通過以下步驟編譯并生成 SDK

下載源碼 
git clone https://github.com/apache/incubator-weex.git在Android Studio中打開Weex SDK選擇打開已存在的andorid項目：
(weex/android/sdk) 選中代碼目錄中的weex_sdk模塊
Build -> make moudle weexsdk編譯后的sdk：weex_sdk-debug.aar(位于weex/android/sdk/build/outputs/aar/)

iOS通過以下步驟編譯 SDK

git clone https://github.com/apache/incubator-weex.git打開 WeexSDK.xcodeproj in weex/ios/sdk
切換到WeexSDK_MTL target編譯當前target，可以直接用快捷鍵 ? + b最后找到產物在 weex/ios/sdk/Products 目錄