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. 页面降级
性能监控和埋点
增量更新和全量更新
首屏加载时间极致优化
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 EnableLanguageCMake 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 目录
Q: 能否将 vue 项目结构转换成 weex 项目？
Q: Weex 中的组件（component），模块（module），扩展，三者有何区别？
组件一般指的是 UI 组件，module 相当月插件，提供一些工具方法。扩展指的是开发组件的过程
Q: 如何编译 weex 的 playground app？
直接用 android studio 打开 android/palyground 项目即可
Q: 解决 iOS WeexSDK 与 WechatSDK 中枚举 WXLogLevel 命名冲突
https://bmfe.github.io/2018/0…
工程化
将 components 抽离出来，放到内部私有 npm 仓库中以 npm 包的形式去维护。也就是我们将 spon-ui（内部组件库名称）作为单独的一个项目去维护，加以约束形成组件库开发规范
作者：尚妆产品技术刊读链接：https://juejin.im/post/5a2d3d…
WeexBox FAQ
Q: 如果报错说 lotties 找不到某些文件，可能是需要升级 cocaspods 到 1.6.0could not build Objective-C module ‘Lottie
sudo gem install cocoapods
Q: ERROR: Failed to download Chromium r624492! Set “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD” env variable to skip download.