作者
novlan1
和平赛事开发须知
和平赛事，又称和平赛场。
1. 地址
2. 发布权限
Press Next 组件库
release分支发patch，其他发beta- 开发人员可发任意分支，有审核，长时间未通过可以艾特
novlan1
业务
release分支novlan1来发- 其他分支任意开发人员可根据需求发布
3. 前端规范
- 页面自行引入
global-component、Dialog等，不学赛宝由插件引入，所见即所得 - 小程序下不要用 H5 才有的语法，如
location.href，其他语法同理！不要指望插件兜底，用条件编译，以及 uni-app 原生语法 - 路由用原生语法，即
uni.navigateTo等，不要用this.$router等需要其他插件的语法 - 迁移 Vue3 后，新的需求、新的页面都用 Vue3 的
Composition API+Typescript，之前的页面可以不改 - 宏定义不需要引入
4. 重构相关
- 不要用标签选择器，用
class。标签选择器的样式在 Vue3 小程序下不会被转换，和平赛事目前是自己写的postcss插件，不要依赖这个！ - 新需求中改动结构、新增DOM等，必须明确标注注释，或者
v-if=“false”，防止开发不知情的情况下发布现网 - 不要加全局样式（即在
App.vue中直接或间接引入的样式），如一定要加，找novlan1评估 tailwindcss命名一行一个
5. 提测须知
- 提测分支需以
feature/story-开头，自动加保护分支 - 提测前需提MR，让
novlan1看看
6. 提交规范
- 符合
angular提交规范 - 提交信息要具体、简洁，下面是不正确的示例
7. 业务细节
7.1. 类型导入要声明关键词 type
类型导入时要显式声明关键词 type，否则可能会导致编译出错。
The requested module '/xxx3.ts' does not provide an export named 'Abc'// 正确
import type { Abc } from './xxx';
// 错误
import { Abc } from './xxx';7.2. Header 组件
不需要自定义导航栏的页面，pages.json 设置如下:
"style": {
"navigationBarTitleText": "队伍"
}需要自定义头部的页面：
"style": {
"navigationStyle": "custom"
}导航栏组件：
import PressCustomHeader from 'press-next/press-custom-header/press-custom-header.vue';
import { useStatusBarHeight } from 'press-next/hooks/status-bar-height';
const {
statusBarHeight,
headerHeight,
} = useStatusBarHeight();7.3. 返回
返回方法统一用 press-next 中的方法：
import { goBack } from 'press-next/common/utils/go-back/index';
goBack({
home: '/views/index/index',
});7.4. 二维码组件
import PressGpPopupImage from 'press-next/press-gp-popup-image/press-gp-popup-image';7.5. 隐藏滚动条
@layer utilities {
/* 隐藏 Chrome, Safari 和 Opera 的滚动条 */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* 隐藏 IE, Edge 和 Firefox 的滚动条 */
.no-scrollbar {
-ms-overflow-style: none; /* IE 和 Edge */
scrollbar-width: none; /* Firefox */
}
}<div class="no-scrollbar"></div>7.6. typescript-eslint
vue-tsc 需要 typescript 较高版本。
最新版的的 eslint-config-light-vue3 不内置 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，由业务自己安装，来适配业务自己的 typescript 版本。
7.7. 分享
分两步：
- 初始化
openShareUI
import { initShare, openShareUI } from 'src/local-logic/tip-match/share/share-init';
// 在合适的时机初始化
initShare(shareParams);
// 用户触发
openShareUI();具体代码要结合业务实际。
7.8. Toast
使用 press-next 中的 toast，而不是 pmd 中的，有更丰富的类型提示。
import { Toast } from 'press-next/common/toast';
Toast.showLoading('加载中...');
Toast.show(text);
Toast.showSuccess(text);
Toast.showFail(text);7.9. 拉起赛事房间
7.9.1. 核心
赛事页面 H5 （或小程序等）向游戏传递参数房间信息，比如 RoomId，RoomPwd
房间信息，由赛事后台向游戏后台请求生成，不赘述。
7.9.2. 示例
拉起示例：
xxx://?rmid:${roomId},rmpw:${roomPwd},t:${time}xxx 为 scheme 关键词，rmid 是房间 Id， rmpw 是房间密码
只要游戏能正确解析到 H5 页面传过来的参数即可，格式不限。
8. TailwindCSS
8.1. vscode 插件
提效工具：Tailwind CSS IntelliSense
8.2. pr-[.28rem]
小程序中不能使用 pr-[.28rem] 这种，可以使用 pr-1.12，同时在tailwind.config.js 中配置下 theme.extend.padding = {1.12: '.28rem'}。
原因是uni-app会把class中的[.解析成\[\放到wxss中，导致编译错误。
8.3. bg-url
background-image 在 html 中书写的时候不能带引号。下面是错误的
class="
bg-[url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/manager-business-card/manager-card-select.png')]
"下面是正确的
class="
bg-[url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/manager-business-card/manager-card-select.png)]
"带引号的类名，如果同时存在动态类名，在小程序下会编译不通过。
8.4. 动态类名
以下动态类名会丢失小数点：
:class="[index === active ? 'w-11.2 h-6.4' : 'w-9.6 h-5.44']"可以改成对象形式，而不是数组：
:class="{'w-11.2 h-6.4': index === active, 'w-9.6 h-5.44': index !== active}"8.5. box-shadow
rgba 的颜色值中间不能加空格，不能用小数点的 rem，下面是错误的：
:class="{ 'shadow-[0_0.08rem_0.08rem_rgba(0, 0, 0, 0.16)]': index === active }"下面是正确的
:class="{ 'shadow-[0_4px_4px_rgba(0,0,0,0.16)]': index === active }"8.6. border
设置 border-bottom:
a {
border-bottom: .02rem solid rgba(255, 255, 255, .10);
}设置如下：
<div class="
border-0
border-solid
border-b-[rgba(255,255,255,.10)]
border-b-0.08
">
</div>需要设置一个 border-0，否则其他方向的边框也会有，不符合预期。另外，tailwindcss 中没有 border-b-solid。
8.7. 安全区
pb-[calc(env(safe-area-inset-bottom)+70px)]8.8. icon
涉及icon图标大小等会有权重问题，可以加!。
8.9. 剪裁
[clip-path:polygon(0_0,100%_0,100%_100%,20%_100%)]