Taro 3.3 alpha 发布：用 ant-design 开发小程序

小程序的设计并没有完全遵循 Web 规范，导致小程序生态和传统 Web 开发生态之间的割裂，海量优秀的 Web 物料并不能直接用于小程序开发。因而 Taro 在相当一段时间内生态都相对薄弱，UI 框架选择不多的问题更是深深困扰着开发者。

另一方面，业界有着存量的 H5 应用，中短期内 H5 应用适配到小程序端的需要还会存在。我们希望能减少 H5 应用迁移到小程序端的成本，甚至能够直接运行在小程序端。

Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态，直到 Taro 30 诞生后，这种想法有了落地的可能。下文将介绍基于 Taro 30 实现 H5 同构的思路与问题，以及我们尝试适配了三大移动端 UI 框架 WEUI 、 Ant Design Mobile 、 VantUI 的实验结果。

Taro 30 是一款重运行时的跨端框架，它通过模拟实现浏览器的 BOM 和 DOM API 实现了对 React、Vue 等 Web 开发框架的兼容。

既然已经有了浏览器环境的 BOM 和 DOM API，Taro 应用和 Web 应用之间的鸿沟在于小程序组件和 HTML 标签之间的差异。

Taro3 的渲染数据流如下：

前端框架 -> Taro DOM -> 小程序 data

HTML 标签和小程序组件的标签名、属性、事件是有差异的，而前端框架无需感知这些差异。

因此前端框架适配层、Taro DOM 层不需要改动，只要在 Taro DOM 序列化为小程序 data 这一步作映射即可。

HTML 标签相对小程序组件封装程度更低、功能更简单，可以看作是小程序组件的子集。因此可以按一定的规则，把 HTML 标签映射为小程序组件，如：

完整的标签名映射规则请看： RFC 附录一

如果 HTML 标签的属性能在对应小程序组件的属性上找到对应，则进行映射，如：

完整的属性名映射规则请看： RFC 附录二

把 HTML 特有的事件在小程序端找到相似的事件进行映射，如：

完整的事件映射规则请看： RFC 附录三

前文介绍了我们会把 HTML 标签映射为小程序组件，但是 H5 应用中使用到的 CSS 标签选择器就会失效。

因此 Taro 使用了类名去进行模拟：

Taro 提供两种内置的浏览器默认样式，可以直接引入生效：

理想很美好，但现实却略显骨感。即使 Taro 能实现 BOM、DOM API，支持使用 HTML 标签等，同构方案还是存在着一些框架层面抹平不了的差异。以下列举出若干主要限制：

在 H5 中我们可以调用 DOM API 同步获取元素的尺寸：

但是在小程序中，获取元素尺寸的 API 是异步的：

因此不能兼容那些使用了同步 DOM API 去获取元素尺寸的组件。

<canvas> 、 <video> 、 <audio> 等标签在 H5 端可以直接调用 HTMLElement 上的方法：

但是在 Taro 中，要调用组件上的原生方法，必须先创建对应的 Context ：

部分样式或 CSS 选择器在小程序中不支持，如：

首先需要安装 v33 的 CLI 工具：

然后进入项目，把 packagejson 文件中 taro 相关依赖的版本修改为 ^330-alpha2 ，再重新安装依赖（建议先把 node_modules 文件夹删除）。

为了节省项目空间，同构功能是可选的，以 Taro 插件的形式提供。

首先开发者需要安装插件 @tarojs/plugin-html ：

然后配置使用此插件：

为了验证同构功能的可用性和效果，我们对 CSS 样式库 WEUI 、React 组件库 Antd Design Mobile 、Vue2 组件库 VantUI 的所有组件进行了测试。

测试效果比较理想，甚至稍微超出我们的预期，配合各组件库自身的按需加载能力，能以小巧的体积使用丰富的组件，相信各位开发者会喜欢这个功能。

仓库地址： taro-weui

WEUI 是一个 CSS 的样式库，与框架无关，兼容性比较高，大部分组件能直接使用。

仓库地址： taro-antd-mobile

能直接兼容使用的组件大概为 80%，主要问题在于：

仓库地址： taro-vant

VantUI 的组件十分丰富，能直接兼容使用的组件大概为 70%。部分开发者会在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能运行在微信小程序，因此对 VantUI 的直接适配是一个很好的补充。

