d-bbc/直播功能文档/直播功能概述.md

直播功能概述

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

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

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

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

申请小程序·云直播插件

登录 小程序后台，确保小程序拥有 电商平台 类目，按照参考 官方接入指引 申请插件。

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

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

登录 小程序后台，在左侧菜单中 “功能” 中查看是否有 “直播” 一栏。

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

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

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

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

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

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

移除小程序直播

修改配置文件

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

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

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

{
  "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
        }
      }
    }
  }
}

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

• 使用命令行编译

  # 移除直播的小程序
  # 运行到开发环境
  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 条件编译写法规则

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

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

// 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 分包

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

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

  "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" 国际化方法，添加条件编译代码

/**
 * 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" 方法，修改为如下代码

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

购物车tab角标

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

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

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

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

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

打开 prod.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 -->

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