一週學會小程式-比賽計分器
阿新 • • 發佈：2018-12-18
前言：
為了方便使用，脫離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);
},
