taro框架百度小程序路由进入某一页面时出现白屏现象的可能原因

最新推荐文章于 2024-10-17 15:48:36 发布

after you

最新推荐文章于 2024-10-17 15:48:36 发布

阅读量3.5k

点赞数

本文链接：https://blog.youkuaiyun.com/gwdgwd123/article/details/87983304

版权

taro中render jsx语法 render过程中使用setState 操作在安卓真机（百度app 和微信app）和 (安卓，ios)远程调试（模拟器）都没问题，也不会出现白屏，会正常显示跳转页面内容，只有ios真机（百度app开发环境）和百度小程序预览模式（模拟器）会不出页面不渲染是白页面

注意：在ios （微信app下也是正常展示）也就是说微信环境下弱化了setState在render中的使用安卓 ios在微信环境下能正常展示跳转页面

支持情况

百度小程序模拟器

预览模式

安卓

远程调试模式

安卓，ios

微信小程序模拟器

安卓，ios

百度app

安卓

微信app

安卓，ios

解决方案就是把render中的setState 更新操作放到didShow 或者didMount中

下面是详细代码片红色部分为更新操作

import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'
import { fromJS, is} from 'immutable'
import { View, Text,Image} from '@tarojs/components'
import './cat.styl'
import chaPng from '../../images/cha_icon.png'
import {unique} from "../../common/Utils"
import FeedService from '../../common/service/FeedService'

var timer = 0;
@inject('counterStore')
@observer
export default class Cat extends Component {
  constructor(props){
    super(props);
    this.state = {
      Sort:[],
      moreSortList:[],
      x:0,
      y:0,
      hidden:true,
      flag:false,
      // flag:true
      disabled: true,
      elements:[],
      beginIndex:0
    }
  }
  componentWillMount () {
  }
  componentWillUnmount () {
   // 返回首页进行刷新操作
    //this.props.counterStore.dispatch('catCur','home')
  }
  componentDidHide() {

  }
  componentDidShow() {
    const { counterStore: { catList } } = this.props;
    const newSort = catList.slice();
    this.setState({
      Sort:newSort
    })
  }
 
  componentDidMount () {
    if (process.env.TARO_ENV === 'swan') {
      swan.setDocumentTitle && swan.setDocumentTitle({
        title: '分类-优快云'
      });
      swan.setMetaKeywords && swan.setMetaKeywords({
        content: 'IT技术博客,IT技术问答,IT技术论坛,IT技术资讯,分类'
      });
      swan.setMetaDescription && swan.setMetaDescription({
        content: '优快云技术社区,实时更新行业内最新信息,其中包含了IT技术博客,IT技术问答,IT技术论坛,IT技术资讯等,查找最新最全的IT信息就上优快云'
      });
    }

    var query = Taro.createSelectorQuery();
    var nodesRef = query.selectAll(".item");
    nodesRef.fields({
    dataset: true,
    rect:true

  },(result)=>{
      this.setState({
        elements: result
      })
      }).exec()
      FeedService.findOptList().then((data)=>{
       // 默认分类列表
       this.setState({
        moreSortList:data
       })
      }).catch((error)=>{
        console.error('error:',error)
      });
  }

