React/Vue/Nerv 任你选,多端框架 Taro 发布 3.0 RC 版本
作者:余澈
在 Taro Next 预览版(Alpha)版本之后,我们没有停下迭代的步伐,经过两个月的开发和数百次提交之后,我们谨慎但坚定地发布 Taro Next 测试(Beta) 版,Beta 版发布后,社区很多开发者使用上了 Taro Next,他们的帮助和赞誉加上我们内部项目使用的良好反馈,Beta 发布一个月之后,我们非常自信地发布了候选版(RC)版本。
在稳定的 Beta 版本里,Taro 也添加了更多的功能:
H5 编译支持
H5 编译支持是我们版本升级最重要的理由之一。这意味着原来开发者写的小程序应用,现在可以直接运行在 Web 中。添加 H5 支持非常简单,只需要在项目根目录安装 @tarojs/webpack-runner
,运行 taro build —type h5 —watch
即可:
$ npm i -D @tarojs/webpack-runner@next
$ taro build —type h5 —watch
和小程序一样,Taro Next 的 H5 端相较于之前版本的 Taro 是一次彻底的重写:基础组件现在全部使用 Web Components 构建,路由系统也完全与前端框架解耦,因此在 H5 端 Taro 也实现了跨框架。不管开发者使用的是 React、Vue 还是 Nerv,都可以同时运行在各种小程序和 H5 上。
微信小程序转 React/Vue
早在 Taro 1.2 发布 时,我们就提供微信小程序转 Taro 的功能,转换后的微信小程序应用会变成一个多端应用。现在这个功能也完全兼容 Taro Next 的新架构,并且转换后的代码提供 React 和 Vue 两种选项。和以前一样,只需要在微信小程序项目根目录执行命令 taro convert
:
$ taro convert
选择想要转换后的框架即可:
渲染 HTML 字符串
在小程序中渲染 HTML 字符串通常会使用 wxparse 这样的第三方库,但 wxparse
的 API 复杂,拓展性弱,内部实现不准确,最重要的是现在已经停止了维护。比起 wxparse
,Taro Next 的 HTML 字符串渲染提供以下的特性:
- API 与 Web 保持一致,可以直接通过 React 的
dangerouslySetInnerHTML
或 Vue 的v-html
调用。 - 可以通过 CSS 直接控制标签样式
- 给已经渲染的 HTML 标签绑定事件
- 在 HTML 解析和渲染都提供了钩子函数满足个性化渲染需求
你可以访问文档渲染 HTML了解更多信息。
CSS-in-JS
在 React 社区有一个著名的 CSS-in-JS 解决方案: styled-components。但遗憾的是,styled-components
使用 <style>
标签来动态地控制样式,在小程序端没有类似的方案。但在 Taro 中我们可以通过 linaria 实现同样的功能,linaria
主要提供以下特性:
- 近似于
styled-components
的 API - 完整的 TypeScript 支持
- 零运行时
其中零运行时对于打包体积有要求的小程序尤为重要。
你可以访问文档使用 CSS-in-JS了解更多信息。
虚拟列表(VirtualList)
当我们渲染数据量非常大的列表时,框架会根据数据尝试全量渲染视图,这就可能会产生性能问题导致视图无法响应操作一段时间。为了解决这个问题,我们可以采用另一种方式:比起全量渲染数据生成的视图,可以只渲染 当前可视区域(visable viewport) 的视图,非可视区域的视图在用户滚动到可视区域再渲染:
正常渲染和虚拟列表的区别 |
在开发者工具的直观效果 |
类似的技术在 Android 开发被称之为 RecyclerView,在 React Native 叫做 VirtualizedList,我们统一命名为虚拟列表(Virtual List),这个组件现在内置在 Taro 中,在 React/Vue 或各种小程序及 H5 皆可使用:
import VirtualList from '@tarojs/components/virtual-list'
你可以访问文档长列表渲染了解更多信息。
插件功能
自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业务定制个性化功能。
该特性在 Taro next 中也可以使用了,官方提供了一个简易的数据 mock 插件 @tarojs/plugin-mock
供大家参考。相关接口和介绍可以通过 官方文档 -> 进阶指南 -> 插件功能
找到。
向正式版前进
在 Beta 版本发布之后,除了 React Native 端兼容这一特性在迭代,我们主要的精力投入到 Taro 本身的开源治理和项目治理中,为了保证重大特性更新和架构更改能够顺利推进,我们推出了 Taro 的 RFC 流程机制,这将让 Taro 的进化更加透明公开,同时更多的社区参与势必让 Taro 更加完善。
期间,我们也对文档进行了升级,新文档相比旧版调整了部分目录让信息更合理,查找更方便,内容也更完善,同时也让阅读体验更加友好。
RC 版本,几乎就不会加入新的功能了,主要着重于除错,而后我们将发布正式版。也就是说:
如果你更为关注小程序端及 H5 端的开发,现在就是加入 Taro Next 最好的时机!
感谢
感谢 skywalker512 大佬
修复了 Current type definition, 删除不能使用的 useScope 定义的问题(#5764);
添加了支持 CSS Variables 的特性 (#5796);
修复了 windows 下的路径问题(#5839);
修复了 animation 定义出错的问题 (#5901)。 感谢 fupengl 大佬
修复了 webpack 配置多余参数导致 webpack,loader 参数校验失败的问题;(#5835);
修复了 react 页面卸载生命周期没有调用的问题(#5826);
修复了缺少 tt 样式文件匹配的问题;
修复了 input maxlength 拼写错误 (#6005);
修复属性数字类型 0 也是有效值 (#6027);
修复了编译原生 tt 小程序样式文件没有 loader 处理的问题 (#6088)。 感谢 wuchangming 大佬
修复了 webpack
resolve.modules
设置绝对路径导致的依赖引用错误 (#5858);修复了 Current.router 获取的数据有误的问题 (#5989)。
感谢 cncolder 大佬
- 添加 linaria 配置和 webpack 配置 (#5880);
- html typo (#5893);
- 将 rich-text 属性设置为可选;
- 增加路由信息 path 字段 (#5898);
- ui interaction 中的三个函数参数都是可选的 (#6351)。 感谢 Garfield550 大佬
- 给 api 增加 cjs 分发,规范部分包的文件包含 (#5991) ;
- 修复组件 animation 属性和 Animation.export() 方法的类型(#6025) 。 感谢fishead 添加了 framework 检查 (#5977); 感谢 alexloading 大佬修改了 nextTick 适配小程序 setData 回调#5978; 感谢 hvsy 、cuikangyi、 yesmeck、Psli 大佬 。
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:
React/Vue/Nerv 任你选,多端框架 Taro 发布 3.0 RC 版本相关推荐
- vue2.0桌面端框架_vue 专题 vue2.0各大前端移动端ui框架组件展示
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
- 【小程序】多端框架Taro实现外卖首页
文章目录 全局安装Taro命令行工具 创建模板项目 安装其他第三方依赖 代码目录 详细代码 修改index.jsx 新增目录 assets/images 新增commons/utils/utils.j ...
- 小程序跨端框架(taro/uni-app/kbone)横评之2020版
文章转自:https://www.cnblogs.com/hupingzui/p/12692509.html 微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心:又是新的一年过去了,小程序开发 ...
- 小程序跨端框架(taro/uni-app/kbone)横评之2020版(对比很到位!!)
小程序跨端框架(taro/uni-app/kbone)横评之2020版 微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心:又是新的一年过去了,小程序开发领域又有哪些新的变化?我们来看如下最新 ...
- React 18 RC 版本发布啦,生产环境用起来!
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从本人接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能 ...
- 前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
- 「前端架构」React,Angular还是Vue,太难选了?看完秒懂。
我们必须承认,我们在这些框架方面有着极不平等的经验.然而,我们将尽量保持公正,并弄清楚React何时可能不是最佳选择,但首先,简短介绍: React是Facebook维护的最流行的框架.所有的酷孩子, ...
- 深入研究vue还是再学react,vue 和 react 哪个前景好
各位前辈,如今学vue还是react呢,感觉vue是国产的,迟早超越react,但是适合做APP吗? 1.首先国内很多公司近年来对vue的使用呈上升态势的.也有使用vue通过不同的打包方式打包成app ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
最新文章
- python 内存不足 dict 替代方案_2D数组代表一个巨大的python dict,COOrdinate就像解决方案来节省内存...
- Oracle不使用索引的几种情况列举
- PHP服务器脚本实例,Shell脚本实现的一个简易Web服务器例子分享_linux shell
- 深度学习(十五)——SPPNet, Fast R-CNN
- 【英语学习】【Level 08】U04 What I love L3 A good buy
- LeetCode(437)——路径总和 III(JavaScript)
- C语言 main函数参数 argc,argv 用处,控制台应用程序模板2
- 云服务器的安全组各个端口代表什么意思?
- Python对文本文件的简单操作(一)
- [C] static和extern的作用
- python双人格斗游戏代码_百行 HTML5 代码实现四种双人对弈游戏
- web打包app(h5+app)版本自动更新的实现
- TCPDF支持php7,php – 我不能要求tcpdf库
- 51单片机彩灯控制器的设计(含源代码、编译过的 HEX 文件以及仿真图)
- 导出文件浏览器不自动下载文件
- python实现华氏温度和摄氏温度转换
- SVN入门教程,超简单,30分钟学会!
- War3地图编辑器基础:玩家设置+地图元素的属性设置+地图事件设置
- 免费在线生成二维码网站,支持二维码自定义
- amd显卡用黑苹果输出黑屏_微星HD7850显卡DVI接口黑屏,改DSDT无果
热门文章
- 【Flutter小记3】Android打开前置或广角摄像头的同时打开闪光灯方案
- ping 127.0.0.1和ping本地ip、ping网关、ping远程网站分别测试什么
- 3.9 Primitive Obsession 基本类型偏执
- 安卓电视/平板玩街机游戏
- 误差条图各部分的代表意思_【小强视界】混凝土搅拌站计量误差原因分析及控制措施...
- 竖流式沉淀池三角堰计算_一种辐流式沉淀池的双侧堰出水构造的制作方法
- 远程手机控制开关应用
- 一般熟练盲打需要多久_练习拼音打字练到[盲打]的境界一般需要多久(时间)?...
- 【综述】计算机视觉简介:历史、现状和发展趋势【可下载】
- spyder替换_Spyder简单使用