【现货速发】WEEX跨平台开发实战

近年来，伴随着大前端概念的提出和兴起，移动端和前端的边界变得越来越模糊，一大批移动跨平台开发框架和模式涌现出来。从早期的PhoneGap、Inoic 等Hybrid技术，到现在耳熟能详的React Native、WEEX和Flutter等跨平台技术，无不体现着移动端开发的前端化。

作为阿里巴巴开源的一套移动跨平台技术框架，WEEX框架初是为了解决移动开发过程中频繁发版和多端研发的问题而开发的。具体来说，使用WEEX提供的跨平台开发技术，开发者可以很方便地使用Web前端技术来构建高性能、可扩展的原生性能体验，并支持在Android、iOS和Web等多平台上进行部署。

作为目前主流的跨平台技术框架之一，WEEX项目使用Vue.js进行编写，对于熟悉Web前端开发的开发者来说，其是一个不错的选择。在性能和项目迭代方面，WEEX与PhoneGap、Inoic等Hybrid技术相比也有一定的优势。

不过由于种种原因，WEEX的社区生态并不是很完善，也没有一本系统介绍WEEX的书籍。基于对跨平台技术的热爱，以及积累的一些WEEX项目实战经验，笔者思量再三决定对WEEX框架进行系统的梳理，并将其整理成书。

“路漫漫其修远兮，吾将上下而求索。”通过对WEEX技术的学习和本书的写作，笔者深刻地意识到“学无止境”的含义。如果本书对你学习WEEX有所帮助和启发，笔者将不胜欣慰。

如何阅读本书

本书共分为9章，章节概要如下。

第1章～第4章：这4章属于WEEX入门与基础部分。这部分内容主要包括WEEX简介、WEEX环境搭建、WEEX基础知识以及WEEX开发常用的组件和模块等内容。同时，本部分内容配备了大量的实例，通过这部分内容的学习，读者将会对WEEX有一个基本的认识。

第5章～第8章：这4章属于WEEX进阶部分。这部分内容主要由讲述Rax、Vue.js、BindingX和WEEX Eros的章节组成，主要是介绍WEEX开发中的一些进阶知识。同时，为了加快WEEX的开发效率，建议开发者直接使用WEEX Eros和weexplus等WEEX脚手架。

第9章：这一章属于WEEX项目实战部分。这部分讲述了WEEX项目实战的内容，是对WEEX基础知识的综合运用。通过此部分的知识讲解，读者将会对WEEX有一个全面的认识。

希望通过本书的讲解，读者可以对WEEX技术有一个全面的了解，并能够使用它进行移动跨平台项目的开发。

适读人群

本书是一本关于WEEX入门与实战的书籍，适合前端开发者和移动Android/iOS开发者阅读。因此，不管你是一线移动开发工程师，还是有志于从事移动开发的前端开发者，都可以通过学习本书来获取移动跨平台开发的技能。

近年来，伴随着大前端和移动跨平台技术的兴起，移动应用的开发手段越来越多，常见的移动跨平台技术有React Native、WEEX和Flutter等。WEEX是由阿里巴巴研发的一套移动跨平台技术框架，目的是解决移动应用开发过程中频繁发版和多端研发的问题。本书是一本系统介绍WEEX跨平台应用开发的书籍，涵盖了WEEX开发的方方面面，主要由基础知识、高级应用开发和项目实战三部分组成。*部分重点介绍WEEX开发的基础知识，后两部分则重点介绍WEEX开发的进阶知识和项目实战。本书是一本WEEX入门与实战系列类的书籍，适合有一定前端开发基础或者移动端开发基础的读者阅读。因此，无论你是前端开发者，还是移动端开发者，都可以通过对本书的学习来获取掌握移动跨平台应用开发的技能。

向治洪，平安健康资深前端工程师，擅长移动应用和前端跨平台开发，在Android系统开发和后端Web开发方面也有深入研究。长期活跃于各大技术论坛，拥有csdn专栏作家、云栖社区版主和掘金联合编辑等称号，发布的文章涉及前端的方方面面。曾在多家互联网公司担任技术经理和资深工程师的职位，出版的《React Native移动开发实战》和《Kotlin入门与实战》深受读者好评。

目录 

