## 直播功能概述

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

考虑到商城直播的重要性，我们接入了阿里云直播，兼容性更强，新旧版直播对比如下

| 平台                               | 小程序                                  | APP               | H5          |
| ---------------------------------- | --------------------------------------- | ----------------- | ----------- |
| 旧版直播，已弃用（微信小程序直播） | √（看直播、开播）                       | ×                 | ×           |
| 新版直播（阿里云）                 | √（看直播，需要小程序后台开通直播权限） | √（看直播、开播） | √（看直播） |

**注意：新版直播中必须使用app才能开播（无需上架应用市场）**



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

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

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



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

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

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

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

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



## 移除小程序直播

修改前请先了解一下  [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 目录下 manifest.json 配置文件，找到 "mp-weixin" 小程序配置中，移除该直播插件

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

src 目录下 pages.json 配置文件，找到 "tabBar" 配置栏

```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: () => {
    uni.setTabBarItem({
        index: 0,
        text: $t('homepage')
    })
    uni.setTabBarItem({
        index: 1,
        text: $t('classification')
    })
    // 条件编译：非小程序端，保留 直播、购物车、我的 3个tab
    // #ifndef MP-WEIXIN
    uni.setTabBarItem({
        index: 2,
        text: $t('tabbarLive')
    })
    uni.setTabBarItem({
        index: 3,
        text: $t('cart')
    })
    uni.setTabBarItem({
        index: 4,
        text: $t('myself')
    })
    // #endif
    
    // 条件编译：小程序端移除 直播tab，保留 购物车、我的
    // #ifdef MP-WEIXIN
    uni.setTabBarItem({
        index: 2,
        text: $t('cart')
    })
    uni.setTabBarItem({
        index: 3,
        text: $t('myself')
    })
    // #endif
    // 注意上面两块条件编译代码都是需要保留的，如有疑问请先查看 uniapp 条件编译写法规则
    
    // 如需移除所有端的直播，在原始代码中删除索引值为 2 的那一项，并修改后续的索引即可
}
```

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

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



购物车tab角标

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

```javascript
uni.setTabBarBadge({
    // #ifdef MP-WEIXIN
    index: 2,
    // #endif
    // #ifndef MP-WEIXIN
    index: 3,
    // #endif
    text: data > 99 ? '99+' : data + ''
})

// 如需移除所有端的直播，删除所有条件编译，index配置为 2
```



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