复盘

遇到的问题

1. 样式的 background 问题

background-size: cover;
style='background-size: 100% 100%;'

1. position

不建议出现两个 absolute 定位, 最好写个盒子将他们框起来

1. 判断是否首次登录

  const { last_time } = data.clock;
  const day = Taro.$dayjs().format('YYYY-MM-DD HH:mm:ss');
  const value = Taro.$dayjs(day).diff(last_time, 'day', true);

1. 保存图片

 <Image src={Qrcode} className='qrcode' show-menu-by-longpress></Image>  

1. 分享

//app.jsx
const SHAREINFO = {
  'title': '冥想小程序',
  'path': 'pages/index/index',
  'imageUrl': ''
}

Component.prototype.onShareAppMessage = function () {
  return SHAREINFO
}

1. 获取路由

    var pages = Taro.getCurrentPages()    //获取加载的页面
    var currentPage = pages[pages.length-1]    //获取当前页面的对象
    var url = currentPage.route  

1. 在父子组件通信

    //父组件

    function App(){
      const isShowEx = false;

      const ExModal = {
        isShowEx: this.state.isShowEx,
        onCancelCallback:()=>{
          this.setState({isShowEx: false})
        }
      }

      return (
       <Ex showExDialog={isShowEx} {...ExModal} />
      )
    }

    //子组件
    function Modal(){

        onExit = e =>{
          props.onCancelCallback();
          Taro.reLaunch({ url: `/pages/index/index` });
        }

        return (
          <View className='qrcode' onClick={onExit}></View>  
        )
    }

1. classnames

    const vStyle = classNames({
      playing: true,
      "circle",
      "vStyle-a": id === "A",
      "vStyle-b": id === "B",
      "vStyle-c": id === "C"
    });

1. mobx

// 方式一
class userStore {
  @observable days = 0;
  @observable duration = 0;

  @computed get diffDay() {
    var dateStart = this.createDay;
    var dateEnd = new Date();
    return this.useDay = (dateEnd - dateStart) / (1000 * 60 * 60 * 24)
  }

  @action.bound
  update(days, duration){
    this.days = days;
    this.duration = Number(duration).toFixed(0);
  }
}
//app.jsx
import userStore from "./store/user";

const store = {
  counterStore,
  userStore
};
class App extends component {
  render(){
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}




//方式二
const counterStore = observable({
  counter: 0,
  counterStore() {
    this.counter++
  },
  increment() {
    this.counter++
  },
  decrement() {
    this.counter--
  },
  incrementAsync() {
    setTimeout(() => {
      this.counter++
    }, 1000)
  }
})

1. process

import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import classNames from "classnames";

import "./index.less";

class Percentage extends Component {
    constructor(props){
      super(props)
      const list = Array.from({length: 10}, (_, i) => ({
        id: `${i+1}`,
        isActived: `${i+1}` == 1 ? true : false 
      }));
      this.state={
        list: list,
        dotWidth: '',
        dotHeight: '',
        dotLeft: '',
        dotTop: '',
        avd: '',
        ahd: '',
        score: 1,
      }
    }

  componentWillMount(){
        // 盒子元素
        const that = this;
        const query = Taro.createSelectorQuery().in(this.$scope);
        query.select('#dot').boundingClientRect(rect=>{
        }).exec(rect=>{
        })

        query.select('#container').boundingClientRect(res=>{
        }).exec(res=>{
          that.setState({dotWidth: res[0].width, dotHeight: res[0].height}, function(){
            console.log('dotWidth,dotHeight: ', dotWidth,dotHeight);
          })
          const {dotWidth,dotHeight,} = that.state;
          that.setState({dotLeft: (res[1].width- dotWidth)/2});
          //中心点纵坐标
          that.setState({dotTop:(res[1].height - dotHeight)/2});
        })
        //半径
        //每一个BOX对应的角度;
        this.setState({avd: 360/10},function(){
              //每一个BOX对应的弧度;
          this.setState(prevState=>({ ahd: prevState.avd*Math.PI/180}),function(){
            console.log('ahd: ', this.state.ahd);
          }); 
        })
  }


  clickHandle(item,index){
    const {list} = this.state;
    list.forEach((item,index)=>{
      item.isActived = false
    })
    list[index].isActived = true;
    this.setState({
      score: index + 1,
      list: list
      },()=>{
        this.props.onScore(index+1);
      })
  }

