如何用即构ZEGO SDK和uni-app开发一款直播带货应用？

直播电商早已不是什么新鲜词了，而是已经成为愈发重要的销售渠道。越来越多的消费者通过带货直播下单购物，直播平台、中小电商品牌商家，都想通过开发多端、高质量的直播获得各渠道更多的潜在客户，从而实现市场拓展。

从数据来看，直播电商的用户规模一直在稳步增长，这也说明这个领域的潜力还在不断释放。

不过，开发一款带货直播应用会面临不少挑战。首先是直播的画质、音质和延迟的问题，这直接决定了用户体验。在这方面，ZEGO 作为行业领先的高质量实时音视频云服务提供商，早就为自建直播平台提出了全套解决方案。另一个挑战则在于多端直播需要跨平台技术架构的开发、维护和迭代，而使用 uni-app HBuilderX 工具集成开发环境，能够实现一套代码90%以上逻辑复用，一键打包多端适配，大大缩短了开发和迭代的周期。

讲了这么多优势特点，下面就来聊聊如何使用 ZEGO SDK 和 uni-app 开发一款直播带货 app，让你快速上手这一热门领域。

技术实现

一、准备好开发环境

在正式开始开发之前，我们需要做好一系列的准备工作，以确保开发环境的顺利配置

1、首先，在 ZEGO控制台中创建项目，并申请获取有效的 AppID、AppSign 或 Token，这是后续集成 SDK 和进行音视频通信的基础。

2、接下来，安装 uni-app 官方 IDE——HBuilderX（记得3.0.0或以上版本，避免版本兼容问题）。

3、准备好各端开发的设备。

平台	设备
App	iOS（iOS 12.0 或以上版本且支持音视频的 iOS 设备）及 Android （Android 4.4 或以上版本且支持音视频的 Android 设备）
Web	Windows 或 macOS 计算机，使用最新的 Chrome 浏览器

4、在 HBuilderX 中创建您的 UniApp 项目。

①启动 HBuilderX，选择“文件>新建>项目>

②在弹出的表单中，选择“uni—app”平台，并填写您的项目名称，单击创建就完成了。

二、跑通示例源代码，先有个整体印象

完成好开发环境搭建后，为了让你先熟悉以下大概的流程和功能模块，可以按照文档先跑通示例源代码，源代码点击下方链接下载。

示例源码下载

三、关键一步——集成 SDK

1、集成 SDK

1.1 下载SDK

SDK 下载有两种方式，按照你的习惯选择。

方法一：ZEGO官网下载 SDK

前往即构官网下载 [Express-Video SDK](https://doc-zh.zego.im/article/7776?soure=cnblog&keyword=200001）

方法二：在 uni-app 插件市场获取 Express-Video SDK

在 uni-app 插件市场任选一种方式导入：

下载 SDK 到本地，解压缩 “zego-ZegoExpressUniAppSDK” 文件。将解压缩后的文件夹，直接复制到项目工程根目录下的 “nativeplugins” 文件夹中，如果没有该目录，请手动创建。

1.2 在uni-app中导入插件

下载完 SDK 后，就需要导入项目中了。

这里点击项目目录的 “manifest.json” 文件后，再点击“App 原生插件配置” 中的“选择本地插件”或“选择云端插件”。

在弹出的选择框中，选择 “ZegoExpress 音视频 SDK” 后，单击“确认”后就添加成功。

1.3 自定义调试基座

上面，我们已从不同渠道获取到 SDK。为了方便后续调试，接下来还需要进行自定义调试基座操作。

1.3.1 制作自定义调试基座

选择“运行 > 运行到手机或模拟器 > 制作自定义调试基座”菜单。

在弹出的界面中，按照 uni-app 教程，填写相关信息，并单击“打包”进行云打包。

打包成功后，控制台就会收到 uni-app 的相关提示。

1.3.2 切换运行基座为自定义调试基座

打包步骤完成后，选择“运行 > 运行到手机或模拟器 > 运行基座选择 > 自定义调试基座”。

切换到刚制作的基座即可。

至此，集成 SDK 整个步骤就完成啦。

2、集成 JS 封装层

SDK 集成后，接下来我们来集成 JS 封装层。

在插件市场的 ZegoExpressEngine 音视频插件（JS）

导入的 JS 封装层就存储在 “components” 目录中了。

导入后，可以在业务代码中引入 JS 封装层，并调用 Express 相关接口，示例如下：

3、设置权限

应用要正常的运行，权限设置少不了。

根据您实际应用需要，设置应用所需权限。

进入 manifest.json 文件，打开 app 权限设置，在 app 云打包权限配置里添加权限。

具体权限说明，可以去“设置权限”中看看设置权限

四、实现基础功能，让应用能用起来

前面我们已经完成 SDK 集成，在 ZEGO 控制台创建项目，并且申请有效的 AppID 和 AppSign，接下来就可以为这款 app 搭建一些基础功能了。

1、实现视频通话

视频通话是核心功能，我们先从该功能的搭建步骤入手。

1.1 创建引擎

1.1.1 创建引擎

调用 createEngineWithProfile

1.1.2 设置回调

创建引擎后开发者可根据实际需要，调用引擎实例的 on

关于远端视频流视图，需要注意以下两点：

在 uni-app 的 App 环境中，若 startPlayingStream 调用成功，则无返回值，可使用 <zego-remote-view> 标签设置远端视频流视图。

在 uni-app 的 Web 环境中，若 startPlayingStream 调用成功，会返回一个 MediaStream 对象，开发者可以用返回的 MediaStream 赋值给 video 元素的 srcObject 属性设置远端视频流视图。

1.5 测试推拉流功能

这里我们建议，在功能搭建后测试一下是否运行异常。

为方便测试，我们提供了 Web 端调试示例，在该页面下，输入相同的 AppID、RoomID，输入不同的 UserID、以及对应的 Token，就能在同一房间内与真机设备进行互通测试。如果可以听到远端的音频，并看到远端的视频画面，则说明功能搭建成功，然后我们继续搭建下一个功能。

2、IM 即时通讯

在直播中，互动也很重要，而ZEGO的即时通讯功能就能满足这一点。ZEGO 即时通讯为开发者提供全平台互动、海量并发、超低延时的通信服务，能够满足直播间中的文字聊天需求。

在带货直播中，观众发表评论、提问，并且与主播、直播间其他用户进行实时互动，比如询问商品相关属性、促销机制、选择建议等，主播也能够及时回复，帮助用户更加深入地了解商品，以促成最终的成交。

进一步了解 IM即时通讯

此外，ZEGO SDK 还包含广播消息、弹幕信息、自定义信令等功能，更多适用、有趣的功能将在后期的文章具体介绍。

3、商品购物车

直播带货的最终目标是商品的交易，而购物车则是连接直播内容与电商交易的核心环节。商品购物车的核心功能是能够让观众对直播间中展示的商品进行存储、管理（全选、勾选下单）及结算。不过即构主要提供直播方面能力，关于购物车的功能与架构的设计、数据库设计等业务层能力就、还需要您自行开发。

结语

按照上述步骤，就完成一款直播带货 app 从环境部署到基本功能搭建。

以上所有的功能实现步骤及代码，均可在 ZEGO 实时音视频文档中心找到，您可根据实际的应用场景需求自定义选择。

关注博主，后期文章将持续更新，为您带来更多的实用、有趣高级功能拓展以及应用场景介绍，敬请期待。