201 lines
5.4 KiB
Markdown
201 lines
5.4 KiB
Markdown
|
## 直播功能概述
|
|||
|
|
|
|||
|
|
旧版直播使用微信小程序直播功能，仅支持小程序内观看直播。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
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
移除直播功能后，后台中直播相关的服务可以停止
|
|||
|
|
|