  render() {
    const {list,avd, ahd,dotLeft,dotTop,dotWidth, dotHeight, score} = this.state;
    console.log('ahd,dotLeft,dotTop,dotWidth, dotHeight: ', avd, ahd,dotLeft,dotTop,dotWidth, dotHeight, score);

    const radius = 80;
    //中心点横坐标
    const dotStyle = {
      left: 55 + 'px',
      top: 55 + 'px'
    }
    const boxList = list.map((item, index) => {
      let boxStyle = {
        left: Math.cos((ahd*(index -2)))*radius + 80 + 'px',
        top: Math.sin((ahd*(index -2)))*radius + 80+ 'px'
      }
      return (
        <View className={classNames('box', item.isActived ? 'actived' : '')}  style={boxStyle} key={item}  onClick={(ind) => this.clickHandle(ind, index)}>{index+1}</View>
      )
    })
    return (
      <View className='container' id='container'>
        <View className='dot' id='dot' style={dotStyle}>{score} 分</View>
        {boxList} 
      </View>
    );
  }
}

export default Percentage;

1. player

import Taro, { useState, useEffect, useRef, useDidShow } from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import play from "@/assets/play.png";
import stop from "@/assets/stop.png";
import "./index.less";

const Play = props => {
  const { videoUrl, fileId } = props;
  useDidShow(()=>{
    let isiOS = res.system.indexOf("iOS") > -1;
    setIsIos(isiOS)
  })
  if (!videoUrl) return false;

  const [isIOS, setIsIos] = useState(true)
  const isFirstRender = useRef(true);
  const [isPlay, setIsPlay] = useState(false);
  const [showRight, setShowRight] = useState('display');
  const [duration, setDuration] = useState(0)
  const [leftDeg, setLeftDeg] = useState("45deg");
  const [rightDeg, setRightDeg] = useState("45deg");
  const [playState, setPlayState] = useState("PLAY_START");
  const [visible, setVisible] = useState('visible');
  let res = Taro.getSystemInfoSync();
  function onPlay() {
    if (playState === "PLAY_START") {
      setPlayState("PLAY_LOAD");
      Taro.setStorage({
        key: "playState",
        data: "PLAY_LOAD"
      });
      setIsPlay(true);
    } else if (playState === "PLAY_LOAD") {
      setPlayState("PLAY_PAUSE");
      Taro.setStorage({
        key: "playState",
        data: "PLAY_PAUSE"
      });
      setIsPlay(false);
    } else if (playState === "PLAY_PAUSE") {
      setPlayState("PLAY_LOAD");
      Taro.setStorage({
        key: "playState",
        data: "PLAY_LOAD"
      });
      setIsPlay(true);
    }
  }

  function initialization(){
    setPlayState('PLAY_START');
    Taro.setStorage({
      key: "playState",
      data: "PLAY_START"
    });
    setIsPlay(false);
    setLeftDeg('45deg')
    setRightDeg('45deg')
  }

  Taro.$backgroundAudioManager.onEnded(() => {
    Taro.navigateTo({
      url: `/pages/playVideo/success?duration=${duration}&fileId=${fileId}`
    });
  });


  useEffect(()=>{
    console.log('video变化了', videoUrl)
    initialization()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [videoUrl])

  useEffect(() => {
    if (!isFirstRender.current) {
      if (playState === "PLAY_LOAD") {
        Taro.$backgroundAudioManager.title = " ";
        Taro.$backgroundAudioManager.src = props.videoUrl;
        setDuration(Taro.$backgroundAudioManager.duration)
      } else if (playState === "PLAY_PAUSE") {
        Taro.$backgroundAudioManager.pause();
      } else {
        Taro.$backgroundAudioManager.stop();
      }
      let interval = null;
      if (isPlay) {
        interval = setInterval(() => {
          const curTime = Taro.$backgroundAudioManager.currentTime;
          const durTime = Taro.$backgroundAudioManager.duration;
          // 右侧半圆在进度超过一半之后要保持旋转225deg状态,未超过一半，左侧半圆保持原始角度45deg
          if (curTime && durTime && curTime !== 0 && durTime !== 0) {
            if (curTime / durTime <= 0.5) {
              setLeftDeg("45deg");
              setRightDeg((curTime / durTime) * 360 + 45 + "deg");
              setVisible('visible')
            } else {
              setLeftDeg((curTime / durTime) * 360 + 225 + "deg");
              setRightDeg("225deg");
              setVisible('hidden');
              setShowRight('none');
            }
          }
          if (curTime == 0 && curTime == durTime) {
            Taro.$backgroundAudioManager.stop();
            clearInterval(interval);
            processTime();
          }
          setDuration(durTime)
        }, 1000);
      }
    } else {
      isFirstRender.current = false;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playState]);


  const rightStyle = {
    transform: `rotate(${rightDeg})`,
    display: `${showRight}`
  };

  const leftStyle = {
    transform: `rotate(${leftDeg}) `
  };

  const markStyle = {
    visibility: `${visible}`,
  }
  const android = {
    visibility: `${visible}`,
    bottom: '4rpx'
  }

  const ios = {
    visibility: `${visible}`,
    bottom: '0rpx'
  }

  return (
    <View className='circle_container' onClick={onPlay}>
      <View class='circleProgress_wrapper'>
        <View style={markStyle} class='circle_markup_top'></View>
        <View class='wrapper right' >
          <View class='circleProgress rightcircle' style={rightStyle}></View>
        </View>
        <View class='wrapper left'>
          <View class='circleProgress leftcircle' style={leftStyle}></View>
        </View>
        {!isPlay ? (
          <Image className='Triangle' src={play}></Image>
        ) : (
          <Image className='Triangle' src={stop}></Image>
        )}
        <View style={isIOS ? ios : android} class='circle_markup_bottom'></View>
      </View>
    </View>
  );
};
export default Play;