Taro-UI 小程序开发记录(React)
theme: awesome-green highlight: an-old-hope
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第18天,点击查看活动详情
Taro-UI是一款基于 Taro 框架开发的多端 UI 组件库,vue和react都支持,本文背景是
Taro-UI + React
, 记录一些在小程序开发中可能遇到的问题
1.npm install时Taro报错:
报错信息:Taro 配置有误,请检查[x]plugins [x]frame
原因: 项目中的是低版本,需要重新安装低版本的Taro
解决:
安装最新版本:
js
npm install -g @tarojs/cli
安装指定版本:
npm install -g @tarojs/[email protected]
2. 加载图片时报错:【渲染层网络层错误】
图片路径正确并且已经加载出来,但是没有渲染到屏幕,查阅文档后发现是Image 没有处理动态拼接的 src
的问题
如果路径是动态拼接
的字符串,需要手动修改:
```js // 转换前:
// 手动修改,图片也需要手动拷贝到 taroConert/src 对应目录下: ```
但是在项目中并没有taroConert
目录,于是在dist
目录下执行以下指令,目的是:转换原有微信小程序,把转换好的代码生成在根目录下的 taroConvert
文件夹
bash
$ taro convert
未生效,最后发现原因是出在dist目录下的assets文件中没有添加新增的图片文件,加入后解决
官方对于这部分的解释:
-
1.http://taro-docs.jd.com/taro/docs/taroize-troubleshooting#5-image-%E6%B2%A1%E6%9C%89%E5%A4%84%E7%90%86%E5%8A%A8%E6%80%81%E6%8B%BC%E6%8E%A5%E7%9A%84-src
-
2.http://taro-docs.jd.com/taro/blog/2018-12-18-taro-1-2/#taroize
3.跳转内部页面
js
navigateTo = async (url) => {
Taro.navigateTo({ url: url })
}
render(){
return(
<View onClick={this.navigateTo.bind(this)}>点击事件</View>
)
}
4.跳转外部链接页面
最开始使用函数直接返<webView>
组件,但并不生效,原始写法:
```js
handleClick (item) {
return
render(){
return(
最后的解决办法是:单独用一个文件封装<webView>
作为新组件,点击事件触发时使用内部跳转
// 父组件页面 index.js
js
handleClick (item) {
Taro.navigateTo({ url: `./child?url=${item.url}` })
// 子页面使用this.$router.params接收参数
}
// 子组件 child.js页面 ```js
import {WebView} from '@tarojs/components'
static defaultProps = {// 当有数据交互的时候使用的参数在这里设置 data: {} }
componentDidShow () { }
render() {
return (
5.获取DOM
js
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 // 节点的高度
```js Taro.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
}).exec() ```
6.调用接口
7. 官方学习
官方永远是掌握这个技术的最快最准确的方式:
Taro-UI 官方文档:http://taro-ui.jd.com/#/docs/introduction
Taro 官方文档:http://taro-docs.jd.com/taro/docs