小鱼小程序SDK v1.x迁移到v3.x指南

# 移除旧包
$ npm uninstall xylink-sdk

# 安装新包
$ npm install @xylink/xy-mp-sdk --save

"usingComponents": {
    "xylink-room": "xylink-sdk"
 },

"usingComponents": {
    "xylink-room": "@xylink/xy-mp-sdk/component"
 },
"pageOrientation": "landscape",
"navigationStyle": "default"

import xylink from 'xylink-sdk/common/room.js'

// 可选项，私有云环境配置域名，公有云不需要调用，需要在Login前调用：
xylink.setDomain(wsDomain, requestDomain);

// 小鱼登录方法
xylink.login(token, (response) => {
  // ....
})

// 小鱼呼叫会议方法
xylink.makeCall(number, password, name, (response) => {
  // 响应makeCall状态，如果为200，可以进行隐藏呼叫Loading页面，执行start方法通知组件内部进行一系列入会操作
  const { code, message } = response;

  if (code === 200) {
    // 隐藏Loading
    this.setData({
      meetingLoading: false,
    });

    // 通知内部事件开始做入会准备，连接WSS、启动事件推送
    this.xylinkRoomComponent.start();
  } else {
    // 呼叫失败，提示信息
    this.showToast(message);
  } 
})

import XYRTC from "@xylink/xy-mp-sdk";

Page({
  // 页面加载时触发
  onLoad(option) {
    // 保存到当前页面的实例上，后续需要调用client内部的方法
    this.XYClient = XYRTC.createClient({
      // 自动布局下针对画面容器上下左右的偏移量
      container: {
        offset: [0, 0, 0, 0]
      }
    });
  },
})

// 公有云不需要调用，如需要调用，请在Login前调用：
// eg: wxrtc.xylink.com
this.XYClient.setServer(server);

this.XYClient.login(token, this.onCallbackGetNumber);

// onCallbackGetNumber回调函数的逻辑不变

this.XYClient.makeCall({ number, password, displayName }, (response) => {
  // 最新的逻辑仅需要处理异常呼叫入会即可，其他逻辑不需要再处理
    const { code, message } = response;
  
    if (code !== 200) {
      this.showToast({ title: message }, () => {
        // 退出呼叫页面
        wx.navigateBack({ delta: 1 });
      });
    }
});

onRoomEvent(event) {
  const { type, detail } = event.detail;

  switch (type) {
    case 'connected':
      // 加入会议成功，隐藏呼叫等待页面
      this.setData({ meetingLoading: false, });
      
      break;
    // 其他处理...
  }
}

onRoomEvent(event) {
  const { type, detail } = event.detail;

  switch (type) {
    case "disconnected":
      // 逻辑同之前一致，收到后判断是否有message，存在则提示并退会，不存在直接退出会议
      // 方法见Demo示例程序
      this.disConnectMeeting(detail);
      break;
  }
}

// 旧方式
// 因为旧方式下，页面是竖屏方式布局，所以设定了宽度为10vw，高度100vh，通过内部元素旋转模拟出横屏效果
.xylink-operate-box {
  position: fixed;
  // ...其他样式
  width: 10vw;
  height: 100vh;
}

// 新方式
// 新方式下，由于屏幕整体设置为横屏模式，所以正常布局即可
.xylink-operate-box {
  position: fixed;
  // ...其他样式
  width: 100vw;
  height: 40px;
  // 新增层级控制
  z-index: 100;
}

// 旧方式
<view class="xylink-operate-box xylink-operate-left">
  <view bindtap="onSwitchPosition" class="trans90">
    {{ devicePosition === 'front' ? "前置" : "后置" }}
  </view>
  <view bindtap="onChangeMuted" class="trans90">{{ muted ? "静音" : "取消静音" }}</view>  
  <view bindtap="onSwitchCamera" class="trans90">{{ camera ? "关闭视频" : "开启视频" }}</view>
  <view bindtap="onStopMeeting" class="trans90">挂断</view>
</view>

// 新方式
<view class="xylink-operate-box xylink-operate-left">
  <view bindtap="onSwitchPosition" class="">
    {{ devicePosition === 'front' ? "前置" : "后置" }}
  </view>
  <view bindtap="onChangeMuted" class="">{{ muted ? "静音" : "取消静音" }}</view>
  <view bindtap="onSwitchCamera" class="">{{ camera ? "关闭视频" : "开启视频" }}</view>
  <view bindtap="onStopMeeting" class="">挂断</view>
</view>