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.
发表回复