适配过程主要遇到的问题有：

同构方案还在持续优化中，部分实现还没有最终定稿。欢迎各位开发者到我们的论坛下留言，提出您的宝贵意见～： 同构方案 RFC 。

欢迎关注凹凸实验室

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，高亮效果。

在实现的过程中主要考虑，不同类型的数据结构，过滤掉特殊符号，url这些基本需求；同时在实现的过程中每次都要去处理最原始的数据，这就需要考虑到对象的深拷贝问题，目前所采用的方法是通过JSONparse(JSONstringify(str))来处理，因为在这个全局搜索的项目中不太会用到函数这些对象。最后通过replace方法来处理这些目标字符串。

wxml:

js:

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。由于小程序不存在入口。

官网： >

最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。

uni-app虽然功能还不完善，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关的插件 ，可以提高开发效率，

插件：

坑：

1覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。

2小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行 *** 作，此时可以判断appvue中的options，如果按小程序文档中来说当optionsscene === 1038时是小程序跳回来的场景，但是部分手机跳回来是optionsscene为1001，只能将这2种都作为跳转判断的条件。

3小程序跳转回来app中的onshow有时不执行，这个原因暂未找到

4在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom *** 作的，但是无效，可能跟uniAPP不支持dom *** 作有关系，采用定制接入方法一，手动调用。

1、小程序不是运行在浏览器中，所以没有DOM和BOM对象

2、小程序的JS有一些额外的成员

App方法 用于定义应用程序实例对象

Page方法 用于定义页面对象

getApp方法 用于获取全局应用程序对象

getCurrentPages方法 用来获取当前页面的调用栈（数组 最后一个就是当前页

wx对象 用来提供核心api的 官方链接： >

在浏览器端开发时，经常会有这种情况：单击某个元素，让其高亮显示，例如下图

这个用 js 很容易实现， 因为单击事件触发时，函数传入的 event 事件包含 target 对象，里面会有触发事件的 DOM 元素，我们只需要 *** 作这个 DOM 元素，为其添加 class 名就好了。

而在微信小程序开发时，由于其类似于 vue 不建议直接 *** 作 DOM （两者都有API可以做到），事件触发的时候同样会有默认参数传入， 但是无法直接取到 DOM 节点本身，而是包含挂载的一些数据，和点击部位的坐标信息等，具体参阅官方文档 《事件·小程序》 ， this 也总是指向 Page ，所以我们就需要 通过数据间接 *** 纵 DOM 来实现。

例如我遇到的问题是，我想做一个月历，当你选中某一天的时候，那一天高亮显示。

由于自己在做这一块时遇到了很多这方面的困惑，所以我在网上看了一些解决方案，下面列举一种在 CSDN 上看到的方案 ：

这个方法绑定了一个动态的 class 名，用一个变量 _num 可以做到切换 class 的作用，当点击元素时，js 获取到节点上 data-num 上的值，这里将值赋给变量 _num ，相应的由于是数据驱动，节点上的 class 名经过计算变化为 cur ，其他的同理。

在没有搞清这个方法前，我制作月历是使用的条件渲染。具体做法是，每个日期节点准备两个 DOM 元素，一个带有 class="selected" ，一个没有， 经过列表渲染之后每个单位实际上存在两个逻辑上的元素，这个时候通过点击改变 Page 中 data 里面的 selectedDate 和 selectedDate ，进一步控制 wx:if 的条件来实现元素的渲染与否。

点击事件发生时，获取节点中的 data-month 和 data-date 值， 并赋给 selectedDate 和 selectedDate

由于每个月都有某些日期， 所以加个月份限制 ，这里我设置了只做从这个月到未来6个月的月历，所以不需要加年份限制。

深知这个方案问题很大，是这一类的MVVM框架因的条件渲染切换消耗较大，微信小程序开发文档中介绍了 wx:if 相关 ：

当用户点击某个日期的时候会重新渲染整个 DOM ，所以这个方案并不好。

搞懂前面的逻辑，再来看这个方案就会很明白了。

以上就是关于Taro 3.3 alpha 发布：用 ant-design 开发小程序全部的内容，包括:Taro 3.3 alpha 发布：用 ant-design 开发小程序、微信小程序实现全局搜索代码高亮、钉钉小程序怎么动态添加元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！