最终效果图
前言：
为了方便使用，脱离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);
},
作者：RiberWang
链接：https://www.jianshu.com/p/07c5870cab0a
随时随地看视频
