# 复盘

## 遇到的问题

1. 样式的 background 问题

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

2. position

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

3. 判断是否首次登录

```jsx
  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);
```

4. 保存图片

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

5. 分享

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

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

6. 获取路由

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

7. 在父子组件通信

```jsx
    //父组件

    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>  
        )
    }

```

8. classnames

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

9. mobx

```jsx
// 方式一
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)
  }
})
```

10. process

```jsx
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;

```

11. player

```jsx
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;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/chang-jian-zong-jie/ming-xiang-xiao-cheng-xu-yi-qi-fu-pan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.