一周学会小程序-比赛计分器

前言：

为了方便使用，脱离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',
      });
    }
复制代码