前端组件开发文档

微吼组件开发及使用规范


互动管理

<p>[TOC]</p> <h4>示例</h4> <pre><code class="language-html"> &lt;vh-interaction-management v-if="sdkInstance" ref="interactionManagement" :roomId="roomInfo.room_id" :docPermissionId="docPermission" :accountId="roomInfo.third_party_user_id" :speakerList="speakerList" :sdkInstance="sdkInstance" &gt;&lt;/vh-interaction-management&gt;</code></pre> <p>互动管理组件依赖互动 sdk 的加入和离开房间事件,所以初始化互动 sdk 实例时,需要传入 attributes 自定义字段,需要包含 role_name 和 nickname 字段。</p> <pre><code class="language-javascript">let context = { nickname: this.userInfo.nickname, role_name: this.roomInfo.role_name } let options = { accountId: this.roomInfo.third_party_user_id, // 第三方用户ID,必填 *不能是中文 inavId: this.roomInfo.inav_id, // 房间ID,必填 appId: this.roomInfo.app_id, // 应用ID,必填 roomId: this.roomInfo.room_id, token: this.roomInfo.paas_access_token, // access_token,必填 role: this.roomInfo.role_name == 1 ? VhallRTC.MASTER : VhallRTC.GUEST, attributes: JSON.stringify(context) } console.log('初始化互动sdk参数', options) VhallRTC.createInstance( options, res =&gt; { this.sdkInstance = res.vhallrtc console.log('互动SDK初始化成功', res) resolve() }, error =&gt; { console.error('互动SDK初始化失败', error) reject() } )</code></pre> <h4>props</h4> <table> <thead> <tr> <th style="text-align: left;">参数</th> <th style="text-align: left;">说明</th> <th style="text-align: left;">类型</th> <th style="text-align: left;">可选值</th> <th style="text-align: left;">默认值</th> <th style="text-align: left;">必填</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">sdkInstance</td> <td style="text-align: left;">互动 SDK 实例</td> <td style="text-align: left;">object</td> <td style="text-align: left;">-</td> <td style="text-align: left;">-</td> <td style="text-align: left;">是</td> </tr> <tr> <td style="text-align: left;">accountId</td> <td style="text-align: left;">用户 ID</td> <td style="text-align: left;">string</td> <td style="text-align: left;">-</td> <td style="text-align: left;"></td> <td style="text-align: left;">是</td> </tr> <tr> <td style="text-align: left;">roomId</td> <td style="text-align: left;">房间 ID</td> <td style="text-align: left;">string</td> <td style="text-align: left;">-</td> <td style="text-align: left;">-</td> <td style="text-align: left;">是</td> </tr> <tr> <td style="text-align: left;">docPermissionId</td> <td style="text-align: left;">主讲人 ID</td> <td style="text-align: left;">string</td> <td style="text-align: left;">-</td> <td style="text-align: left;">-</td> <td style="text-align: left;">是</td> </tr> <tr> <td style="text-align: left;">speakerList</td> <td style="text-align: left;">上麦人员列表</td> <td style="text-align: left;">array</td> <td style="text-align: left;">-</td> <td style="text-align: left;">[]</td> <td style="text-align: left;">是</td> </tr> </tbody> </table> <h4>sdkInstance</h4> <p>参考互动组件</p>

页面列表

ITEM_HTML