前言:
爲了方便使用,脫離App的限制,小程序版比賽記分器由此誕生。由於本人是新手,如有不對,請更正,歡迎在下方留言。iOS版比賽記分牌
功能設計:
小回合記分
大比分記分
隨時查看比賽記錄
計時功能
一局比賽結束換位功能
實現功能:
小回合記分
大比分記分
記分時不息屏
隨時查看比賽記錄
搖一搖截屏(目前只能監測截屏事件)
可選比賽爲普通比賽 標準比賽(標準比賽比普通比賽更嚴格,必須根據比賽規則結束比賽)
細節:
隊名輸入
分數上下區域點擊、按鈕都可增減比分
記分時不息屏
隨機先手
待開發功能
計時功能
一局比賽結束換位功能
具體功能實現:
1.頁面佈局:css佈局 基本使用display: flex; flex-direction: row/column; position: absolute;等
2.數據存儲:小程序本地存儲功能setStorageSync(存,使用同步操作)、getStorage(取,使用異步操作)
3.模板使用(模板只有.wxml和.wxss兩個文件,其他文件目前不生效,不是完整的封裝,事件在引入的.js中寫)
4.this指代
5.歡迎引導頁
主要詳細功能實現:
1,2與iOS版比賽記分牌類似,這裏不在詳細說明
3.封裝比分模板,與RBScoreView類似,封裝分數和按鈕操作
- 3-1.分數模板封裝 .wxml文件
<template name="scoreTemplate">
<view class='scoreview'>
<text class='scoretext'>{{score}}
</text>
<view class='cover-view'>
<text class='cover-up' hidden='{{false}}' catchtap='addButtonClick' data-type='{{isLeft}}'></text>
<text class='cover-down' hidden='{{false}}' bindtap='reduceButtonClick' data-text='{{score}}' data-type='{{isLeft}}'></text>
</view>
<view class='scoreAddAndReduce'>
<button class='add' bindtap='addButtonClick' data-text='{{score}}' data-type='{{isLeft}}'>+</button>
<button class='reduce' bindtap='reduceButtonClick' data-text='{{score}}' data-type='{{isLeft}}'>-</button>
</view>
<button class='reset' bindtap='resetButtonClick' data-type='{{isLeft}}'>重置</button>
</view>
</template>
- 3-2.分數css佈局 .wxss文件
.scoreview {
flex-direction: column;
display: flex;
text-align: center;
padding: 0 0 0 0;
width: 280rpx;
}
.scoretext {
font-size: 100px;
background-color: black;
color: white;
height: 280rpx;
/* width: 100%;
height: width; */
text-align: center;
line-height: 280rpx;
}
.cover-view {
display: flex;
flex-direction: column;
position: absolute;
width: 280rpx;
height: 280rpx;
}
.cover-up {
height: 140rpx;
}
.cover-down {
height: 140rpx;
}
.scoreAddAndReduce {
flex-direction: row;
display: flex;
/* width: 300rpx; */
height: 90rpx;
margin-top: 20rpx;
}
.add {
background-color: black;
color: white;
padding: 0;
width: 130rpx;
height: 90rpx;
line-height: 90rpx;
border-radius: 0;
margin-left: 0rpx;
font-size: 30px;
}
.reduce {
background-color: black;
color: white;
width: 130rpx;
height: 90rpx;
line-height: 90rpx;
font-size: 30px;
margin-left: 40rpx;
margin-right: 0rpx;
border-radius: 0;
}
.reset {
background-color: black;
color: white;
margin-left: 0rpx;
margin-right: 0rpx;
border-radius: 0; /* 去除邊框 */
}
/* 去除按鈕邊框 */
.add::after {
border: none;
}
.reduce::after {
border: none;
}
.reset::after {
border: none;
}
- 3-3.首頁 home.wxml 引入模板組件文件
<import src="template/littlescore.wxml" />
- 3-4.首頁 home.wxss 引入模板佈局文件
@import "template/littlescore.wxss";
- 3-5.模板數據綁定,通過data-text和data-type傳遞文本和左右分數類型
<button class='reduce' bindtap='reduceButtonClick' data-text='{{score}}' data-type='{{isLeft}}'>-</button>
reduceButtonClick: function(event) {
// 通過獲取組件綁定的變量累加
var score = event.target.dataset.text;
var isLeft = event.target.dataset.type;
if (score > 0) {
score--;
if (isLeft) {
this.setData({
leftScore: score
});
} else {
this.setData({
rightScore: score
});
}
}
},
4.this指代 此時定義that變量保存this,因爲在success函數中,this指代的不是上文的this了。
var that = this;
wx.showModal({
title: '比賽結束',
content: '比分:' + leftBigScore + ":" + rightBigScore + " " + winner + "勝",
success: function(res) {
if (res.confirm) {
that.storagerecordListData();
that.resetAllData();
that.recordTap();
}
else if (res.cancel) {
}
}
});
5.歡迎引導頁:通過本地存儲一個變量,第一次進入小程序默認值爲false,在app.js->onLaunch/onShow方法中判斷是否是false,進入歡迎引導頁,然後本地存入true,下次進來直接進入首頁。這裏使用wx.reLaunch方法,看到網上說使用過redirectTo好像不是每次都能成功。
// 引導歡迎頁
var isFirst = wx.getStorageSync("isFirstLaunch");
if (isFirst == false) {
wx.setStorageSync("isFirstLaunch", true);
// redirectTo
wx.reLaunch({
url: 'pages/index/index',
});
}
else {
wx.reLaunch({
url: 'pages/home/home',
});
}
總結:一週學會小程序,那是不可能的。同樣的方法,有的設備頁面適配卻出現問題,只有轉換思路,換一種方法實現,小程序佈局之路還是很漫長的。
此處是華麗的分割線 新增比賽類型和搖先手功能-與iOS功能同步(比賽結果列表增加比賽類型)2018.9.10
1.比賽類型
可選比賽爲普通比賽 標準比賽(標準比賽比普通比賽更嚴格,必須根據比賽規則結束比賽)
頁面使用小程序radio-group組件,仿iOS的UISegmentControl控件。
home.wxml
<view class='segment'>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}" wx:key="" class="{{gameType == item.value ? 'bc_green white': 'green'}}">
<radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
</label>
</radio-group>
</view>
home.wxss
.segment {
position: fixed;
right: 30rpx;
top: 30rpx;
height: 60rpx;
}
.radio-group {
background-color:blue;
display: flex;
/* margin: 25px; */
border: 1px solid white;
border-radius: 5px;
/* border-right: 0; */
}
.radio-group radio {
display: none;
}
.green{
color: white;
}
.bc_green{
background-color: white;
}
.white {
color: black;
}
/* label均勻分佈,文字居中 */
label {
font-size: 26rpx;
text-align: center;
padding: 3px 5px;
/* line-height: 50rpx;
height: 50rpx; */
flex: 1;
border-right: 1px solid white;
}
label:last-child {
border-right: 0;
}
2.搖先手功能
乒乓球比賽看哪一方先發球,另一方可選擇場地。使用js定時器:
js 定時器有以下兩個方法:
- setInterval() :按照指定的週期(以毫秒計)來調用函數或計算表達式。方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。
- setTimeout() :在指定的毫秒數後調用函數或計算表達式。
通過查閱資料,setInterval()方法不太準缺,所以本文使用setTimeout()方法。
initativeTap:function(event) {
// var isStart = currentTarget.dataset.isstart;
if(this.data.isStart) {
clearTimeout(timer);
this.setData({
isStart: false
});
}
else {
this.random();
this.setData({
isStart: true
});
}
},
random:function() {
var that = this;
timer = setTimeout(function () {
that.random();
that.setData({
firstTeam: that.data.randomArray[i]
});
i++;
// 防止多次使用計時器無限累加
if(i >= 2) {
i = 0;
}
console.log(i);
}, 100);
},
PS:錄製gif的時候又發現了一個bug,標準比賽下,直接結束比賽,並沒有對比賽類型做處理,這裏我封裝了一個函數,直接點擊比賽結束沒有調用。寫代碼一定要細心,要經過多次測試才能上線。
截止目前該小程序使用人數超過1000+,2018年年底就可以開通流量主,距離小程序產生僅用時3個月。
開通流量主需注意:
1.“銀行卡正面掃描件”可以使用手機拍照 只要照片清晰也能通過
2.個人小程序開通流量主需注意“開戶名稱”選項填寫本人姓名。