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 第三方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开发的网易严选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快速创建工程 Hello World
- 【Weex】网易严选 App 感受 Weex 开发
- 记一次 Weex 的 iPhone X 适配
- 【Weex】纯 Weex 开发一个小游戏
- Weex BindingX 尝鲜
- 使用BindingX开发客户端炫酷动画
- 使用 Weex 和 Vue 开发原生应用
教程
进阶教程
技术文章
https://github.com/joggerplus...
- 网易严选 App 感受 Weex 开发
- Weex实战分享|企鹅电竞Weex实践和性能优化
- [Weex实战分享|Weex在极客时间APP中的实践

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

Weex BindingX 尝鲜
拥抱大前端——从Weex开始

知识树

重点关注的知识点

页面传参
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 目录

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.0
could 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.

全球的weex资源都在这里