微信小程序结合腾讯云 IM 实现线上问诊视频功能指南

一、引言

在医疗行业数字化转型的浪潮中，线上问诊逐渐成为一种重要的医疗服务模式。微信小程序凭借其便捷性和广泛的用户基础，为线上问诊提供了理想的平台。腾讯云即时通信（IM）则提供了强大稳定的通信能力，将二者结合可以高效地实现线上问诊的视频功能，为患者和医生搭建实时沟通的桥梁。本文将针对初级开发者，详细介绍如何实现微信小程序结合腾讯云 IM 的线上问诊视频功能。

二、准备工作

注册腾讯云账号：访问腾讯云官网（https://cloud.tencent.com/ ），按照提示完成注册流程，并进行实名认证。这是使用腾讯云各项服务的基础。
开通腾讯云 IM 服务：在腾讯云控制台中，找到即时通信 IM 服务并开通。开通后，你将获取到 SDKAppID 等关键信息，这些信息在后续集成 SDK 时会用到。
安装微信开发者工具：从微信官方网站（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ）下载并安装微信开发者工具。它是开发和调试微信小程序的必备工具。

三、创建微信小程序项目

打开微信开发者工具：启动微信开发者工具后，点击 “新建项目”。
填写项目信息：在弹出的窗口中，填写项目名称、选择项目存放的目录。如果有自己的微信小程序 AppID，填入即可；若没有，也可选择使用测试号进行开发。
初始化项目：选择合适的微信小程序基础库版本，然后点击 “确定” 完成项目的初始化。基础库版本决定了小程序可以使用的 API 和功能特性。

四、集成腾讯云 IM SDK

下载 SDK：前往腾讯云 IM 官方文档页面（https://cloud.tencent.com/document/product/269/9248 ），找到适用于微信小程序的 SDK 进行下载。
解压并引入 SDK：将下载的 SDK 压缩包解压，把整个解压后的文件夹复制到微信小程序项目的 miniprogram_npm 目录下。如果项目中没有该目录，需先在项目根目录执行 npm init -y 初始化 npm 环境，然后执行 npm install tim - sdk - wx 安装 SDK。这一步是为了让小程序能够引用腾讯云 IM 的相关功能。
配置 project.config.json：在 project.config.json 文件中，添加以下配置：

{
    "miniprogramRoot": "miniprogram/",
    "packageManager": {
        "packageWxss": true,
        "enablePlugin": true
    },
    "setting": {
        "urlCheck": false, // 关闭 URL 合法性检查，方便开发调试
        "es6": true, // 开启 ES6 语法支持
        "minified": true, // 开启代码压缩，减小代码体积
        "postcss": true, // 开启 PostCSS 支持，用于样式预处理
        "enhance": true,
        "scopeDataCheck": false,
        "lazyloadPlaceholderEnable": true,
        "nodeModules": true, // 开启对 node_modules 的支持，以便引入 SDK
        "showShadowRootInWxmlPanel": true,
        "debug": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.13.1",
    "appid": "your - appid",
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "message": {
            "current": -1,
            "list": []
        },
        "item": {
            "current": -1,
            "list": []
        },
        "fragment": {
            "current": -1,
            "list": []
        }
    }
}

确保 "nodeModules": true，这样才能使小程序正确加载和使用从 npm 安装的 SDK。

五、实现线上问诊视频功能的基本步骤

初始化腾讯云 IM：在小程序的 app.js 文件中初始化腾讯云 IM，这一步是为了让小程序能够使用腾讯云 IM 的各项功能。

import TIM from 'tim - sdk - wx';
import COS from 'cos - wxjs - sdk';

App({
    onLaunch: function () {
        // 初始化腾讯云 IM
        this.tim = TIM.create({
            SDKAppID: 0 // 请替换为你在腾讯云获取的真实 SDKAppID
        });
        this.tim.setLogLevel(0); // 设置日志级别，0 表示不输出日志，可根据调试需求调整
        this.cos = new COS({
            getAuthorization: function (options, callback) {
                // 此处需要自行实现获取签名的逻辑
                // 腾讯云 COS 需要签名才能进行文件上传等操作，在实际项目中
                // 可以通过向自己的服务器发送请求，由服务器生成并返回签名
                // 示例：wx.request({...}) 获取签名后 callback(null, {Authorization: '签名'})
            }
        });
    }
});

发起线上问诊视频通话：在用于发起线上问诊的页面（例如 pages/onlineConsultation/onlineConsultation.js）编写如下代码。这个页面主要负责发起视频通话请求以及处理相关的响应。

