下面给出可直接编译运行的微信小程序最小可运行版本(单页面版),按前述锁定流程实现:
① 项目结构
guandan-score/
├── app.js
├── app.json
├── app.wxss
├── pages/
│ └── score/
│ ├── score.wxml
│ ├── score.wxss
│ └── score.js
└── utils/
└── util.js // 可选,本例省略
② app.json
{
"pages": ["pages/score/score"],
"window": {
"navigationBarTitleText": "掼蛋记分器",
"orientation": "landscape"
},
"style": "v2"
}
③ app.wxss
/* 全局暗色 */
page,
body {
background-color: #1b1b1b;
color: #ccc;
font-family: -apple-system-font, Helvetica, sans-serif;
}
④ app.js
App({
onLaunch() {
// 清理过期缓存(如需要)
}
})
⑤ pages/score/score.wxml
<view class="header">
<text class="title">掼蛋记分器</text>
<button class="endBtn" bindtap="onEndGame">结束整局</button>
</view>
<view class="scoreBar">
<!-- 红方 A -->
<view class="sideBox red" bindtap="onSingleTap" data-side="red" binddbltap="onDoubleTap" data-side="red">
<view class="userBlock a">
<image class="avatar" src="{{aAvatar}}" wx:if="{{aAvatar}}"/>
<text class="uname">{{aName}}</text>
</view>
<view class="level">{{redLevel}}</view>
<view class="userBlock c">
<text class="uname">{{cName}}</text>
</view>
</view>
<!-- 中间把数 & 规则 -->
<view class="center">
<picker bindchange="onRuleChange" value="{{ruleIndex}}" range="{{rules}}" disabled="{{locked}}">
<view class="rulePicker">{{rules[ruleIndex]}}</view>
</picker>
<text class="count">把数 {{redWins + blueWins}}</text>
</view>
<!-- 蓝方 B -->
<view class="sideBox blue" bindtap="onSingleTap" data-side="blue" binddbltap="onDoubleTap" data-side="blue">
<view class="userBlock b">
<text class="uname">{{bName}}</text>
</view>
<view class="level">{{blueLevel}}</view>
<view class="userBlock d">
<text class="uname">{{dName}}</text>
</view>
</view>
</view>
⑥ pages/score/score.wxss
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 40rpx;
}
.endBtn {
background: #ff9c19;
color: #fff;
font-size: 28rpx;
border-radius: 8rpx;
padding: 0 20rpx;
line-height: 64rpx;
height: 64rpx;
}
.scoreBar {
display: flex;
align-items: center;
justify-content: center;
height: 70vh;
}
.sideBox {
width: 320rpx;
border-radius: 16rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.sideBox.red {
background: #d7000f;
color: #fff;
}
.sideBox.blue {
background: #005dff;
color: #fff;
}
.userBlock {
width: 100%;
background: rgba(0, 0, 0, 0.2);
border-radius: 12rpx;
padding: 10rpx;
margin: 8rpx 0;
text-align: center;
}
.userBlock.a {
background: #3e1515;
}
.userBlock.c {
background: #4b1f1f;
}
.userBlock.b {
background: #142c4c;
}
.userBlock.d {
background: #1e3a5f;
}
.avatar {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
vertical-align: middle;
margin-right: 8rpx;
}
.level {
font-size: 56rpx;
font-weight: bold;
margin: 20rpx 0;
}
.center {
width: 200rpx;
text-align: center;
}
.rulePicker {
font-size: 28rpx;
color: #ccc;
padding: 10rpx;
border: 1rpx solid #666;
border-radius: 8rpx;
margin-bottom: 20rpx;
}
.count {
font-size: 32rpx;
}
⑦ pages/score/score.js
const RULES = ['越A制', '把数制10把', '把数制15把']
const LEVELS = ['2','3','4','5','6','7','8','9','10','J','Q','K','A']
Page({
data: {
aName: '阿红',
aAvatar: '',
bName: '小蓝',
cName: '大红',
dName: '老蓝',
redLevel: 2,
blueLevel: 2,
redWins: 0,
blueWins: 0,
ruleIndex: 0,
locked: false,
history: [] // 最近5把
},
onLoad() {
wx.getUserProfile({
desc: '显示头像昵称',
success: (res) => {
this.setData({
aName: res.userInfo.nickName,
aAvatar: res.userInfo.avatarUrl
})
}
})
const setting = wx.getStorageSync('setting') || {}
const curr = wx.getStorageSync('current') || {}
this.setData({
ruleIndex: setting.ruleIndex || 0,
...curr
})
},
onSingleTap(e) {
const side = e.currentTarget.dataset.side
const add = side === 'red' ? {redLevel: Math.min(12, this.data.redLevel + 1)} : {blueLevel: Math.min(12, this.data.blueLevel + 1)}
const winAdd = side === 'red' ? {redWins: this.data.redWins + 1} : {blueWins: this.data.blueWins + 1}
this.setData({...add, ...winAdd, locked: true})
this.save()
},
onDoubleTap(e) {
const side = e.currentTarget.dataset.side
wx.showActionSheet({
itemList: ['双上(1+2)', '1&3游', '1&4游'],
success: (res) => {
const delta = [3,2,1][res.tapIndex]
const levelKey = side==='red'?'redLevel':'blueLevel'
const winKey = side==='red'?'redWins':'blueWins'
const newLevel = Math.min(12, this.data[levelKey] + delta)
this.setData({
[levelKey]: newLevel,
[winKey]: this.data[winKey] + 1,
locked: true
})
this.save()
}
})
},
onRuleChange(e) {
this.setData({ruleIndex: e.detail.value})
wx.setStorageSync('setting', {ruleIndex: this.data.ruleIndex})
},
onEndGame() {
wx.showModal({
title: '结束整局',
content: '级数、把数将清空,昵称保留',
success: (res) => {
if (res.confirm) {
this.setData({
redLevel: 2, blueLevel: 2, redWins: 0, blueWins: 0,
history: [], locked: false
})
this.save()
}
}
})
},
save() {
const current = {
redLevel: this.data.redLevel,
blueLevel: this.data.blueLevel,
redWins: this.data.redWins,
blueWins: this.data.blueWins,
history: this.data.history
}
wx.setStorageSync('current', current)
}
})