跑通示例源码

概览

本文介绍使用 微信原生小程序 和 uni-app 框架，如何快速跑通示例源码，体验即时通讯服务。

准备环境

在运行示例源码前，请确保开发环境满足以下要求：

• HBuilder X 3.0.5 或以上版本（使用uni-app 框架开发时需要）。
• 电脑设备安装了 微信开发者工具。
• 设备已连接到网络。
• 微信小程序基础库版本及微信版本，请参考 平台兼容。

前提条件

• 已在 ZEGO 控制台 创建项目，获取到了接入 ZIM SDK 服务所需的 AppID 和 ServerSecret。ZIM 服务权限不是默认开启的，使用前，请先在 ZEGO 控制台 自助开通 ZIM 服务（详情请参考 项目管理 - 即时通讯），若无法开通 ZIM 服务，请联系 ZEGO 技术支持开通。

• 请在 微信公众平台 上进行 服务器域名配置。选择“小程序后台 > 开发 > 开发设置 > 服务器域名”菜单，按照协议分类，将以下域名地址填写到指定的 “request 合法域名” 或 “socket 合法域名” 或 “uploadFile 合法域名” 或 “downloadFile 合法域名” 中。

  若开发者需要在其他平台（如百度、支付宝或字节跳动）运行示例源码或开发上述平台的小程序，请在对应平台配置服务器域名。

  小程序服务器配置分类	域名	适用SDK版本	描述
  socket 合法域名	wss://webzim-sh2.zego.im	1.2.0 ~ 2.1.5	接入域名：ZEGO 服务器的 WebSocket 通信地址。
  	wss://webzim-sh2-bak.zego.im
  	wss://accesshub-wss.zego.im	2.2.0 ~ 2.12.0
  	wss://accesshub-wss.coolbcloud.com	2.13.0 及以上
  	wss://accesshub-wss.coolccloud.com
  	wss://accesshub-wss.coolgcloud.com
  	wss://accesshub-wss.coolhcloud.com
  	wss://accesshub-wss.coolzcloud.com
  	wss://accesshub-global.coolbcloud.com
  	wss://accesshub-global.coolccloud.com
  	wss://accesshub-global.coolgcloud.com
  	wss://accesshub-global.coolhcloud.com
  	wss://accesshub-global.coolzcloud.com
  	wss://webzim-report.zego.im	1.2.0 ~ 2.11.0	数据上报：分析 SDK 数据。
  	wss://weblogger-wss.zego.im	2.12.0 及以上
  	wss://weblogger-wss.coolbcloud.com
  	wss://weblogger-wss.coolccloud.com
  	wss://weblogger-wss.coolgcloud.com
  	wss://weblogger-wss.coolhcloud.com
  	wss://weblogger-wss.coolzcloud.com
  request 合法域名	https://cloud-setting-api.zego.im	1.2.0 ~ 2.1.5	云控配置：动态修改 SDK 能力。
  	https://cloud-setting-api.zegocloud.com
  	https://webzim-detaillog.zego.im	1.2.0 ~ 2.11.0	日志上报：排查故障，定位问题。
  	https://detaillog-global.zego.im	2.12.0 及以上
  	https://detaillog-global.coolbcloud.com
  	https://detaillog-global.coolccloud.com
  	https://detaillog-global.coolgcloud.com
  	https://detaillog-global.coolhcloud.com
  	https://detaillog-global.coolzcloud.com
  	https://zego-zim-smsh.oss-cn-shanghai.aliyuncs.com	2.2.0 ~ 2.11.0	文件媒体消息：文件媒体消息的 URL。
  	https://zego-zim-zimsh.oss-cn-shanghai.aliyuncs.com
  	https://zimfile-sh2.zego.im
  	https://access-zfpxy-global.zego.im	2.12.0 及以上
  	https://access-zfpxy-global.coolbcloud.com
  	https://access-zfpxy-global.coolccloud.com
  	https://access-zfpxy-global.coolgcloud.com
  	https://access-zfpxy-global.coolhcloud.com
  	https://access-zfpxy-global.coolzcloud.com
  uploadFile 合法域名	https://webzim-detaillog.zego.im	1.2.0 ~ 2.11.0	日志上报：排查故障，定位问题。
  	https://detaillog-global.zego.im	2.12.0 及以上
  	https://detaillog-global.coolbcloud.com
  	https://detaillog-global.coolccloud.com
  	https://detaillog-global.coolgcloud.com
  	https://detaillog-global.coolhcloud.com
  	https://detaillog-global.coolzcloud.com
  	https://zego-zim-smsh.oss-cn-shanghai.aliyuncs.com	2.2.0 ~ 2.11.0	文件媒体消息：文件媒体消息的 URL。
  	https://zego-zim-zimsh.oss-cn-shanghai.aliyuncs.com
  	https://zimfile-sh2.zego.im
  	https://access-zfpxy-global.zego.im	2.12.0 及以上
  	https://access-zfpxy-global.coolbcloud.com
  	https://access-zfpxy-global.coolccloud.com
  	https://access-zfpxy-global.coolgcloud.com
  	https://access-zfpxy-global.coolhcloud.com
  	https://access-zfpxy-global.coolzcloud.com
  downloadFile 合法域名	https://zego-zim-smsh.oss-cn-shanghai.aliyuncs.com	2.2.0 ~ 2.11.0	文件媒体消息：文件媒体消息的 URL。
  	https://zego-zim-zimsh.oss-cn-shanghai.aliyuncs.com
  	https://zimfile-sh2.zego.im
  	https://access-zfpxy-global.zego.im	2.12.0 及以上
  	https://access-zfpxy-global.coolbcloud.com
  	https://access-zfpxy-global.coolccloud.com
  	https://access-zfpxy-global.coolgcloud.com
  	https://access-zfpxy-global.coolhcloud.com
  	https://access-zfpxy-global.coolzcloud.com

