Taro-UI + React 小程序开发-一一网

第一次使用Taro-UI + React，记录一下小程序开发中遇到的问题，后续的其他问题会继续补充

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

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

1.npm install时Taro报错：

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

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

解决：

// 安装最新版本
npm install -g @tarojs/cli

// 安装指定版本
npm install -g @tarojs/cli@1.3.20
复制代码

2.跳转内部页面

import Taro, { Component } from '@tarojs/taro'

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

3.跳转外部链接页面

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

  import Taro, { Component } from '@tarojs/taro'
  
  handleClick (item) {
    return <WebView src={item.url}  />
  }
  
  render(){
    return(
        <View onClick={this.handleClick.bind(this)}>点击事件</View>
    )
  }
复制代码

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

// 父组件页面 index.js

import Taro, { Component } from '@tarojs/taro'

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} />
  )
}
复制代码

4.获取DOM

原生方法：document.getElementsByClassName('ClassName')

Taro：

setTimeout(() => {
    let query = Taro.createSelectorQuery();
    query.select('.ClassName').boundingClientRect((res) => {
        console.log(res);
    }).exec()
}, 300)
复制代码

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

链接：taro-docs.jd.com/taro/docs/a…

// 示例
Taro.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
  rect.id      // 节点的ID
  rect.dataset // 节点的dataset
  rect.left    // 节点的左边界坐标
  rect.right   // 节点的右边界坐标
  rect.top     // 节点的上边界坐标
  rect.bottom  // 节点的下边界坐标
  rect.width   // 节点的宽度
  rect.height  // 节点的高度
}).exec()


复制代码

5.调用接口

async getList() {
  const { data } = this.demoData
  const res = await request({
    url: '',
    data: {data}
  })

  if(!res.errMsg && !res.code) {
    
  }
}
复制代码

6.循环实现带徽标的小组件

js文件：

<View className='at-row at-row--wrap box'>
  {
    this.data.map((item, _index) => (
      <View className='at-col at-col-4 item' key={`key-${_index}`}>
        <AtBadge className='badge' value={item.num} maxValue={999}>
          <Image src={item.image} />
        </AtBadge>
        <View className='text'>{item.value}</View>
      </View>
    ))
  }
</View>
复制代码

scss文件：

.box {
  text-align: center;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color .3s;
    flex-direction: row;
    overflow: hidden;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }
  Image {
    width: 80px;
    height: 80px;
  }
  .text {
    flex: 0 0 auto;
    text-align: center;
    margin: 12px auto 0 auto;
    color: #333;
    font-size: 28px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    border: none;
  }
  at-badge {
    width: 100%;
    margin: 30px 0 5px 0;
  }
  .at-badge__num {
    line-height: 1.6;
  }
}
复制代码