Taro代码与原有小程序代码混合开发中的那些坑

2024-01-12 13:29:06

前言

最近需要在原有的小程序上进行新增页面，同时，相关页面未来可能需要支持h5访问。另外，我对小程序的开发也不太熟。看了小程序的文档，对小程序的代码写法也不太适应。在对比了目前比较流行的混合开发框架后，选择了Taro进行小程序的后续功能开发。

刚开始被微信小程序转 Taro这个文档误导，以为可以将现有项目直接转成Taro的项目，然而我代码运行报错了，发现 Taro 的文档中有提到：

"请注意：微信小程序不支持直接将项目源码转换成 Taro，需要按照 Taro 小程序快速入门文档创建新项目。在 Taro 中开发的小程序是完全兼容微信小程序，所以可以继承原有的代码和业务逻辑。"

按照文档，重新创建了一个Taro项目，并将原有的小程序代码拷贝至新项目中。

这样子虽然能运行了，但是有个很头疼的问题，就是Taro的代码写法与原有的小程序代码写法不一样，导致代码看起来非常杂乱。

比如说，Taro 中的组件需要用 import 引入，而小程序中的组件则不需要。Taro 中的样式需要写在单独的 .scss 文件中，而小程序中的样式则可以直接写在 .wxml 文件中。

为了解决这个问题，我决定将Taro代码与原有的小程序代码混合开发。这样既可以利用Taro的优势，又可以保留原有的小程序代码。

混合开发中遇到的坑

在混合开发的过程中，我遇到了不少坑。下面列举一些比较常见的坑，并提供相应的解决方案。

坑1：Taro代码和原有小程序代码的冲突

Taro代码和原有的小程序代码在运行时可能会发生冲突。这是因为Taro代码和原有的小程序代码使用了不同的命名空间。为了解决这个问题，可以在Taro代码中使用 export 和 import 语句显式地导出和导入变量和函数。
坑2：Taro代码和原有小程序代码的样式冲突

Taro代码和原有的小程序代码的样式也可能会发生冲突。这是因为Taro代码和原有的小程序代码使用了不同的样式表。为了解决这个问题，可以将Taro代码的样式表放在单独的文件中，然后在原有的小程序代码的 .wxml 文件中引入该样式表。
坑3：Taro代码和原有小程序代码的事件处理冲突

Taro代码和原有小程序代码的事件处理也可能会发生冲突。这是因为Taro代码和原有的小程序代码使用了不同的事件处理机制。为了解决这个问题，可以在Taro代码中使用 addEventListener 和 removeEventListener 方法来绑定和解除事件监听器。

解决方案

方案1：使用 Taro 的 <import> 标签引入小程序组件

使用 Taro 的 <import> 标签可以引入小程序组件，这样就可以在 Taro 代码中使用小程序组件了。
方案2：将小程序组件封装成 Taro 组件

如果想在 Taro 代码中使用小程序组件，但又不想使用 <import> 标签，可以将小程序组件封装成 Taro 组件。
方案3：使用 Taro 的 @app-component 装饰器

使用 Taro 的 @app-component 装饰器可以将小程序组件注册为 Taro 组件，这样就可以在 Taro 代码中使用小程序组件了。