vant进度条框架报错,百家云移动端h5点播SDK, 二维码分享

vant进度条框架报错

错误信息：Invalid prop: type check failed for prop “percentage”. Expected Number,

网上查找问题原因：

1，因为vant进度条中的percentage是设置百分比的，所以他不可以大于100，把这个percentage这个设置为小于100的就可以了，我设了这种方法，但是貌似不太管用，所以我就去查了第二个方法

2，因为没渲染你就获取数据，所以出现的报错，加上v-if就可以了

 <van-progress v-if="item.progress_rate" :percentage="item.progress_rate" :show-pivot="false" />

第二种方法解决了我的问题

百家云移动端h5点播SDK

首先是需要video_id和course_id来请求需要播放视频的token

利用路由传参就可以了

      govideodetails(videoid){
          this.$router.push({
              path:"/videodetails",
              query:{
                  video_id:videoid,
                  course_id:this.allstudy.course_id
              }
          })
      }

在视频播放页面来接受参数就可以了

    created(){
        let video_id = this.$route.query.video_id
        let course_id = this.$route.query.course_id
        console.log(video_id,course_id)
    }

接着来获取视频的token根据给的接口和传过来的参数

  created() {
    let video_id = this.$route.query.video_id;
    let course_id = this.$route.query.course_id;
    console.log(video_id, course_id);
    videotoken({video_id,course_id}).then(res=>{
        console.log(res)
    })
  }

因为我们项目用的百家云的外置播放视频，所以需要外部引入百家云的插件

//在pubic文件下的index.html文件引入文件
 <link href="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.css" rel="stylesheet">//css文件
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>//jq文件
 <script src="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.js" > </script>//js文件

在页面中添加一个DOM元素，来使用百家云的插件

定义一个div然后命名id

    <div id="baijiayunvideo"></div>

<script>
import { videotoken } from "../http/api";

export default {
  data() {
    return {
      videotoken: "",
      video_id: "",
      course_id: ""
    };
  },
  created() {
    this.video_id = this.$route.query.video_id;
    this.course_id = this.$route.query.course_id;
    videotoken({ video_id: this.video_id, course_id: this.course_id }).then(
      res => {
        console.log(res);
        var player = new bjcPlayer("#baijiayunvideo", {
          token: res.data.data.token,
          definition: "low"
        });
        player.play(res.data.data.video_id);
      }
    );
    this.getPlayToken();
  },
  methods: {
    getPlayToken() {}
  }
};
</script>

需要注意的是 页面中的标签需要设置宽高 才能显示

二维码分享

1、点击事件

@click="share"

2、页面

 <!-- 二维码 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <p>分享</p>
          <div>
            <img :src="imrUrl" />
          </div>
        </div>
      </div>
    </van-overlay>

3、data里面的值

show: false,
imrUrl: ""

4、下载插件

插件地址：https://www.npmjs.com/package/qrcode

npm install --save qrcode

5、使用（官网）

import QRCode from 'qrcode'  //那使用哪用

// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

5、点击事件的方法

 // 点击分享
    share() {
      this.show = true;
      let url = location.href;//获取当前地址栏的地址
      console.log(url);
      QRCode.toDataURL(url)
        .then(tpian => {
          console.log(tpian);
          this.imrUrl = tpian;
        })
        .catch(err => {
          console.error(err);
        });
    },