小程序 web-view h5页面背景音乐自动播放

/**
 * 年度账单-登录首页
 */
import React,{useEffect} from 'react'
import 'swiper/swiper-bundle.min.css'
import styles from './styles.less'
import bgm from './bgm2.mp3'
// 主体
const annualAccountLoginIndex = (props) => {
  const goAnnualAccount =()=>{
    const {location: { query: { name,phone} } } = props;
    props.history.push({
      pathname: `/annualAccountLoginDetail`,
      query:{
        name,
        phone
      }
    })
  }
  const imgUrl = 'http://oss.yoyoeco.com/Image/annualbill2021/'
  useEffect(() => {
  	//  提前加载audio音乐
    const myAudio = new Audio()
    myAudio.preload = true;
    myAudio.autoplay = false;
    myAudio.loop = true;
    myAudio.src = bgm;
    document.getElementById("audioBox").appendChild(myAudio);
  }, [])
      
  return (
    

      

      

        
      
    
  )
}
export default annualAccountLoginIndex;

/**
 * 年度账单-详情页
 */
import React, { createRef, PureComponent, } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { connect } from 'dva';
import Swiper from 'swiper'
import moment from 'moment';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import { message } from 'antd';
import styles from './styles.less';
import html2canvas from './html2canvas1.0.0-rc.4'; // 1.0.0-rc.4版本
import 'swiper/swiper-bundle.min.css'
import bgm from './bgm2.mp3'

// 主体内容
@connect(({ annualAccount, loading }) => ({
  annualAccount,
  loading: loading.models.annualAccount,
}))