第1章 WEEX简介 1 
1.1　WEEX简介 1 
1.1.1　原生平台与Web平台的差异 1 
1.1.2　设计理念 2 
1.1.3　WEEX工作原理 3 
1.2　移动跨平台技术剖析 4 
1.2.1　React Native 5 
1.2.2　Flutter 6 
1.2.3　PWA 8 
1.2.4　对比与分析 8 
1.3　本章小结 9 
第2章 WEEX快速入门 10 
2.1　安装与配置WEEX 10 
2.1.1　安装依赖 10 
2.1.2　创建项目 12 
2.1.3　开发与运行项目 13 
2.1.4　集成到iOS 16 
2.1.5　集成到Android 20 
2.1.6　WEEX语法插件 22 
2.2 在WEEX中使用Vue.js 25 
2.2.1 与Web平台的异同 25 
2.2.2 单文件组件 26 
2.2.3 WEEX支持的Vue.js功能 27 
2.3　WEEX调试 29 
2.3.1　weex-toolkit简介 29 
2.3.2　weex-devtool远程调试 32 
2.3.3　集成weex-devtool到iOS 35 
2.3.4　集成weex-devtool到Android 37 
2.4　本章小结 42 
第3章 WEEX基础知识 43 
3.1　基本概念 43 
3.1.1　组件 43 
3.1.2　模块 44 
3.1.3　适配器 45 
3.2　样式 46 
3.2.1　盒模型 46 
3.2.2　弹性布局 49 
3.2.3　定位属性 57 
3.2.4　2D转换 59 
3.2.5　过渡 60 
3.2.6　伪类 62 
3.2.7　线性渐变 63 
3.2.8　文本样式 66 
3.3　事件 66 
3.3.1　通用事件 66 
3.3.2　事件冒泡 69 
3.3.3　手势 70 
3.4　扩展 71 
3.4.1　HTML5扩展 71 
3.4.2　Android扩展 73 
3.4.3　iOS扩展 76 
3.4.4　iOS扩展兼容Swift 79 
3.5　本章小结 81 
第4章 组件与模块 82 
4.1　内置组件 82 
4.1.1　＜div＞组件 82 
4.1.2　＜scroller＞组件 84 
4.1.3　＜refresh＞组件 85 
4.1.4　＜loading＞组件 86 
4.1.5　＜list＞组件 87 
4.1.6　＜recycle-list＞组件 91 
4.1.7　＜video＞组件 95 
4.1.8　＜web＞组件 97 
4.2　内置模块 100 
4.2.1　DOM模块 100 
4.2.2　steam模块 102 
4.2.3　modal模块 103 
4.2.4　animation模块 105 
4.2.5　navigator模块 107 
4.2.6　storage模块 108 
4.3　Weex Ui详解 110 
4.3.1　Weex Ui简介 110 
4.3.2　＜wxc-minibar＞组件 111 
4.3.3　＜wxc-tab-bar＞组件 113 
4.3.4　＜wxc-tab-page＞组件 117 
4.3.5　＜wxc-ep-slider＞组件 119 
4.3.6　＜wxc-slider-bar＞组件 121 
4.4　本章小结 123 
第5章 Rax框架详解 124 
5.1 Rax简介 124 
5.2 Rax快速入门 125 
5.2.1 搭建环境 125 
5.2.2 基本概念 127 
5.2.3 FlexBox与样式 128 
5.2.4 事件处理 129 
5.2.5 网络请求 131 
5.3 Rax组件 133 
5.3.1 ＜View＞组件 133 
5.3.2 ＜Touchable＞组件 134 
5.3.3 ＜ListView＞组件 136 
5.3.4 ＜TabHeader＞组件 139 
5.3.5 ＜Tabbar＞组件 143 
5.3.6 ＜Switch＞组件 146 
5.3.7 ＜Slider＞组件 148 
5.4 本章小结 150 
第6章 Vue.js框架详解 151 
6.1 Vue.js简介 151 
6.2 Vue.js快速入门 152 
6.2.1 搭建环境 152 
6.2.2 Vue.js项目的目录结构 154 
6.2.3 Vue.js实例 155 
6.2.4 模板 156 
6.2.5 数据 157 
6.2.6 方法 158 
6.2.7 生命周期 159 
6.3 基础特性 162 
6.3.1 数据绑定 162 
6.3.2 模板渲染 163 
6.3.3 事件处理 166 
6.4 指令 169 
6.4.1 v-bind指令 169 
6.4.2 v-model指令 170 
6.4.3 v-on指令 172 
6.4.4 v-cloak指令 174 
6.4.5 v-once指令 174 
6.4.6 自定义指令 174 
6.5 过滤器 178 
6.5.1 过滤器注册 178 
6.5.2 自定义过滤器 178 
6.5.3 过滤器串联 179 
6.6 Vue.js组件 180 
6.6.1 组件基础 180 
6.6.2 组件扩展 181 
6.6.3 组件注册 181 
6.6.4 组件选项 183 
6.6.5 组件通信 185 
6.6.6 动态组件 187 
6.6.7 缓存组件 188 
6.6.8 异步组件 189 
6.7 vue -router 191 
6.7.1 安装与配置 191 
6.7.2 基本用法 192 
6.7.3 路由匹配 193 
6.7.4 嵌套路由 194 
6.7.5 命名路由 196 
6.7.6 路由对象 197 
6.7.7 路由属性与方法 197 
6.7.8 路由传参 199 
6.8 本章小结 200 
第7章 BindingX框架 201 
7.1 BindingX简介 201 
7.1.1 基本概念 201 
7.1.2 背景 202 
7.2 BindingX框架快速上手 203 
7.2.1 快速入门 203 
7.2.2 手势 204 
7.2.3 动画 208 
7.2.4 滚动 211 
7.2.5 陀螺仪 213 
7.3 API 215 
7.3.1 事件类型 215 
7.3.2 表达式 217 
7.3.3 目标属性 217 
7.3.4 插值器 218 
7.3.5 颜色函数 218 
7.4 本章小结 219 
第8章 WEEX Eros App开发实战 220 
8.1 WEEX Eros简介 220 
8.2 快速入门 220 
8.2.1 搭建环境 221 
8.2.2 创建工程 221 
8.2.3 运行项目 222 
8.2.4 Eros示例 225 
8.2.5 工程配置 227 
8.2.6 开发调试 231 
8.2.7 增量发布 232 
8.3 组件 232 
8.3.1 globalEvent 232 
8.3.2 Axios 233 
8.3.3 Router 236 
8.3.4 storage 239 
8.3.5 event 242 
8.3.6 image 244 
8.3.7 notice 245 
8.3.8 自定义组件 247 
8.4 模块 248 
8.4.1 模块概念 248 
8.4.2 bmEvents 249 
8.4.3 bmWebSocket 250 
8.4.4 bmBundleUpdate 253 
8.5 开发配置 253 
8.5.1 Android原生配置 254 
8.5.2 Android打包配置 255 
8.5.3 iOS原生配置 257 
8.5.4 iOS打包配置 258 
8.6 插件 260 
8.6.1 Android插件化 260 
8.6.2 iOS插件化 261 
8.6.3 基础插件 265 
8.6.4 微信插件 266 
8.6.5 高德插件 269 
8.7 热更新 272 
8.7.1 热更新原理 272 
8.7.2 热更新配置 273 
8.7.3 热更新实战 275 
8.8 本章小结 278 
第9章 移动电商应用开发实战 279 
9.1 项目概述 279 
9.2 搭建项目 279 
9.2.1 新建项目 279 
9.2.2 编写主框架 280 
9.2.3 Iconfont 283 
9.2.4 自定义选项卡组件 286 
9.2.5 路由配置 288 
9.2.6 数据请求 289 
9.3 功能编写 290 
9.3.1 首页开发 290 
9.3.2 广告弹窗开发 292 
9.3.3 商品详情页开发 294 
9.3.4 订单管理页开发 296 
9.3.5 适配iPhone X 299 
9.4 打包与上线 302 
9.4.1 更换默认配置 302 
9.4.2 iOS打包 303 
9.4.3 Android打包 305 
9.5 本章小结 307