示例源码目录结构

• 下列结构为 微信原生小程序 开发的的源码文件的子目录结构，下文所涉及的文件路径均为相对于此目录的路径，请参考 运行微信原生小程序示例源码。

  ├── README.md
  ├── miniprogram
  │   ├── app.ts
  │   ├── behavior
  │   ├── components
  │   ├── custom-tab-bar
  │   ├── pages
  │   ├── service
  │   │   └── ZIMService.ts
  │   └── utils
  │       └── util.ts
  ├── package.json
  ├── project.config.json
  ├── tsconfig.json
  └── typings

• 下列结构为 uni-app 框架 开发的源码文件的子目录结构，下文所涉及的文件路径均为相对于此目录的路径，请参考 使用 uni-app 框架示例源码运行到微信小程序平台。

  ├── App.vue
  ├── assets
  │   ├── js
  │   │   ├── zego-zim-miniprogram
  │   │   ├── zego-zim-web
  │   │   ├── utils.js
  ├── components
  ├── index.html
  ├── main.js
  ├── manifest.json
  ├── pages
  │   ├── action
  │   │   ├── createC2C.vue
  │   │   ├── createGroup.vue
  │   │   ├── createRoom.vue
  │   │   ├── joinGroup.vue
  │   │   └── joinRoom.vue
  │   ├── chat
  │   ├── group
  │   ├── home
  │   └── login
  ├── pages.json
  ├── static
  ├── store
  ├── uni.scss

运行微信原生小程序示例源码

1. 打开 微信开发者工具，导入源码项目。

2. 打开 “miniprogram/utils” 文件夹下的 “util.ts” 文件，并使用本文 前提条件 已获取的 AppID 和 ServerSecret 正确填写，并保存。

   export const appConfig = {
       appID: 0, // 填写申请的 AppID
       serverSecret: '', // 填写申请的 ServerSecret
   }; 

3. 保存成功后，打开终端，执行 npm i 命令，安装 npm 依赖包。

4. 点击微信开发者工具的工具栏，选择 “构建 npm”，等待编译完成即可运行。

   

使用 uni-app 框架示例源码运行到微信小程序平台

1. 打开微信开发者工具，选择 “设置 > 安全设置”，打开服务端口。

   

2. 打开 HBuilderX，选择 “文件 > 导入 > 从本地目录导入”，导入示例源码文件。

   

3. 打开 “assets/js” 文件夹下的 “config.js” 文件，并使用本文 前提条件 已获取的 AppID 和 ServerSecret 正确填写，并保存。

   export const appConfig = {
       appID: 0, // 填写申请的 AppID
       serverSecret: '', // 填写申请的 ServerSecret
   }; 

4. 点击 HBuilderX 工具栏，选择 “运行 > 运行到小程序模拟器 > 运行设置”，填入“微信开发者工具路径”，并保存。

   

5. 点击 HBuilderX 工具栏，选择 “运行 > 运行到小程序模拟器 > 运行时是否压缩代码”。

   

6. 点击 HBuilderX 工具栏，选择 “运行 > 运行到小程序模拟器 > 微信开发者工具”，等待编译完成即可。

   

使用 uni-app 框架示例源码运行到 ZIM SDK 支持的其他小程序平台（百度、支付宝、字节跳动）

下载对应平台的小程序开发者工具后，参考本文 使用 uni-app 框架示例源码运行到微信小程序平台 运行即可。

常见问题

请参考 uni-app 常见问题。