当 weex 遇上 vue.js 2当 weex 遇上 vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女...
TRANSCRIPT
![Page 1: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/1.jpg)
当 Weex 遇上 Vue.js 2.0马天翼(早弦)
![Page 2: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/2.jpg)
● 男
● 1994● 爱好: 女
● 国立武汉大学
● @weibo: 马天翼mfe● 阿里巴巴单身伪前端开发
![Page 3: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/3.jpg)
![Page 4: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/4.jpg)
相遇之前weex 1.0 时代
![Page 5: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/5.jpg)
总体流程
.we 编译 bundle .js 解析与执行js framework
指令通信iOS & Android engine
页面渲染weex 页面
![Page 6: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/6.jpg)
Bundle 编译
webpack 打包
![Page 7: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/7.jpg)
为什么使用 .we 文件而不是直接写 .js 文件?
1. 我们的用户群
2. 预处理的能力
主要是还是因为简单易用。
![Page 8: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/8.jpg)
JS Framework1. 如何解析 Bundle 字符串?
2. 如何将内容映射到内存模型?
3. 哪些信息要与 Native 进行通信?
![Page 9: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/9.jpg)
解析 Bundle
● eval ● new Function ● Native new Function
![Page 10: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/10.jpg)
内容映射到内存模型
MVVM
改变宽高 滚动行为 表单输入
行为结果
![Page 11: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/11.jpg)
与 Native 通信
普通行为结果 Native增加元素、调整元素
需要反馈的行为结果 Native请求数据、打开视频
回调
![Page 12: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/12.jpg)
渲染方式 append tree or node
商品列表的展示?
游戏场景的展示?
视频组件的展示?
首屏 tree ,非首屏 node
![Page 13: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/13.jpg)
与 Native 通信
普通行为结果 Native增加元素、调整元素
需要反馈的行为结果 Native请求数据、打开视频
回调
![Page 14: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/14.jpg)
任务中心 TaskCenter
MVVM
任务中心
Native
普通参数
函数参数
任务
回调分发
![Page 15: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/15.jpg)
总体流程
.we 编译 bundle .js 解析与执行js framework
指令通信iOS & Android engine
页面渲染weex 页面
![Page 16: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/16.jpg)
相遇之后weex 2.0 时代
![Page 17: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/17.jpg)
一个 .vue 文件的骄傲
.vue 文件渲染成 weex 页面
![Page 18: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/18.jpg)
总体流程
.vue 编译 bundle .js
指令通信iOS & Android engine
页面渲染weex 页面
解析与执行vue 2.0 core
weex runtime
![Page 19: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/19.jpg)
Bundle 编译差异
render function
vue-loader
![Page 20: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/20.jpg)
与 web 版本 vue 2.0 的差异点
● DOM
● BOM
● Layout
● scoped
● scroll
● background-image
● 适配问题
![Page 21: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/21.jpg)
DOM & BOM
● 不支持 DOM 操作
● 仅支持部分事件类型
● 不支持事件冒泡
● 没有 window、 document、screen、
history、location、navigator 等对象
![Page 22: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/22.jpg)
DOM & BOM
● 不支持 DOM 操作
● 仅支持部分事件类型
● 不支持事件冒泡
● 没有 window、 document、screen、
history、location、navigator 等对象
● MVVM 大法好!
● 未来会有更多
● 新版本已经支持
● 使用 weex.config 或者内置模块
![Page 23: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/23.jpg)
Flexbox
● Weex 官方指定布局系统
● 规范明确
● 布局适用大部分情况
● 面向未来
![Page 24: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/24.jpg)
其他差异
● 样式作用域默认是 scoped ,即只在当前组件生效
● 只有 scroller 组件默认有滚动效果
● 不能设置背景图
● 与 Native 原生组件共存的适配问题
![Page 25: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/25.jpg)
内存差异
● web 时代,内存能吃吗?
● weex 时代,内存够吃吗?
![Page 26: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/26.jpg)
内存问题
点开几次页面以后,App 崩溃了,一脸懵逼?
需要探测移动端 js 引擎的内存工具!
![Page 27: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/27.jpg)
内存小课堂
native 内存
jscore 内存
jsfm内存
![Page 28: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/28.jpg)
内存小课堂
Global
object object
object
object
native 内存
![Page 29: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/29.jpg)
苹果爸爸赐给我们的内存工具
● macOS Safari 新版
● iOS 10 以上
● 本地构建的 App,非商店下载
https://webkit.org/downloads/
![Page 30: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/30.jpg)
![Page 31: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/31.jpg)
![Page 32: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/32.jpg)
![Page 33: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/33.jpg)
![Page 34: 当 Weex 遇上 Vue.js 2当 Weex 遇上 Vue.js 2.0 马天翼(早弦) 男 1994 爱好: 女 国立武汉大学 @weibo: 马天翼mfe 阿里巴巴单身伪前端开发 相遇之前](https://reader033.vdocuments.net/reader033/viewer/2022051920/600d14b17dcec2422b0c1c13/html5/thumbnails/34.jpg)
全世界都羡慕我们 ——Vue.js
谢谢