Page({
    data: {
        callId: '', // 用于存储视频通话的 ID
        isCalling: false, // 标识是否正在发起或进行视频通话
        doctorId: '' // 医生的 ID，在实际应用中可从页面参数或本地存储获取
    },
    onLoad: function (options) {
        // 从页面参数中获取医生 ID，假设传递参数名为 'doctorId'
        this.setData({
            doctorId: options.doctorId
        });
        // 监听 IM 事件，例如接听视频通话邀请
        const that = this;
        const tim = getApp().tim;
        tim.on(TIM.EVENT.CALL_INVITE, function (event) {
            // 处理视频通话邀请
            wx.showModal({
                title: '线上问诊视频邀请',
                content: '医生邀请你进行线上问诊视频通话',
                success(res) {
                    if (res.confirm) {
                        // 接听视频通话
                        tim.acceptCall({
                            callId: event.data.callId,
                            type: event.data.type
                        }).then(function (imResponse) {
                            // 处理接听成功逻辑，例如显示视频通话界面
                            that.setData({
                                callId: imResponse.data.callId,
                                isCalling: true
                            });
                        }).catch(function (imError) {
                            // 处理接听失败逻辑，如提示用户失败原因
                            wx.showToast({
                                title: '接听失败',
                                icon: 'none'
                            });
                        });
                    } else {
                        // 拒绝视频通话
                        tim.rejectCall({
                            callId: event.data.callId,
                            type: event.data.type
                        }).then(function (imResponse) {
                            // 处理拒绝成功逻辑，可提示用户已拒绝
                            wx.showToast({
                                title: '已拒绝',
                                icon:'success'
                            });
                        }).catch(function (imError) {
                            // 处理拒绝失败逻辑，如提示用户失败原因
                            wx.showToast({
                                title: '拒绝失败',
                                icon: 'none'
                            });
                        });
                    }
                }
            });
        });
    },
    startVideoCall: function () {
        const that = this;
        const tim = getApp().tim;
        const toUser = this.data.doctorId; // 获取医生 ID 作为通话对象
        tim.call({
            to: toUser,
            type: 'video'
        }).then(function (imResponse) {
            that.setData({
                callId: imResponse.data.callId,
                isCalling: true
            });
            // 处理发起视频通话成功逻辑，例如显示视频通话界面
            wx.showToast({
                title: '视频通话发起成功',
                icon:'success'
            });
        }).catch(function (imError) {
            // 处理发起视频通话失败逻辑，如提示用户失败原因
            wx.showToast({
                title: '视频通话发起失败',
                icon: 'none'
            });
        });
    }
});

页面布局与样式：在 pages/onlineConsultation/onlineConsultation.wxml 文件中编写页面布局，这个布局展示了发起视频通话的按钮以及可以显示视频通话界面的区域。

<view class="container">
    <view class="button - group">
        <button bindtap="startVideoCall" wx:if="{{!isCalling}}">发起线上问诊视频通话</button>
    </view>
    <!-- 视频通话界面可以在此处根据需求添加，例如 <video - call - component call - id="{{callId}}"></video - call - component> -->
</view>

在 pages/onlineConsultation/onlineConsultation.wxss 文件中添加样式，使页面看起来更美观。

.container {
    padding: 20px;
}

.button - group {
    margin - bottom: 20px;
}

六、常见问题及解决方案

（一）SDK 引入问题

问题：小程序编译时提示找不到 tim - sdk - wx 模块。
- 解决方案：
  - 确认是否已正确执行 npm install tim - sdk - wx 命令安装 SDK。若未安装，在项目根目录执行该命令。
  - 检查 project.config.json 文件中 nodeModules 字段是否为 true，若不是，修改为 true 并重新编译。
  - 查看 miniprogram_npm 目录下是否存在 tim - sdk - wx 文件夹，若不存在，重新下载 SDK 并解压到该目录。
问题：引入 SDK 后，出现语法错误或某些 API 无法使用。
- 解决方案：
  - 确认微信开发者工具的基础库版本是否支持 SDK 所使用的语法和 API。如果不支持，尝试升级基础库版本。
  - 检查 SDK 的版本是否与文档要求一致，若不一致，重新下载正确版本的 SDK。

（二）初始化问题

问题：在 app.js 中初始化腾讯云 IM 时，提示 SDKAppID 无效。
- 解决方案：
  - 回到腾讯云控制台，确认获取的 SDKAppID 是否正确，注意不要遗漏或错误输入任何字符。
  - 检查网络连接是否正常，确保能够与腾讯云服务器进行通信。

（三）视频通话问题

问题：发起视频通话时，对方未收到邀请。
- 解决方案：
  - 检查 doctorId（通话对象 ID）是否正确获取并传递给 tim.call 方法。在实际应用中，确保获取的医生 ID 与腾讯云 IM 中注册的 ID 一致。
  - 确认双方的网络连接是否稳定。可以在发起和接听端添加网络状态监测代码，如 wx.getNetworkType，提示用户检查网络。
  - 查看腾讯云 IM 的配额是否充足，若配额不足，可能导致部分功能受限。前往腾讯云控制台查看相关配额信息。
问题：视频通话过程中画面卡顿或声音不清晰。
- 解决方案：
  - 优化网络环境，建议在 Wi-Fi 环境下进行视频通话，或者检查移动网络信号强度。同时，在小程序中可以添加网络优化代码，如开启 TCP 长连接等。
  - 对视频流进行适当的压缩处理，降低视频分辨率和帧率。腾讯云提供了相关的视频处理工具和 API，可以根据实际情况进行调整。
  - 检查设备的摄像头和麦克风是否正常工作。可以在小程序中添加设备检测功能，提示用户允许小程序使用相关设备权限。

（四）签名问题

问题：在获取 COS 签名时出现错误，导致无法进行相关操作（如文件上传等，虽然本文未详细涉及上传，但在实际视频功能扩展中可能用到）。
- 解决方案：
  - 仔细检查获取签名的逻辑代码，确保请求的 URL、参数等正确无误。根据腾讯云文档，正确构建签名请求。
  - 确认服务器端生成签名的算法是否与腾讯云要求一致。常见错误包括密钥使用错误、时间戳问题等，需按照腾讯云官方文档进行核对。

文章版权归作者所有，未经允许请勿转载。

THE END

前端开发微信小程序技术点滴