taroH5

2019-05-27

使用taro遇到的一些坑，使用Taro框架生成H5时需要注意的地方

使用taro遇到的一些坑

不能在包含 JSX 元素的 map 循环中使用 if 表达式，尽量在 map 循环中使用条件表达式或逻辑表达式。
例如：

<View className='grade'>
  {hotelDetail.rank.map((item, index) => {
    return item ? <Image key={index} className='grade-img' src={assets['ic_star']} /> : <Image key={index} className='grade-img' src={assets['icon_star_info']} />
  })}
</View>

在父组件上传参，需要用 data-goodId={item.goods_id} 方法里使用

goToDetail = (e) => {
  console.log(e.currentTarget.dataset.goodid, '-------')
  let goodid = e.currentTarget.dataset.goodid
  Taro.navigateTo({
    url: `/pages/detail/detail?goods_id=${goodid}`
  })
}

使用taro的Map组件，官方说跟小程序的使用是一样的，但是在实践中并不是完全一样，而且官网也没说
例如map 的一些方法：
视野发生变化时触发
小程序是 bindregionchange=”regionchange”
taro是 onRegionChange={this.regionchange}
点击标记点时触发，会返回marker的id
小程序是 bindmarkertap=”markertap”
taro是 onMarkerTap={this.markertap}
具体的对应文件可以在taro代码的 node_modules/@tarojs/components/types/Map.d.ts 文件中找到方法名
h5登录使用公众号授权，跳转回来的页面不对，是因为使用默认的路由方式会带#，而登录接口会把#号后面的屏蔽了
使用input输入框的时候，设置height和line-height会有样式问题，输入的文字会被截取，不设置height和line-height就行
使用setState用当前变量改变（setState()实际上可以接受一个函数作为参数，函数的首个参数就是上一次的state。）
1
this.setState(prevState => {count: prevState.count + 1});

使用Taro框架生成H5时需要注意的地方

使用数组map循环时，把要循环的数组在state里定义下为空数组，不然render第一次执行时是undefined会报错;
使用箭头函数传参用data-xxx 时，h5使用e.currentTarget报错，要使用 this.func.bind(this, 参数)
图片大小不能在外层套一层View设宽高，然后image宽高为100%，要直接在image标签上设置宽高，因为在h5上会生成类名为Image设置的类名的div包裹img
h5不支持switchTab跳转，可以直接使用navigateTo，但是小程序跳转tabbar页面只能用switchTab，要进行判断
h5不支持地图Map，使用了腾讯封装的Map地图组件
h5不兼容taro的日历组件，使用了腾讯封装的日历组件
h5使用swiper，要加 current={this.state.current} 属性
h5低版本可能不支持scrollView滑动，需要更新更新taro-cli: taro update self，然后yarn
h5请求接口要传cookie，在request里加 credentials: ‘include’,

h5发起post请求，传不了参数，请求不成功，是因为在请求代码底层有问题,需要把参数转为字符串类型在接口时加

conf.method = conf.method.toUpperCase()
  if (Taro.getEnv() === 'WEB' && conf.method === 'POST'){
    conf.data = JSON.stringify(conf.data)
  }

h5上tabbar的问题，在不是tabbar的页面有时候也会出现tabbar，是因为样式覆盖了，需要在不是tabbar的页面添加样式
1
2
3
.taro-tabbar__tabbar {
display: none!important;
}

是tabbar的页面添加

1
2
3

.taro-tabbar__tabbar {
  display: block!important;
}

但是这样的话还是有个问题，如果不是tabbar的页面有跳转到tabbar页面的，这个时候在进到这个页面，还是会出现tabbar，写一个方法，在不是tabbar的页面的 componentDidShow 生命周期里判断是h5的话
方法：

function HideTabBar(isHide) {
  if (isHide){
    document.getElementsByClassName('taro-tabbar__tabbar')[0].setAttribute('style', 'display:none!important')
  } else {
    document.getElementsByClassName('taro-tabbar__tabbar')[0].setAttribute('style', 'display:block!important')
  }
}
export default HideTabBar

引用：

1	import HideTabBar from '../../utils/tools'

使用：

componentDidShow() {
  // 判断是H5
  if (Taro.ENV_TYPE.WEB === Taro.getEnv()) {
    // 隐藏tabbar
    HideTabBar(true)
    // 展示tabbar
    HideTabBar(false)
  }
}

h5上不能有双层的setState回调，在多层回调里函数功能不起作用