使用方法

介绍

微吼 微信小程序SDK 开放源码,并提供了使用demo案例,用户可以使用sdk提供的自定义组件 vahlldoc 分别对视频及文档进行展示

一,组件引入

1,拷贝 plugin 目录到自己项目pages目录或者其他自己新建的目录下 2,在'使用文件'.json下进行引用配置 如下图使用的 index.json

{
  "usingComponents": {
    "vhall": "../plugin/components/vhall/vhall",  //此处需根据自己存放目录进行修改
    "vhallDoc": "../plugin/components/doc/doc" //此处需根据自己存放目录进行修改
  }
}


二,使用

1、wxml中使用

<!-- 播放组件的使用 -->
<vhall
  bind:playSource="getPlaySource"
  bind:fullScreenChange="screenChange"
  bind:playWaiting="waiting"
  bind:playTimeUpdate="playUpdate"
  bind:errorMsg="errorFn"
  bind:playStatus="playStatus"
  bind:onMessage="onGetMessage">
   <view slot="before"> 此处slot会插入视频播放区域上边 </view>
   <view slot="after"> 此处slot会插入视频播放区域下边 </view>
</vhall>

<!-- 文档组件的使用(可选,此组件依赖vhall组件) -->
<vhallDoc 
  bind:docStatus="changeDocStatus" 
  docWidth='{{docWidth}}'/>

使用文档组件时一定要传递docWidth,不然将无法看到文档

因为小程序技术实现问题 在使用视频回放时,当用户拖动播放进度条,文档将无法随着拖动变化,只能被动跟随视频自动播放而切换绘制图形。


2、js中使用 引入js ``` import myPlugin from '../plugin/index.js'; ``` 引入之后再生命周期的onReady中调用 myPlugin.setOptions(options)进行使用 ``` onReady() { //通过myPlugin.setOptions()进行直播的初始化设 myPlugin.setOptions(this.data.options);
/* doc组件使用 计算容器的宽度, */
wx.createSelectorQuery().select('#docId').boundingClientRect((rect) => {
  console.log(rect.width);
  this.setData({
    docWidth: rect.width
  });
}).exec();

}

<span style="color:red;">*<span>tips: 
由于小程序自定义组件内部无法获取元素的尺寸,所以需要使用者获取进行传递。
<br/><br/><br/><br/><br/><br/>