wepy接入sdk文档
## 目录结构
```
src
├─app.wpy
├─trtc // VR带看页面和组件
| ├─videoDaiKan.wpy // 视频带看页面
| ├─vrRoom.wpy // 语音带看页面
| ├─components // 带看组件
├─pages
| └index.wpy // 首页示例页面
```
## 使用
```bash
$ cd vr-demo # 进入到项目目录
$ npm install # 安装项目依赖包
$ npm run dev # 监听并且编译项目
```
## wepy2项目接入思为VR带看步骤
#### 1. 将demo中的trtc文件夹拷贝到自己项目中的src下
#### 2. 添加页面配置——VR语音带看页面（必须）、视频带看页面（可选）
#### 3. 可以根据自己需求选择将页面添加到主包或分包，此demo添加在分包中
##### 配置示例：
- 在app.wpy配置带看页面
```
<config>
{
pages: [
'pages/index',
],
"subpackages": [
{
"root": "trtc",
"pages": [
"vrRoom",
"videoDaiKan"
]
},
],
}
</config>
```
#### 4. SDK需要传入以下参数，可通过在跳转至VR带看页面url上拼接相关参数，带看页面处理后传入
##### 调试参数：
###### 1. 顾问发起
- 顾问：
**第一套环境**
```
roomID=64&rid=languangweilaicheng_12479&userUuid=1146397101027405826&openId=1146397101027405826&role=1&projectCode=1100574722257833985&trtcScene=sale&nodeEnv=development&tenant=languang
```
**新增测试环境**
```
roomID=2&rid=languangweilaicheng_12479&userUuid=1354627535114870785&openId=1354627535114870785&role=1&projectCode=1100574722257833985&trtcScene=sale&nodeEnv=development&tenant=languang
```
- 访客：
**第一套环境**
```
roomID=64&rid=languangweilaicheng_12479&userUuid=1146397101027405826&openId=1310839780887326722&role=2&projectCode=1100574722257833985&trtcScene=sale&nodeEnv=development&tenant=languang
```
**新增测试环境**
```
roomID=2&rid=languangweilaicheng_12479&userUuid=1354627535114870785&openId=1354714800965091329&role=2&projectCode=1100574722257833985&trtcScene=sale&nodeEnv=development&tenant=languang
```
###### 2. 访客发起
-访客呼叫
```
nodeEnv=development&tenant=languang&openId=1310839780887326722&role=2&rid=languangweilaicheng_12479&projectCode=1100574722257833985&trtcScene=customer
```
-顾问收到小程序推送
```
推送链接在demo里有打印 搜索'小程序推送url'可获取 再添加两个参数访客创建的房间Id和选择的顾问，可从访客端的v-console（点击⚙️icon打开）里的network获取
```
##### 参数说明
| 名称 | 类型 | 是否必须 | 描述 | 默认值 |
| ----------- | ------ | -------- | ------------------------------------- | ---------- |
| openId | string | 必须 | 当前用户id | |
| userUuid | string | 非必须 | 顾问id（顾问发起必传） | |
| roomID | string | 非必须 | 房间名称（顾问发起必传） | |
| role | string | 必须 |sale 顾问 customer 访客 | |
| trtcScene | string | 必须 | 带看场景 1 访客发起 2 顾问发起 | |
| projectCode | string | 必须 | 项目名称 | |
| rid | string | 必须 | 微沙盘资源id | |
| nodeEnv | string | 必须 | 环境变量 'development' / 'production' | production |
| tenant | string | 必须 | 租户名 | default |
#### 5. 需提供如下页面地址和对应跳转方式（redirectTo、navigateTo、reLaunch、reLaunch）
```
vrRoomPath: '/trtc/vrRoom', // vr带看页面地址
saleHangUpPath: '/pages/pageA/myCustomers/index', // 顾问挂断返回地址
visitorHangUpPath1: '/pages/tab/mine', // 访客挂断返回地址（未接通）
visitorHangUpPath2: '/pages/tab/properties', // 访客挂断返回地址（已接通）
videoCallPage: '/trtc/videoDaiKan' // 视频带看页面地址
```
**ps：挂断跳转链接支持携带参数（传入SDK的参数都能获取到），格式如下：**
```
/pages/pageA/myCustomers/index?project=${projectCode}
```
#### 6. 带看生命周期
带看组件在各生命周期，暴露了不同的事件参数，可通过监听带看组件（vr带看、视频带看）的vrEvent的获取。
##### 示例demo
```
<template>
<div>
<vr-many :options="options" @vrEvent="handleVrEvent"></vr-many>
</div>
</template>
<script>
import wepy from '@wepy/core'
wepy.page({
name: 'vrRoom',
data: {
options: {}
},
methods: {
handleVrEvent(e) {
console.log('handleVrEvent', e.$wx.detail) // 参数可从e.$wx.detail获取
}
},
onLoad (options) {
this.options = options
},
})
</script>
```
##### 回调参数说明
| 参数名 | 参数说明 | 是否必传 |
| :--------- | :----------------------------- | :----------- |
| eventType | 事件名称,具体事件见下表 | 必须 |
| nickname | 昵称 | 非必须 |
| targetUser | 事件触发者的id | 非必须 |
| role | 角色：1顾问 2 访客 | 非必须 |
| micStatus | 麦克风状态：false关麦 true开麦 | 开关麦时必传 |
|roomInfo | 房间信息对象:id(房间id)、userUuid(房间绑定顾问)、resourceId(绑定沙盘)、title(沙盘标题-分享小程序卡片可用)、cover(沙盘封面图-分享小程序卡片可用)） | 必传 |
| materialInfo | 顾问发送的营销物料的信息（名称、跳转信息等） | 顾问发送营销物料eventType为sendMaterial事件必传 |
| marketMsgInfo | 访客点击顾问发送的营销物料 | 访客点击营销消息清单eventType为clickMarketMsg事件必须传 |
##### eventType事件类型
| 事件名称 | 触发时机 |
| :-------------- | :------------------------- |
| sendLiveMsg | 点击呼叫顾问 |
| acceptInvite | 倒计时结束即将跳转视频带看 |
| videoWatch | 进入视频带看 |
| backToVR | 返回VR带看 |
| saleHangUp | 销售挂断视频带看 |
| toggleDrawBoard | 打开画板 |
| exitDrawBoard | 退出画板 |
| toggleAudio | 切换麦克风状态 |
| joinRoom | 加入房间 |
| sendMaterial | 顾问发送营销物料 |
| clickMarketMsg | 访客点击营销消息清单 |
## 其他注意事项
1. 需要在小程序后台添加**类目**「视频客服」
2. 需要在小程序后**开发** => **接口设置** 打开实时视频开关
3. 需要在小程序配置**websocket接口**「wss://imapi.ideamake.cn」
4. 需要将H5项目上传到和微沙盘同域的目录下
5. 需要确保是否通过思为云创制作了微沙盘
6. trtc兼容性情况：
> 微信 App iOS 最低版本要求：7.0.9
微信 App Android 最低版本要求：7.0.8
小程序基础库最低版本要求：2.10.0
>
### FAQ
1. 微沙盘无法同屏操作
先检查H5的房间号是否在同一个房间，`role`是否有传
检查微沙盘的`bundle`版本，目前版本`v0.3.8.2020-10-27.0001`
2. 访客端无法操作（已解决）
目前访客端暂时不支持同屏操作，下个版本会支持到。
3. 听不到声音
a. 检查手机兼容性
` 微信 App iOS 最低版本要求：7.0.9
微信 App Android 最低版本要求：7.0.8
小程序基础库最低版本要求：2.10.0`
b. 检查小程序后台是否打开实时音视屏开关
c. trtc基于UDP协议传输，请保证当前网络环境没有禁用UDP协议
4. 出现间隔性「socket重连」
同一个用户只能登陆一台终端，确定是否登陆多个终端（开发工具和真机）
5. 收不到订阅消息
确保是否有触发消息订阅，确保当前小程序是否添加了订阅消息模板
6. trtc socket连接发送消息到别的socket（影响到之前旧的socket）
确保旧的socket是否做了命名空间
[1]: https://cdn.ideamake.cn/wxa-applet/marketcloud/docs/bgy_trtc_mind.png
[2]: https://cdn.ideamake.cn/wxa-applet/marketcloud/docs/bgy_trtc_access.jpg
[3]: https://cdn.ideamake.cn/wxa-applet/marketcloud/docs/bgy_trtc_front.jpg
[4]: https://cdn.ideamake.cn/wxa-applet/marketcloud/docs/trtc_version.png
[5]: https://cdn.ideamake.cn/wxa-applet/marketcloud/docs/trtc_ring.jpg