## 直播功能概述

旧版直播使用微信小程序直播功能，仅支持小程序内观看直播。2023年下旬微信小程序后台关闭了申请直播功能入口，开通时间未知，即目前新创建的小程序都无法申请开通直播功能。

考虑到商城直播的重要性，商城接入了腾讯云直播、阿里云直播。可以在后台管理系统中自行配置。

当前直播功能支持在全平台观看，开播需在后台配置直播间信息获取推流地址，使用OBS工具进行直播。

| 平台                               | 小程序                                                       | APP         | H5          |
| ---------------------------------- | ------------------------------------------------------------ | ----------- | ----------- |
| 旧版直播，已弃用（微信小程序直播） | √（看直播、开播）                                            | ×           | ×           |
| 新版直播（腾讯云、阿里云）         | √（看直播；需要在腾讯云开通，在小程序后台添加腾讯云直播助手插件） | √（看直播） | √（看直播） |



## 申请小程序·云直播插件

登录 [小程序后台](https://mp.weixin.qq.com/)，确保小程序拥有 电商平台 类目，按照参考 [官方接入指引](https://cloud.tencent.com/document/product/1078/42916) 申请插件。

**注意：只需要通过审核即可成功添加插件，无需购买插件授权服务和流量包，小程序端实际上没有使用这个插件，申请添加只是为了过审**



## 查看小程序是否拥有直播权限

登录 [小程序后台](https://mp.weixin.qq.com/)，在左侧菜单中 “功能” 中查看是否有 “直播” 一栏。

拥有 “直播” 菜单表示已开通或可申请开通直播权限，否则需要按照文档移除小程序内的直播功能。



## 如何判断是否需要修改直播功能代码？

项目代码中默认全端（小程序、app、H5）使用直播功能。

如果你的小程序拥有直播权限，并且你需要全端开启直播功能，无需做任何修改；

如果你不需要直播功能 或 小程序无直播权限，需要移除整个直播功能或移除小程序内的直播功能，继续阅读文档移除对应代码；

**注意：若小程序无直播权限，并且未移除直播功能代码，将无法通过审核**



## 移除小程序直播

### 修改配置文件

src 目录下 manifest.json 配置文件，找到 "mp-weixin" 小程序配置中，移除该直播插件

```json
/* 小程序特有相关 */
"mp-weixin" : {
    ...
    // 注释或删除此项
    "plugins" : {
        // 小程序直播插件
      "liveRoomPlugin": {
        "version": "1.3.9",
        "provider": "wx95a7d2b78cf30f98"
      }
    }
}
```



打开根目录下的 package.json 文件，搜索 `mp-weixin-no-live` 

```json
{
  "name": "mall4uni-bbc",
  "version": "0.0.0",
  "scripts": {
    "dev:custom:mp-weixin-no-live": "uni -p mp-weixin-no-live",
    "build:custom:mp-weixin-no-live": "uni build -p mp-weixin-no-live",
  },
  // 其他配置...
  // uni-app 自定义编译平台
  "uni-app": {
    "scripts": {
      "mp-weixin-no-live": {
        "title": "微信小程序：移除直播",
        "env": {
          "UNI_PLATFORM": "mp-weixin"
        },
        "define": {
          "MP-WEIXIN-NO-LIVE": true
        }
      }
    }
  }
}

```

**如果有相关配置按照下方步骤编译发行即可，无需额外修改代码**

* 使用命令行编译

```bash
# 移除直播的小程序
# 运行到开发环境
npm run dev:custom:mp-weixin-no-live

# 编译到生产环境
npm run build:custom:mp-weixin-no-live
```

* 使用 HBuilder X 菜单
  * 运行到开发环境：运行 - 微信小程序：移除直播
  * 编译到生产环境：发行 - 自定义发行 - 微信小程序：移除直播



**如果 package.json 中没有 `mp-weixin-no-live` 相关内容，则需要按以下内容修改**

修改前请先了解一下  [uniapp 条件编译写法规则](https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor)

因为直播页面放在底部的 tab 栏中，所以移除直播功能会导致小程序里面少一个tab，修改都是对操作 tabbar 栏的一些方法进行适配。

项目中主要是 tab栏的国际化 以及 购物车tab的角标

```javascript
// setTabBarItem  修改tabbar设置
uni.setTabBarItem({
    // 索引，从0开始
    index: 0,
    // tabbar 文本
    text: $t('homepage')
})

// setTabBarBadge 设置tabbar 角标。
uni.setTabBarBadge({
    // 索引，从0开始
    index: 3,
    // 角标的值，字符串
    text: '角标文本'
})
```



src 目录下 pages.json 配置文件，搜索 "live-broadcast" 和  "live-room" 对这两个页面添加条件编译，**注意是两个页面都要添加**

> live-broadcast 页面在主包；live-room 页面在 package-activities 分包

```json
"pages": [
    // #ifndef MP-WEIXIN
    {
        "path": "pages/live-xxxx/live-xxxx",
        "style": {...}
    },
    // #endif
]
```



src 目录下 pages.json 配置文件，找到 "tabBar" 配置栏，对 "live-broadcast" 项设置条件编译

```json
  "tabBar": {
    "selectedColor": "#e43130",
    "color": "#333333",
    "list": [
	  ...
      // 条件编译：非小程序端时添加这个tabbar，如需移除所有端的直播，请删除该项
      // #ifndef MP-WEIXIN
      {
        "pagePath": "pages/live-broadcast/live-broadcast",
        "iconPath": "/static/images/tabbar/uncheck-live.png",
        "selectedIconPath": "/static/images/tabbar/selecte-live.png"
      },
      // #endif
      ...
    ]
  }
```



### 修改tab相关业务代码

src/utils/util.js  

找到 "transTabbar" 国际化方法，添加条件编译代码

```javascript
/**
 * tabbar国际化
 */
transTabbar: () => {
    const tabBarList = [$t('homepage'), $t('classification'), $t('tabbarLive'), $t('cart'), $t('myself')]
    // #ifdef MP-WEIXIN
    // 小程序移除直播
    tabBarList.splice(2, 1)
    // #endif
    for (let i = 0; i < tabBarList.length; i++) {
      nextTick(() => {
        uni.setTabBarItem({
          index: i,
          text: tabBarList[i]
        })
      })
    }
}
// 如需移除所有端的直播，删除条件编译代码，tabBarList数组删除  $t('tabbarLive') 项
```

同文件下，找到 "removeTabBadge"  方法，修改为如下代码

```javascript
/**
* 移除购物车Tabbar的数字
*/
removeTabBadge: () => {
    let index = 3
    // #ifdef MP-WEIXIN
    index = 2
    // #endif
    uni.removeTabBarBadge({
      index
    })
}
// 如需移除所有端的直播，删除removeTabBarBadge 前面的代码，index配置为 2
```



购物车tab角标

在项目中搜索 "uni.setTabBarBadge" 方法，修改为如下代码

```javascript
// 新增index 配置、条件编译配置
let index = 3
// #ifdef MP-WEIXIN
index = 2
// #endif

uni.setTabBarBadge({
	index,
    text: data > 99 ? '99+' : data + ''
})

// 如需移除所有端的直播，删除setTabBarBadge 前面的代码，index配置为 2
```



### 隐藏商品详情页的直播入口

打开 prod.vue，搜索 "直播悬浮按钮"，添加条件编译

```vue
    <!-- #ifndef MP-WEIXIN -->
    <!-- 直播悬浮按钮 -->
    <view
      v-if="xxxxxx"
      class="live"
      :data-roomid="liveRoomParams[0].roomId"
      :data-userid="liveRoomParams[0].userId"
      @tap="toLivePage"
    >
      <rhythm-beat />
      <view class="live-txt">
        {{ $t('inLive') }}
      </view>
    </view>
    <!-- #endif -->
```





移除直播功能后，后台中直播相关的服务可以停止