即时通讯 (uni-app) 跑通示例代码

跑通示例源码

示例源码

点击获得完整代码。

1 概览

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

2 准备环境

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

HBuilder X 3.0.5 或以上版本。
iOS 11.0 或以上版本的 iOS 真机设备，暂不支持模拟器。
Android 版本不低于 4.1 的 Android 设备，暂不支持模拟器。如果为真机，请开启“允许调试”选项。
iOS/Android 设备已经连接到 Internet。

3 前提条件

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

注意

2.3.0 及以上版本的 SDK，开始支持 “AppSign 鉴权”，同时仍支持 “Token 鉴权”，若您需要升级鉴权方式，可参考 ZIM 如何从 AppSign 鉴权升级为 Token 鉴权。

4 示例源码目录结构

下列结构为 IM 源码文件的子目录结构，下文所涉及的文件路径均为相对于此目录的路径。

Untitled

├── App.vue
├── assets
│   ├── js
│   │   ├── utils.js
├── components
├── index.html
├── main.js
├── manifest.json
├── pages
│   ├── action
│   │   ├── createC2C.vue
│   │   ├── createGroup.vue
│   │   ├── createRoom.vue
│   │   ├── joinGroup.vue
│   │   └── joinRoom.vue
│   ├── chat
│   │   ├── chat.vue
│   │   ├── info.vue
│   │   └── memberList.vue
│   ├── group
│   │   ├── group.vue
│   │   ├── info.vue
│   │   ├── memberAdd.vue
│   │   ├── memberDelete.vue
│   │   ├── memberList.vue
│   │   ├── modifyName.vue
│   │   ├── modifyNotice.vue
│   │   ├── modifyOwner.vue
│   │   └── modifyRemark.vue
│   ├── home
│   │   └── home.vue
│   └── login
│       └── login.vue
├── pages.json
├── static
│   ├── customicons.css
│   └── customicons.ttf
├── store
│   └── index.js
├── uni.scss

Copied!

5 运行示例源码

打开 HBuilderX，选择 “文件 > 导入 > 从本地目录导入”，导入示例源码文件。
打开 “assets/js” 文件夹下的 “config.js” 文件，并使用本文 3 前提条件已获取的 AppID 、AppSign 和 ServerSecret 正确填写，并保存。
- 如果您的应用搭配 iOS、Android 使用：
Untitled
export const appConfig = { appID: , // 填写申请的 AppID appSign: , // 填写申请的 AppSign，搭配 iOS/Android 平台时需要填写 };
1
Copied!
- 如果您的应用搭配 Web、小程序使用：
Untitled
export const appConfig = { appID: , // 填写申请的 AppID serverSecret: , // 填写申请的 ServerSecret，搭配 Web 平台时，需要生成 Token 使用 };
1
Copied!
若您的项目已切换为 “Token 鉴权”，请在 ZEGO 控制台上，申请临时 Token 用于调试。
在项目中导入插件，具体操作请参考在 uni-app 项目中导入插件。