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

前言：

为了方便使用，脱离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);// redirectTowx.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.个人小程序开通流量主需注意“开户名称”选项填写本人姓名。