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 目录