谢晓立 使用 Taro 快速构建多端应用

前端狗

2019/01/19 发布于 技术 分类

文字内容
1. 使用 Taro 快速构建多端应用 aotu.io
2. 京东商城-商城⽤用户体验设计部-多终端研发部 在 15 年年 10 ⽉月份推出「凹凸实验室」品牌, 旨在对外输出团队的前端能⼒力力及技术理理念。
3. 使用 Taro 快速构建多端应用 taro.aotu.io 1 为什么开发 2 快速上手 3 设计思想 4 适配原理 5 最佳实践 6 探索
4. 小程序业务需求增加 京东购物 TOPLIFE 7FRESH 壹赫兹 荐⼀一物 京东购物主体⼩小程序 国际奢饰品电商平台 ⽣生鲜⻝⾷食品超市 短视频导购⼩小程序 杂志类导购⼩小程序
5. 原生小程序的痛点 代码组织复杂 规范不统一 文件目录复杂 命名规范不统一 孱弱的字符串模板 落后的开发方式 逻辑表现力不强 缺少完整的工程化流程 不完全的ES Next 依赖管理混乱 仅支持部分esnext语法 *缺少npm依赖管理
6. 业界方案 WePY mpvue React?
7. 多端的需求 weapp React Native Web端 ?
8. 多端的需求 weapp Web端 研发成本上升 React Native 百度智能小程序 代码维护困难 支付宝小程序 字节跳动小程序
9. 语法风格 多端运行 React语法,支持JSX 小程序、h5、RN等 组件化 TypeScript 天生组件化,支持复用 全面支持TypeScript 开发体验 现代化开发流程 实时代码提示与检查 配套cli工具,现代化的开发流程 Taro 多端统一开发框架
10. 使用 Taro 快速构建多端应用 taro.aotu.io 1 为什么开发 2 快速上手 3 设计思想 4 适配原理 5 最佳实践 6 探索
11. 快速上手 1 初始化项目 2 编写代码
12. 快速上手 3 跑起来!
13. 快速上手 https://github.com/EasyTuan/taro-msparis
14. 使用 Taro 快速构建多端应用 taro.aotu.io 1 为什么开发 2 快速上手 3 设计思想 4 适配原理 5 最佳实践 6 探索
15. 用 React 写多端应用
16. 用 React 写多端应用 React 转 多端应用 微信小程序 WXML JS Web HTML JS React 转换 支付宝小程序 AXML JS 百度智能小程序 SWAN JS …
17. render 函数处理 小程序端处理 JSX WXML
18. render 函数处理 小程序端处理 JSX JS
19. render 函数处理 H5端处理 JSX <View /> ? <Swiper /> ?
20. 用 React 写多端应用 设计思想 代码转换 运行时适配 使代码可以在不同平台上运行 使代码在不同平台上有相同表现
21. 使用 Taro 快速构建多端应用 taro.aotu.io 1 为什么开发 2 快速上手 3 设计思想 4 适配原理 5 最佳实践 6 探索
22. 适配原理 多端差异介绍 多端适配原理
23. 多端差异对比 以Web与小程序为例 基础框架 标准组件库 标准Api 生命周期、组件api、 事件机制 view、button request、…
24. 基础框架 生命周期 小程序生命周期 调用实际 React生命周期 调用时机 created 组件实例创建时 componentWillMount 组件即将挂载 attached 组件进入节点树 componentDidMount 组件挂载完成 ready 完成视图层布局 shouldComponentUpdate 判断是否需要更新视图 moved 组件实例在节点树中被移动 componentWillUpdate 组件视图即将更新 detached 组件从节点树中移除 componentDidUpdate 组件视图已经更新 error 组件函数抛出错误时 componentDidCatch 捕获错误
25. 基础框架 组件Api 小程序组件Api 作用 React 组件Api 作用 setData 设置组件数据 setState 设置组件数据 triggerEvent 触发自定义事件 forceUpdate 刷新组件视图
26. 组件 小程序组件 作用 Web 组件 作用 view 容器组件 div 块级元素标签 text 文字组件 span ⾏行行内元素标签 image 图片组件 a 超链接标签 icon 图标组件 table 表格标签 swiper 轮播组件 ul ⽆无序列列表 button 按钮组件 p 段落标签
27. Api 小程序Api 作用 H5 Api 作用 wx.getStore 获取本地存储 window.localStorage 本地存储 wx.setStore 设置本地存储 window.fetch 网络请求 wx.request 网络请求 window.navigator 浏览器相关信息 wx.downloadFile 下载文件 window.open 打开新页面 wx.uploadFile 上传文件 window.location 文档当前位置信息
28. 多端差异对比 基础框架 标准组件库 标准Api 生命周期、组件api、 事件机制 view、button request、…
29. 多端适配原理介绍 多端差异介绍 多端适配原理
30. 多端适配基础架构 H5 组件库 RN 组件库 快应⽤用 组件库 H5 API … RN API 快应⽤用 API Taro 基础标准 Taro bootstrap Taro 组件库 ⼩小程序 框架 H5 框架 RN 框架 快应⽤用 框架 Taro 标准API … …
31. 多端适配完整架构 编译时 Taro 转微信⼩小程序代码 Taro 转 H5 代码 Taro 转 RN 代码 …. 代码编译 ⽬目标代码 运⾏行行时 Taro bootstrap 微信⼩小 程序 Taro 组件库 H5 RN 适配 多端应⽤用 Taro API 快应⽤用 …
32. 多端适配原理 基础框架 标准组件库 标准Api 生命周期、组件api、 事件机制 view、button request、setStorage
33. 基础框架 基础生命周期 componentWillMount componentDidMount 补充生命周期 shouldComponentUpdate componentDidShow componentWillUpdate componentDidHide 生命周期 以React生命周期为基础 小程序的生命周期作为补充 componentWillRecieveProps componentDidCatch
34. 基础框架 在小程序端实现React生命周期 componentDidShow onShow componentDidHide onHide componentWillMount onLaunch componentDidMount . . .
35. 基础框架 在小程序端实现React生命周期 React
36. 基础框架 在小程序端实现React生命周期 1 向子组件传递私有属性 2 子组件监听私有属性 供子组件监听 利用属性observer机制 3 属性更新时反转私有属性 触发属性的observer this.setData({}) __prop = !__prop observer()
37. 基础框架 在Web端补充小程序的生命周期 componentDidMount componentDidShow componentWillUnmount componentDidHide componentDidMount componentWillUnmount
38. 基础框架 标准组件Api React组件Api 作用 setState 设置组件数据层 forceUpdate 刷新组件视图 以React的组件Api为标准
39. 基础框架 JS
40. 基础框架 视图层 逻辑层 evaluateJavascript WebView 渲染载体 JSCore/V8 运⾏行行环境
41. 基础框架 优化setState性能 避免频繁setData 减少setData数据量
42. 基础框架 优化setState性能 1 避免频繁setData setState 合并 setState setState … setData
43. 基础框架 优化setState性能 2 减少setData数据量 原始数据 this.state = { a: [1, 1], b: { x: 1 } } this.setState({ a: [1, 2, 3], b: { x: 10 } }) 数据 diff 数据路径更新 this.setData({ 'a[2]': 2, 'a[3]': 3, 'b.x': 10 })
44. 基础框架 事件机制 事件机制 以React的事件机制为标准 各端模拟实现
45. 基础框架 在小程序端实现事件回调函数的bind功能 1 通过event.dataset传递
46. 基础框架 在小程序端实现事件回调函数的bind功能 2 从dataset获取参数进行调用
47. 多端适配原理 基础框架 标准组件库 标准Api 生命周期、组件api、 事件机制 view、button request、…
48. 标准组件库 <View /> 标准组件库 以微信小程序组件为标准 各端模拟实现 属性名 说明 hover-class 指定按下去的样式类。当 hoverclass="none" 时,没有点击态效果 hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态 hover-start-time 按住后多久出现点击态,单位毫秒 hover-stay-time 手指松开后点击态保留时间,单位毫秒
49. 标准组件库 以微信小程序组件为标准,各端模拟实现 <View /> H5端组件实现 camel-case 属性名 说明 hover-class 指定按下去的样式类。当 hoverclass="none" 时,没有点击态效果 hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态 hover-start-time 按住后多久出现点击态,单位毫秒 hover-stay-time 手指松开后点击态保留时间,单位毫秒
50. 多端适配原理 基础框架标准 标准组件库 标准Api 生命周期、组件api、 事件机制 view、button request、…
51. 标准Api 标准Api 扩展的小程序标准Api 各端模拟实现 https://github.com/wechat-miniprogram/api-typings
52. 标准Api 扩展微信小程序的标准Api function request(option: RequestOption): RequestTask function request(OBJECT: Param): Promise<Result> callback hell Promisify 并发请求限制 请求队列
53. 多端适配原理 基础框架 生命周期、组件api 标准组件库 view、button 标准Api request、setStorage 以React的生命周期、组件api为基础,小程序的特性作为补充 以微信小程序组件为标准,各端模拟实现 扩展的小程序标准Api,各端模拟实现
54. 把小程序代码转换为Taro代码 Taroize
55. Taroize 基本架构 运行时适配 代码转换 基础框架 JS JSX WXML 组件库 Api
56. Taroize 成功案例 EastWorld/wechat-app-mall tumobi/nideshop-mini-program STAR 5000+ STAR 3000+ 微信小程序商城 基于 Node.js、MySQL 开源微信小程序商城 RebeccaHanjw/weapp-wechat-zhihu jectychen/wechat-v2ex STAR 1000+ STAR 400+ 仿知乎 仿V2EX
57. 赋予小程序适配多端的能力 无缝衔接小程序的开源生态
58. 使用 Taro 快速构建多端应用 taro.aotu.io 1 为什么开发 2 快速上手 3 设计思想 4 适配原理 5 最佳实践 6 探索
59. 多端开发最佳实践 原理上的限制 weapp h5
60. 多端开发最佳实践 配置 编码 优化
61. 多端开发最佳实践 配置篇 配置designWidth,px单位可以具有自动适配的能力
62. 多端开发最佳实践 配置篇 配置designWidth,px单位可以具有自动适配的能力 小程序 rpx px PX H5 rem px
63. 多端开发最佳实践 配置 编码 优化
64. 多端开发最佳实践 编码篇 state data props state不可与props重名
65. 多端开发最佳实践 编码篇 props内的函数须以’on’开头 无法打印props内的函数
66. 多端开发最佳实践 编码篇 仅支持使用map操作JSX数组
67. 多端开发最佳实践 编码篇 Children、组合都是read-only
68. 多端开发最佳实践 编码篇 props内的函数须以’on’开头 eslint 仅支持使用map操作JSX数组 taro/this-props-function Children、组合都是read-only taro/manipulate-jsx-as-array state不可与props重名 taro/render-props 无法打印props内的函数
69. 多端开发最佳实践 配置 编码 优化
70. 多端开发最佳实践 优化篇 shouldComponentUpdate PureComponent componentWillPreload 使用componentWillPreload预加载数据
71. 多端开发最佳实践 优化篇 使用shouldComponentUpdate优化性能
72. 多端开发最佳实践 优化篇 使用PureComponent优化性能
73. 多端开发最佳实践 优化篇 使用componentWillPreload预加载数据
74. 多端开发最佳实践 优化篇 使用process.env.TARO_ENV减少冗余代码 process.env.TARO_ENV weapp / h5 / rn / alipay / swan / tt if (process.env.TARO_ENV === 'weapp') { require('./weapp.js') } else if (process.env.TARO_ENV === 'h5') { require('./h5.js') }
75. 使用 Taro 快速构建多端应用 taro.aotu.io 1 为什么开发 2 快速上手 3 设计思想 4 适配原理 5 最佳实践 6 探索
76. 持续支持 持续支持更多终端 …
77. 持续优化 优化打包模式 x
78. 持续跟进 持续跟进新的 React 特性 新的生命周期 新的特性
79. launched on Ta r o issue star commit 2018.6 遵循 React 语法规范的 多端统一开发框架 open 260 closed1277 13239 3386