Taro-UI 小程序开发记录(React)

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

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')} /> 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Taro中使用React开发小程序实现地图功能,你需要使用第三方库来实现地图功能,比如腾讯地图SDK或高德地图SDK。 以下是一个使用腾讯地图SDK的示例,假设你已经安装了Tarotaro-ui: 1. 安装taro-plugin-ttml,它可以让你在Taro中使用TTML(Tencent Template Markup Language)来渲染腾讯地图组件。 ``` npm install taro-plugin-ttml --save-dev ``` 2. 在`config/index.js`中配置ttml插件: ```javascript module.exports = { plugins: ['ttml'] } ``` 3. 在需要使用地图的页面中引入地图组件并使用TTML渲染地图: ```jsx import Taro from '@tarojs/taro' import { View } from '@tarojs/components' import { Map } from 'taro-plugin-ttml' function MapPage() { return ( <View> <Map id="myMap" style={{ width: '100%', height: '500px' }} /> </View> ) } export default MapPage ``` 4. 在`app.js`中初始化腾讯地图SDK: ```javascript import Taro from '@tarojs/taro' import QQMapWX from './utils/qqmap-wx-jssdk' Taro.initAMapApiLoader({ key: 'your_amap_key', version: '1.4.15', plugins: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'], AMapUI: { version: '1.1', plugins: ['overlay/SimpleInfoWindow', 'misc/PoiPicker'] }, Loca: { version: '1.3.2' } }) // 初始化腾讯地图SDK Taro.getLocation({ type: 'gcj02', success: function (res) { const { latitude, longitude } = res new QQMapWX({ key: 'your_qqmap_key' }).reverseGeocoder({ location: { latitude, longitude }, success: function (res) { console.log(res) } }) } }) ``` 其中,`your_amap_key`是你的高德地图开发者密钥,`your_qqmap_key`是你的腾讯地图开发者密钥。 这样就可以在Taro中使用React开发小程序实现地图功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值