如何启动本示例项目

需下载HBuilderX，在HBuilderX导入项目，启动项目

本示例使用的vue以及node版本

vue: 2.0 node: v16.15.0 如果遇到因node版本不同导致运行不起来，请利用安装nvm切换node版本号。

对于开发的要求

需要先熟悉使用vue，以及了解uniapp开发、小程序开发。

关于项目的创建以及运行

1. uniapp项目创建教程；
2. 小程序配置：需要在manifest.json配置好appid:

/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "xxxxxxx",
        ......
    },

或者如下图，在HBuilderX点击manifest.json进行配置 3. 导入SDK 开发者可通过以下任意一种方式集成 SDK。

方式一：从官网下载SDK，手动集成

（1）请参考 下载 SDK 包，下载最新版本的 SDK。

（2）解压 SDK 压缩包，将 “ZegoExpressWebRTC-x.x.x.js” 文件拷贝到项目中。

（3）在使用到插件的 js 文件的最前面导入 SDK。

import { ZegoExpressEngine } from '../libs/ZegoExpressMiniProgram-x.x.x';

方式二： 使用 npm 获取 SDK

（1）执行 npm i zego-express-engine-miniprogram 命令安装依赖。 （2）在使用到插件的 js 文件的最前面导入 SDK。

import { ZegoExpressEngine } from "zego-express-engine-miniprogram"; // 以npm的方式引用

4. 运行小程序
5. 关于HBuilderX配置微信开发者工具路径，在运行设置里面的微信开发者工具路径中输入微信开发者工具的软件安装位置

运行环境

这里所使用的插件sdk仅支持微信小程序环境，虽然这里用的uniapp，但由于这里用的sdk目前是仅支持微信小程序环境。若有支持H5的需要，此方案不适用，或者用户可利用uniapp的条件编译引入web版的sdk进行h5开发，从而实现多端适配。

关于如何使用sdk的api

由此进入小程序使用sdk官方文档，根据文档说明使用。

关于组件引入

在这个示例代码中，我们使用的组件采用的是自动引入的原则，具体用法请参考uniapp 的 easycom，用户亦可选择在组件内自行引入。

可能会出现的问题

1. 调用uni.authorize 失败且无失败码，请查看小程序appId是否为游客模式，游客模式有些api调用不了。
2. 需要在main.js 添加以下代码来兼容 SDK 中对 setData 的调用。

// 针对小程序setData方法判断
Vue.prototype.setData = Vue.prototype.setData || function (data = {}, callback) {
  for (let key in data) {
    this[key] = undefined
    this[key] = data[key]
  }
  callback && this.$nextTick(callback)
}

3. 由于 ZegoExpressEngine 的实例对象过于复杂，若利用vue 对 ZegoExpressEngine 的实例进行响应式处理的话，会出现深拷贝报错，因为uniapp里面用的 JSON.stringify()无法处理所有数据类型，会报错，要避免 ZegoExpressEngine 引擎实例对象被响应式处理，建议是直接赋值到实例对象的属性上，如 this._zg = new ZegoExpressEngine(appID, server)

  data() {
        return {
            zegoEG: null
        }
    },
    async onReady() {
        this._zg = new ZegoExpressEngine(zegoAppID, server) //  data 中没有定义_zg，_zg 不会被响应式处理。
        this.zegoEG = new ZegoExpressEngine(zegoAppID, server) // zegoEG 会被响应式处理，会报错，报错可能如下图。
    }