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