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

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 文件夹

$ taro convert 

未生效，最后发现原因是出在dist目录下的assets文件中没有添加新增的图片文件，加入后解决

官方对于这部分的解释：

• 1.taro-docs.jd.com/taro/docs/t…* 2.taro-docs.jd.com/taro/blog/2…### 3.跳转内部页面

navigateTo = async (url) => {Taro.navigateTo({ url: url })
}
render(){ return( <View onClick={this.navigateTo.bind(this)}>点击事件</View> ) 
} 

4.跳转外部链接页面

最开始使用函数直接返<webView>组件，但并不生效，原始写法：

 handleClick (item) {return <WebView src={item.url}/>}render(){return(<View onClick={this.handleClick.bind(this)}>点击事件</View>)} 

最后的解决办法是：单独用一个文件封装<webView>作为新组件，点击事件触发时使用内部跳转

// 父组件页面 index.js

handleClick (item) { Taro.navigateTo({ url: `./child?url=${item.url}` }) // 子页面使用this.$router.params接收参数
} 

// 子组件 child.js页面

 import {WebView} from '@tarojs/components'

static defaultProps = {// 当有数据交互的时候使用的参数在这里设置data: {}
}

componentDidShow () {
}

render() {return (<WebView src={this.$router.params.url} />)
} 

5.获取DOM

let query = Taro.createSelectorQuery();query.select('.ClassName').boundingClientRect((res) => {console.log(res);}).exec() 

注：Taro官网中提供了详细文档，用于获取 WXML 节点信息的对象

• rect.id // 节点的ID
• rect.dataset // 节点的dataset
• rect.left // 节点的左边界坐标
• rect.right // 节点的右边界坐标
• rect.top // 节点的上边界坐标
• rect.bottom // 节点的下边界坐标
• rect.width // 节点的宽度
• rect.height // 节点的高度

Taro.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){

}).exec() 

6.调用接口

7. 官方学习

官方永远是掌握这个技术的最快最准确的方式：

Taro-UI 官方文档：taro-ui.jd.com/#/docs/intr…

Taro 官方文档：taro-docs.jd.com/taro/docs