taro-vue 使用第三方插件【miniprogram-barrage】开发微信小程序【直播弹幕】

近日使用taro-vue开发微信小程序端的视频直播，并且用户可以发送弹幕。该功能基于微信小程序第三方插件miniprogram-barrage，接下来主要以此插件为例说一下使用taro跨端开发框架如何正确的使用第三方插件：

首先【miniprogram-barrage】这个插件我们要使用npm安装到我们的node_modules依赖包里面

npm install --save miniprogram-barrage

其次，我们要在项目的node_modules依赖包里面找到我们安装的插件：如下图所示：

该文件夹内部就是原生微信组件，复制这个文件夹并放在我们自己创建的conponents文件夹内部，如下图所示：

接下来，就要在需要用到的组件的xxx.config.js内部引入这个组件【miniprogram-barrage】，如图所示：

组件的引入方式还是原生的方式引入，但是路径一定注意，路径时我们刚刚复制并粘贴到我们自己创建的components文件夹内部（下面简单解释一下为什么要这么麻烦，因为我们在使用taro框架开发微信小程序的时候，当我们执行npm run dev:weapp命令后，taro帮我们生成了一个dist文件夹，生成的dist文件夹内部没有node_modules依赖包，所以如果我们开发环境引入的是node_modules里面的插件，会导致报错）

综上所述第三方插件就完美的引入到项目中了，那么下面就简单说下怎么用这个插件：

先拿微信原生方法举个例子：详情请看https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/barrage.html

 Page({
  onReady() {
    this.addBarrage()
  },
  addBarrage() {
    const barrageComp = this.selectComponent('.barrage')
    this.barrage = barrageComp.getBarrageInstance({
      font: 'bold 16px sans-serif',
      duration: 10,
      lineHeight: 2,
      mode: 'separate',
      padding: [10, 0, 10, 0],
      tunnelShow: false
    })
    this.barrage.open()
    this.barrage.addData(data)
  }
 })

接下来我们看下taro-vue应该如何使用这个插件的实例上的方法：具体方法请参考https://taro-docs.jd.com/taro/docs/mini-third-party#selectcomponent

<template>
    <div>
        <video
          class="video"
          :src="videoData.videoUrl"
          :controls="true"
          :show-play-btn="true"
          :autoplay="videoData.autoplay"
          :poster="videoData.poster"
          initial-time="0"
          id="'videoLive"
          :loop="false"
          :muted="false"
          :danmuBtn="true"
          object-fit="contain"
          direction="90"
        >
        <barrage class="barrage" id="barrage"></barrage>
        </video>
    </div>

</template>
<script>
import Taro from '@tarojs/taro'
import { getCurrentInstance } from '@tarojs/taro'
import {mockData} from '@/untils/tool/mockData.js'
export default{
    data(){
        return{
            videoData:{
             videoUrl:'https://vd1.bdstatic.com/mda-hgnib7iwv01sswut/hd/mda-hgnib7iwv01sswut.mp4?v_from_s=nj_videoui_4135&auth_key=1615532198-0-0-d0bc28b875a9550f3c1e829947d94e1a&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=8_1',
            poster:'https://pic.rmb.bdstatic.com/1539ed06d20b8cc187719b775a259d4c.jpg?x-bce-process=image/quality,q_80/resize,m_lfit,w_672,h_448',
            autoplay:true,
            danmuList:[],
          },
            barrage:null,
        }
    },
    onReady(){
        this.addBarrage()
    },
    methods:{
        addBarrage() {
          const {page} = getCurrentInstance()
          const barrageComp =page.selectComponent('#barrage')
          this.barrage = barrageComp.getBarrageInstance({
            font: 'bold 16px sans-serif',
            duration: 20,
            lineHeight: 2,
            alpha:0.7,
            range: [0, 1],
            mode: 'overlap',
            safeGap: 4,
            enableTap: false,
            padding: [10, 0, 10, 0],
            tunnelShow: false
          })
      
          this.barrage.open()
          this.danmuList= mockData(10)
          this.barrage.addData(this.danmuList)
          this.timer = setInterval(() => {
          this.danmuList = mockData(10)
              this.barrage.addData(this.danmuList)
          }, 2000)
        },
    }
}

</script>

下面贴一个mockData的方法：【模拟弹幕数据】

const msgs = [
  '666666',
  '我要上电视！！',
  '老板晚上好',
  '前方高能预警',
  '主播迟到了~~~',
  '干的漂亮',
  '早',
  '广东人民发来贺电',
  '不爱看的走开，别说话wen我'
]

const color = ['red', 'rgb(0, 255, 0)', '#0000FF', '#fff']

const getRandom = (max = 10, min = 0) => Math.floor(Math.random() * (max - min) + min)

const mockData = (num) => {
  const data = []
  for (let i = 0; i < num; i++) {
    const msgId = getRandom(msgs.length)
    const colorId = getRandom(color.length)
    data.push({
      content: msgs[msgId],
      color: color[colorId]
    })
  }
  return data
}

module.exports = {
  mockData
}

综上这个问题就是解决了，欢迎各位大佬指正。。。

顺便补充一下taro-vue表单元素的开发技巧：

在taro-vue表单元素，如input标签是不能使用v-model双向数据绑定的，那么如何实现v-model呢,请看下面的代码：

<template>
  <view class='summitSignupBox'>
    <view class="summitSignup">
        <image class="signupBg" src="../../../static/img/meetInfo/bmbg.jpg">
        </image>
        <view class="formBox">
          <view class="bmTit">请填写信息报名会议</view>
          <view class="formItem">
            <text class="formTxt name">姓名：</text>
            <AtInput class="formIpt" name='value1' type='text' confirmType="完成" :border="false" placeholder='请填写姓名' :value="query.name" placeholder-class="phcolor" :onChange="getName"/> 
          </view>
        </view>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import { AtInput } from 'taro-ui-vue'
import "taro-ui-vue/dist/style/components/input.scss";
import './summitSignup.scss'
export default {
  props:{
  },
  components: {
    AtInput
  },
  data(){
    return{
      query:{
        name:'',
        sexStatus:1,
        mobile:'',
        unit:'',
        job:'',
      }
    }
  },
  mounted(){
  },
  methods:{
    // 获取姓名赋值，这一步必须要有的，不然会获取不到值类似于v-model
    getName(val){
      this.query.name=val
    },
  }
}
</script>

今日采坑到此结束，如有问题，欢迎大佬指正。。。