近年来，伴随着大前端和移动跨平台技术的兴起，移动应用的开发手段越来越多，常见的移动跨平台技术有React Native、WEEX和Flutter等。WEEX是由阿里巴巴研发的一套移动跨平台技术框架，目的是解决移动应用开发过程中频繁发版和多端研发的问题。本书是一本系统介绍WEEX跨平台应用开发的书籍，涵盖了WEEX开发的方方面面，主要由基础知识、高级应用开发和项目实战三部分组成。*部分重点介绍WEEX开发的基础知识，后两部分则重点介绍WEEX开发的进阶知识和项目实战。本书是一本WEEX入门与实战系列类的书籍，适合有一定前端开发基础或者移动端开发基础的读者阅读。因此，无论你是前端开发者，还是移动端开发者，都可以通过对本书的学习来获取掌握移动跨平台应用开发的技能。

向治洪，平安健康资深前端工程师，擅长移动应用和前端跨平台开发，在Android系统开发和后端Web开发方面也有深入研究。长期活跃于各大技术论坛，拥有csdn专栏作家、云栖社区版主和掘金联合编辑等称号，发布的文章涉及前端的方方面面。曾在多家互联网公司担任技术经理和资深工程师的职位，出版的《React Native移动开发实战》和《Kotlin入门与实战》深受读者好评。

本书应该是WEEX社区率先推出的关于WEEX开发的入门书籍，它比较完整地介绍了WEEX开发框架的知识结构、生态工具的原理和使用。本书也是对WEEX社区现有学习资料的一个比较好的补充，可以给对WEEX开发感兴趣的或刚接触WEEX开发的同学带来一定的启发和帮助。

——Apache WEEX项目负责人 郑士汉

本书比较系统地介绍了WEEX框架的各个知识点，适合快速入门，对现有的WEEX社区资料起到了阶段性的补充作用。希望对WEEX感兴趣的同学不要错过本书！

——weexplus开源项目负责人 郑江荣

本书很全面地讲解了WEEX框架的知识，并且脉络清晰。如果你是一名WEEX新手，通过本书来入门是不错的选择。如果你有WEEX开发经验，把本书当成知识字典使用也非常合适。本书不仅对理论知识进行了详细解读，还使用了大量案例进行辅助说明，可以让你轻松掌握WEEX知识，达到能够胜任实际工作的水平。

——WEEX教学视频分享者 技术胖

本书针对性强，覆盖面广，案例详尽，写作思路清晰，精准地把握了WEEX框架的核心知识点和难点。如果读者是一名前端开发者，那么可以参考本书的案例进行技能提升。

——哔哩哔哩资深前端工程师 王海洋

WEEX作为阿里巴巴推出的跨平台开发框架，已经被大量使用在阿里巴巴系产品的开发中。本书详尽全面地介绍了WEEX开发中所要用到的各个知识点，是前端开发者入门WEEX应用开发的优秀读物。

——阿里巴巴WEEX资深开发工程师 谷宝剑