博客

react将html代码字符串转化为html_Taro 发布 3.0 RC ：支持 React / Vue / Nerv

  • Post author:
  • Post category:vue

作者：余澈

在 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

选择想要转换后的框架即可：

v2-8a8e7a948f298137342cb1a53a60e795_b.jpg

渲染 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) 的视图，非可视区域的视图在用户滚动到可视区域再渲染：

v2-7c21394d91b861eb5894f7b2e455096f_b.jpg

正常渲染和虚拟列表的区别

undefined_b.gif

在开发者工具的直观效果

类似的技术在 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），不定时推送文章。