1. 程式人生 > >一週學會小程式-比賽計分器

一週學會小程式-比賽計分器

最終效果圖

前言:

為了方便使用,脫離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',
      });
    }

注意:目前一個郵箱僅能申請一個小程式 一個身份證號只能註冊5個小程式

總結:一週學會小程式,那是不可能的。同樣的方法,有的裝置頁面適配卻出現問題,只有轉換思路,換一種方法實現,小程式佈局之路還是很漫長的。

此處是華麗的分割線 新增比賽型別和搖先手功能-與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,標準比賽下,直接結束比賽,並沒有對比賽型別做處理,這裡我封裝了一個函式,直接點選比賽結束沒有呼叫。寫程式碼一定要細心,要經過多次測試才能上線。