Taro-UI 小程序开发记录（React）

最新推荐文章于 2025-09-11 01:49:02 发布

原创

最新推荐文章于 2025-09-11 01:49:02 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#taro #ui #react.js

本文记录了使用Taro-UI进行小程序开发时遇到的问题，包括npm install时的Taro配置错误、图片渲染失败、跳转外部链接页面、获取DOM节点以及调用接口等。通过查阅文档和实践，找到了相应的解决方法，如安装指定版本的Taro，处理图片路径，封装跳转组件，以及使用Taro提供的API获取DOM信息。

Taro-UI是一款基于 Taro 框架开发的多端 UI 组件库，vue和react都支持，本文背景是Taro-UI + React，记录一些在小程序开发中可能遇到的问题

1.npm install时Taro报错：

报错信息：Taro 配置有误，请检查[x]plugins [x]frame

原因：项目中的是低版本，需要重新安装低版本的Taro

解决：

安装最新版本:

npm install -g @tarojs/cli

安装指定版本:

npm install -g @tarojs/cli@1.3.20

2. 加载图片时报错：【渲染层网络层错误】

图片路径正确并且已经加载出来，但是没有渲染到屏幕，查阅文档后发现是Image 没有处理动态拼接的 src的问题

如果路径是动态拼接的字符串，需要手动修改：

// 转换前：
<Image src='../../img/icons/' + chart.id + '.png' />

// 手动修改，图片也需要手动拷贝到 taroConert/src 对应目录下：
<Image src={require('../../img/icons/' + chart.id + '.png')} />

但是在项目中并没有taroConert目录，于是在dist目录下执行以下指令，目的是：转换原有微信小程序，把转换好的代码生成在根目录下的 taroConvert 文件夹