  componentWillReceiveProps(nextProps){
    if(!is(fromJS(this.props), fromJS(nextProps))){
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    // console.log('!is(fromJS(this.props), fromJS(nextProps))',!is(fromJS(this.props), fromJS(nextProps)))
   // console.log('!is(fromJS(this.state),fromJS(nextState))',!is(fromJS(this.state),fromJS(nextState)))
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
  }
  handleTag(param){
    //this.handleData()
     //throttle(this.handleData,500,param).call(this)
    this.throttle(()=>{
      this.handleData(param)
    })
  }
  throttle(callback,delay=100){
    if(timer){
      return
    }
    callback();
    timer=setTimeout(()=>{
      timer=0
    },delay)

  }
  handleData(param){
    //  const that = arguments[0]
    //  const param = arguments[1]
    const that =this;
    that.state.Sort.length&&that.state.Sort.splice(that.state.Sort.findIndex(v => v.catCode === param.catCode), 1);
    let moreAry = [...that.state.moreSortList,param];
    moreAry=unique(moreAry);
    that.reSort();
       setTimeout(()=>{
    that.setState({
      moreSortList:JSON.parse(JSON.stringify(moreAry))
    })
   },0);
    that.props.counterStore.dispatch('catList',that.state.Sort);
    // 只有做删除catList操作的时候 并且在删除选项中有选中状态才让状态改变 重新更新数据
    //console.log(that.props.counterStore.catCur,'that.props.counterStore.catCur====')
    //console.log(param.catCode,'param.catCur====')
    // if(param.catCode === that.props.counterStore.catCur){
    //   that.props.counterStore.dispatch('catCur','home')
    // }
     if(that.props.counterStore.catCur!== 'home'){
      that.props.counterStore.dispatch('catCur','home')
    }
   // that.props.counterStore.dispatch('catCur','home')
    // 同时往moreSortList数组中增加内容并持久化
    // const moreAry = JSON.parse(JSON.stringify(that.state.moreSortList))
    //console.log(that.state.moreSortList,"moreSortList=====")
    Taro.setStorageSync('moreSortList',moreAry)
  }
  addTag(item){
    this.throttle(()=>{
      this.addData(item)
    })
   // throttle(this.addData,500,item).call(this)
  }
  addData(item){
    // 删除更多分类中的选项
    // 找一个当下不变的方法
   // const that = arguments[0]
   // const item = arguments[1]
   const that =this;
    that.state.moreSortList.length&&that.state.moreSortList.splice(that.state.moreSortList.findIndex(v => v.catCode === item.catCode), 1);
    Taro.setStorageSync('moreSortList',that.state.moreSortList);
    //从第二个位置插入
    that.state.Sort.splice(2,0,item);
    let sort = JSON.parse(JSON.stringify(that.state.Sort));
    sort = unique(sort);
       // 1.不render的原因:立马就把值修改了 相当于 这次和上次的值是一样的 所以不再刷新了 而增加的时候 是因为误操作了一个touchend事件 导致state变化了 还有moreSortList的变化
       // 2.baidu小程序的特殊处理 重新render的方式
      //  that.setState({
      //   Sort:sort
      // })
      setTimeout(()=>{
        that.setState({
          Sort:sort
        })
       },0);
      that.reSort();
    that.props.counterStore.dispatch('catList',this.state.Sort)
    if(that.props.counterStore.catCur!== 'home'){
      that.props.counterStore.dispatch('catCur','home')
    }
  }
  reSort(){
   this.state.Sort.map((item,index)=>{
     item.curIndex = index;
     return item
    })
  }
  longTap(e){
    e.stopPropagation();
    if((this.state.beginIndex===0 || this.state.beginIndex ===1)){
      // flag 不会变成true 下面的touchMove移动距离不会执行
      return
    }
    this.setState({
      x: e.currentTarget.offsetLeft,
      y: e.currentTarget.offsetTop,
      hidden: false,
      flag:true
    })
  }
  touchStart(item,e){
    this.setState({
      beginIndex:e.currentTarget.dataset.index
    })
  }
  flagTag(endIndex){
    return (endIndex===0 || endIndex ===1)
  }
  touchEnd(item,e){
    e.stopPropagation();
    if (!this.state.flag) {
      return;
    }
    const x = e.changedTouches[0].pageX;
    const y = e.changedTouches[0].pageY;
    const list = this.state.elements;
    let data = this.state.Sort;
    var flags =false;
    for (let i = 0; i < data.length; i++) {
      // 任何进入的都需要把虚线去掉
       data[i].chosen = 0;
       if(i === data.length-1){
         flags = true
       }
    }
    for(var j = 0; j<list.length; j++){
      const item = list[j];
      if(x>item.left && x<item.right && y>item.top && y<item.bottom){
        // 在拖动范围内的做换位操作 否则不做换位操作
        const beginIndex = this.state.beginIndex;
        const endIndex = item.dataset.index;
        //向后移动
        if(!this.flagTag(endIndex)){
          if (beginIndex < endIndex) {
            let tem = data[beginIndex];
            for (let i = beginIndex; i < endIndex; i++) {
              data[i] = data[i + 1];
              data[i].curIndex = i
            }
              // 结束位置是0或者1 不做换位操作
              data[endIndex] = tem;
              data[endIndex].curIndex = endIndex
          }
          //向前移动
          if (beginIndex > endIndex) {
            let tem = data[beginIndex];
            for (let i = beginIndex; i > endIndex; i--) {
              data[i] = data[i - 1];
              data[i].curIndex = i
            }
              // 结束位置是0或者1 不做换位操作
              data[endIndex] = tem;
              data[endIndex].curIndex = endIndex
          }
          this.props.counterStore.dispatch('catList',data)
          if(this.props.counterStore.catCur!== 'home'){
            this.props.counterStore.dispatch('catCur','home')
          }
        }

        // 替换完成flag 为true  遮罩层隐藏
        //this.props.counterStore.dispatch('catList',data)
      }

    }
    this.setState({
      flag: false,
      hidden: true
      })
    // this.props.counterStore.dispatch('catList',data)
  }
  touchMove(item,e){
    e.stopPropagation();
    if(this.state.flag){
      const x = e.touches[0].pageX;
      const y = e.touches[0].pageY;
      this.setState({
        x: x-75,
        y: y - 80
      });
     // 执行了拖拽操作的元素在拖拽过程中增加虚线框的操作
      const list = this.state.elements;
      // Sort 是第一次render时候拿到的首页的sort列表
      let data = this.state.Sort;
      for(var j = 0; j<list.length; j++){
        const item = list[j];
        if(x>item.left && x<item.right && y>item.top && y<item.bottom){

          const endIndex = item.dataset.index;
          // 如果结束位置是0 或者是1  则不增加虚线 其他情况在移动过程中给结束位增加虚线
          if(!this.flagTag(endIndex)){
            data[endIndex].chosen = 1
          }
          // 开始位置赠加虚线
         data[this.state.beginIndex].chosen = 1
        }
      }
     //this.props.counterStore.dispatch('catList',data)
    }
  }

  render () {
    const { counterStore: { catList } } = this.props;
    const newSort = catList.slice();
    const {moreSortList} = this.state;
  
     //const newSort = Taro.getStorageSync('catList')
     // 不通过props刷新更新数据 优化页面渲染速度
    // this.setState({
    //   Sort:newSort
    // });
    const cardItem = newSort.map((item,index)=>{
      return <View   key={item.curIndex} data-index={item.curIndex}   onLongPress={this.longTap} onTouchStart={this.touchStart.bind(this,item)} onTouchMove={this.touchMove.bind(this,item)} onTouchEnd={this.touchEnd.bind(this,item)} className={`item ${item.chosen?'dash':''}`}>
      <View>{`${item.catName}`}</View>

      {index>1&&<Image src={chaPng} className='close' onClick={this.handleTag.bind(this,item)}></Image>}
        </View>
    });

    const cardItem2 = moreSortList.length&&moreSortList.map((item,index)=>{
      return <View className='item' key={item.curIndex} onClick={this.addTag.bind(this,item)}>
      <View className='nr'><Text>+</Text><Text>{item.catName}</Text></View>
      </View>
    });
    return (
      <View className='sort'>
       <View className='my_sort'>
       <View className='block'>
         <View className='line'></View>
        <Text className='title' >常用分类</Text>
        <Text className='tip'>点击可删除分类</Text>
        </View>
     <View className='drag'>
     <movableArea>
     <View  className='drags'>
        {cardItem}
     </View>
      <movableView x={this.state.x} y={this.state.y} direction='all' damping='6000' friction='500' disabled={this.state.disabled} inertia='false'>
        <View className='item-move' hidden={this.state.hidden}>
        {this.state.Sort.length&&this.state.Sort[this.state.beginIndex]&&this.state.Sort[this.state.beginIndex].catName}
        </View>
      </movableView>
      </movableArea>
      </View>
      </View>
      <View className='more_sort'>
      <View className='line'></View>
      <View className='block'>
         <View className='line'></View>
        <Text className='title' >可选分类</Text>
        <Text className='tip'>点击可添加</Text>
        </View>
        {moreSortList.length&&  <View  className='drag'>
        {cardItem2}
        </View>}
      </View>
      </View>
    )
  }
}