tmerclub-doc/直播功能概述.md at master

admin/tmerclub-doc

Fork 0

wzgaoyn b9279bc233 初始提交

2025-03-19 15:04:57 +08:00

5.4 KiB

Raw Permalink Blame History

直播功能概述

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

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

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

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

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

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

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

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

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

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

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

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

移除小程序直播

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

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

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

  "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: () => {
    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" 方法，修改为如下代码

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

购物车tab角标

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

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

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

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

5.4 KiB Raw Permalink Blame History Unescape Escape