@Form.create()
class annualAccountLoginDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.gw = createRef();
    this.gw1 = createRef();
    this.state = {
      billData: {},
      imgUrl: `http://oss.yoyoeco.com/Image/annualbill2021/`,
      myAudio:{}
    }
  }

  // （装载完成），在render之后调用
  componentDidMount() {
    const { dispatch, location: { query: { phone} } } = this.props;
    dispatch({
      type: 'annualAccount/queryYearBills',
      payload: phone,
      callback: res => {
        const { data } = res
        this.setState(
          {
            billData: data,
          }
        );
      },
    });
    const mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      effect: 'fade',
      observer: true,
      observeParents: true,
      resistanceRatio: 0,
      autoHeight: true, // 高度随内容变化
      height: window.innerHeight,  // 高度占满整个设备高度
      paginationClickable: true,
      onTouchStart(swiper) {
        swiper.unlockSwipeToPrev();
        swiper.unlockSwipeToNext();
        if (swiper.isEnd) {
          swiper.lockSwipeToNext();
        } else if (swiper.activeIndex === 0) {
          swiper.lockSwipeToPrev();
        }
      }
    })
    // 音乐播放
    const myAudio = new Audio()
    myAudio.preload = true;
    myAudio.autoplay = true;
    myAudio.loop = true;
    myAudio.src = bgm;
    document.getElementById("audioBox").appendChild(myAudio);
    this.setState({
      myAudio
    })
    const play = function () {
      myAudio.play();
      document.removeEventListener("touchstart", play, false);
    };
    myAudio.play();
    document.addEventListener("WeixinJSBridgeReady", () => {// 微信
      play();
    }, false);
    document.addEventListener("touchstart", play, false);
  }

  playMusic=()=>{
    const {myAudio} = this.state
    myAudio.play()
  }

  muteMusic=()=>{
    const {myAudio} = this.state
    myAudio.pause()
  }

  // 返回首页
  goHome = () => {
    wx.miniProgram.navigateTo({ url: `/pages/start/start` })
  }

  // html转化成图片
  htmlToImg = () => {
    html2canvas(document.getElementById('picture1'), {
      dpi: 169 * 2,// window.devicePixelRatio * 2,
      scale: 2,
      logging: false, // 日志开关，便于查看html2canvas的内部执行流程
      scrollY: 0,
      scrollX: 0,
      useCORS: true,
      allowTaint: false
    })
      .then((canvas) => {
        const imageSrc = canvas.toDataURL("image/png", 1)
        this.doSavePic(imageSrc)
      }).catch(err => {
        message.info(err)
      });
  }

  changeData=(date2,type)=>{
    const reg = new RegExp( '-' , "g" )
    const date = date2.replace(reg,'/')
    const year = new Date(date).getFullYear()
    const month = new Date(date).getMonth() + 1
    const day = new Date(date).getDate()
    const hour = new Date(date).getHours() < 10 ? `0${new Date(date).getHours()}` : new Date(date).getHours()
    const min = new Date(date).getMinutes()< 10 ? `0${new Date(date).getMinutes()}` : new Date(date).getMinutes()
    let time 
    switch (type) {
      case 'MM月dd日':
        time = `${month}月${day}日`
        break;
      case 'X点XX分':
        time = `${hour}点${min}分`
        break;
      default:
        time = `${year}-${month}-${day}`
        break;
    }
    return time
  }

  getKeyWords=(num)=>{
    let txt = ''    
    if (num < 275001 ) {
      txt = '踩油门就像踩缝纫机'
    } else if (num > 275000 && num < 350001){
      txt = '消费力YYDS'
    } else if (num > 350000 && num < 625001) {
      txt = '佛系豚友'
    } else {
      txt = '加油，你差点就追上我了'
    }
    return txt
  }

  // 保存图片到相册
  doSavePic = (imgUrl) => {
    wx.miniProgram.postMessage({
      data: {
        imgData: imgUrl // 刚才拿到的base64 数据
      }
    });
    wx.miniProgram.navigateBack({ delta: 1 }) // 注意这里.
  }

  render() {
    const { billData,imgUrl } = this.state
    const {location: { query: { name} } } = this.props;
    return (
      <>
        

          

          

            
            
          
          

            

              

                

                  
                  

                    
嗨！{name}，你好
                    
好久不见
                    
欢迎乘坐Y2021号宇宙飞船，我是本次航班的机长豚豚
                    
此次航班航行总里程520光年，预计用时1314秒
                    
本次旅行严禁携带忧伤、烦恼等危险品
                    
请带上愉快的心情，系好安全带
                    
跟随我一起开启元宇宙惊喜吧
                  
                
              
              

                

                
                

                  
去征服世界，我为您加油
                  
从2017，走到2021
                  
。。目前已
                  
布局 22个  省份 
                  
点亮 71个  城市
                
              
              

                

                
                
                

                  
在过去的一年里
                  
YOYO—ECO智慧油站系统
                  
为1575277位 朋友
                  
处理了15082339笔 订单
                  
平均每分钟完成了21次 计算
                  
距离成为12306那样的平台
                  
还有2/3的路要走
                
              
              

                

                
                
                

                  
2021年，便利店
                  
共计卖出了18900个
                  
YOUNG-小红虎皮凤爪
                  
有9450只小鸡失去了
                  
他们的小jio jio
                
              
              {
                billData && billData.firstOilTime ?
                  <>
                    

                      

                      
                      

                        
还记得2021年{moment(billData.firstOilTime).format('MM月DD日')}吗
                        
你踏入{this.changeXHT(billData.firstOilGasName)}
                        
加了第一箱油
                        
消费了 {billData.firstOilAmount/100}元
                        
宇宙中的原子用140亿年
                        
穿越时间和空间来创造我们
                        
为的是让我们彼此相遇
                      
                    
                    {
                      billData && billData.oilOrderCount ?
                        

                          

                          
                          
                          

                            
2021年，你在 {billData.oilCitys}
                            
打卡过。。。
                            
这一年
                            
我为你加油 {billData.oilOrderCount}次
                            
每一次跨越时空的相遇 
                            
总会令人神往
                          
                        
                      :
                      null
                    }
                    {billData && billData.nightOilTime?// 深夜加油
                      

                        

                        
                        
                        

                          
最晚一次加油~
                          
{moment(billData.nightOilTime).format('MM月DD日')}{moment(billData.nightOilTime).format('HH点mm分')}
                          
深夜里，你开车驶入。。。
                          
星月为伴，我想对你说
                          
你努力的样子So beautiful
                        
                      
                    :null}
                    {billData && billData.maxOilQuantity ?// 加油最多 
                      

                        

                        
                        
                        

                          
                          
{moment(billData.maxOilDatetime).format('MM月DD日')}，也许是很特别的一天
                          
你加了 {billData.maxOilQuantity / 1000} 升 油
                          
是你2021年加油升数最多的一次
                          
很高兴，这一次我能陪你的时间更久
                          
走的更远
                        
                      
                    : null}
                    {billData && billData.discountAmount ?// 优惠信息 
                      

                        

                        
                        
                        

                          
这一年，你在。。。
                          
使用了 {billData.couponCount}张 优惠券
                          
共省下了 {billData.discountAmount/100}元
                          
剩余可用的积分 {billData.integralAll}个
                          
省下来的，就是幸福的本钱
                        
                      
                     : null}
                    {billData && billData.oilOrderQuantity ?// 会员消费汇总 
                      

                        

                          
                          

                            
尊敬的各位旅客
                            
。。。Y2021号宇宙飞船即将到站
                            
2021这一站，你在。。。累计加注{billData.oilOrderQuantity/1000}升汽油
                            
在。。。大家族中消费排名第{billData.quantityNumber}位
                            
你的年度消费关键词：{this.getKeyWords(billData.quantityNumber)}
                            
这一年，日迈月征，朝暮轮转
                            
。。。何其有幸，与你共度
                            
请携带好你的回忆，我们一起奔向2022
                          
                        
                      
                     : null} 
                  
                  :
                  
 {/* 未登录的话走到这 */}
                    

                    
                    

                      
新的一年
                      
要加油哦
                    
                  
              }
            
          
        
      
    )
  }
}
export default annualAccountLoginDetail;