代码改变世界

微信小程序--时钟小程序

2020-10-25 19:02  31701325肖繁  阅读(1110)  评论(0)  编辑  收藏  举报
博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标 完成一个小程序,上传代码,完成一篇博文
作业源代码  https://github.com/chalk3/clock
学号  31701325
院系  计算机科学与技术

 

 

 

 

 

 

 

 介绍

第一个界面为首页，是小程序的主要功能界面，你可以在这里选择你要进行的活动内容以及时间，点击开始专注进入活动倒计时页面，活动开始后可以暂停也可以放弃，但是放弃本次活动不会被记录。  
第二个界面是统计界面，主要用来统计用户今日禅定时间以及次数和历史禅定时间和次数。  
第三个界面为我的界面，显示登录的用户头像，操作指引为新用户提供小程序操作说明，清空记录可以删除用户的统计数据，关于作者里面放了此小程序作者的联系方式以供用户直接反馈和探讨，联系客服可以不用添加作者好友直接通过客服来进行问题咨询，意见反馈用户可以把本程序的不足以及建议发送给程序管理员。  
项目页面展示
 

全局配置
JSON文件（app.json）

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/me/me",
    "pages/guide/guide",
    "pages/author/author"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#E7624F",
    "navigationBarTitleText": "禅定时钟",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "selectedColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./images/binggan.png",
        "selectedIconPath": "./images/binggan-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "统计",
        "iconPath": "./images/danhuang.png",
        "selectedIconPath": "./images/danhuang-active.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "./images/huasheng.png",
        "selectedIconPath": "./images/huasheng-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

　　

JS文件(app.js) 该文件由云开发时自动生成，直接调用即可

//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
      env:'tomato-9kzpn',
      traceUser:true
    })
  }
})

　　

wxss样式（app.wxss）

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

　　

各页面代码

首页(index)

wxml文件

<!--index.wxml-->
<view hidden="{{clockShow}}">
	<view class="slider">
		<slider min="1" max="60" show-value activeColor="#E7624F" backgroundColor="#666666" value="{{time}}" bindchange="slideChange"></slider>
	</view>

	<view class="task_text">
		<view class="task_title">
			选择一个任务
		</view>
		<view class="task_desc">
			在接下来的{{time}}分钟内，你将专注做这件事
		</view>
	</view>

	<view class="task_cate">
		<view wx:for="{{cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate" data-index="{{index}}">
			<view class="cate_icon">
				<image src="../../images/{{item.icon}}.png"></image>
			</view>
			<view class='cate_text {{index == cateActive ? "cate_text_active":""}}'>
				{{item.text}}
			</view>
		</view>
	</view>

	<view class="start" bindtap="start">
		开始专注
	</view>
</view>

<view class="clock" hidden="{{!clockShow}}" style="height:{{clockHeight}}rpx">
  <view class="progress">
    <canvas canvas-id="progress_bg" class="progress_bg">
    </canvas>
    <canvas canvas-id="progress_active" class="progress_active">
    </canvas>
    <view class="progress_text">
      {{timeStr}}
    </view>
  </view>
	<view class="btns">
		<view class="okBtn" bindtap="ok" wx:if="{{okShow}}">返回</view>
		<view class="pauseBtn" bindtap="pause" wx:if="{{pauseShow}}">暂停</view>
		<view class="continueCancleBtn" wx:if="{{continueCancleShow}}">
			<view class="continueBtn" bindtap="continue">继续</view>
			<view class="cancleBtn" bindtap="cancle">放弃</view>
		</view>
	</view>
</view>

　　

js文件

<!--index.wxml-->
<view hidden="{{clockShow}}">
	<view class="slider">
		<slider min="1" max="60" show-value activeColor="#E7624F" backgroundColor="#666666" value="{{time}}" bindchange="slideChange"></slider>
	</view>

	<view class="task_text">
		<view class="task_title">
			选择一个任务
		</view>
		<view class="task_desc">
			在接下来的{{time}}分钟内，你将专注做这件事
		</view>
	</view>

	<view class="task_cate">
		<view wx:for="{{cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate" data-index="{{index}}">
			<view class="cate_icon">
				<image src="../../images/{{item.icon}}.png"></image>
			</view>
			<view class='cate_text {{index == cateActive ? "cate_text_active":""}}'>
				{{item.text}}
			</view>
		</view>
	</view>

	<view class="start" bindtap="start">
		开始专注
	</view>
</view>

<view class="clock" hidden="{{!clockShow}}" style="height:{{clockHeight}}rpx">
  <view class="progress">
    <canvas canvas-id="progress_bg" class="progress_bg">
    </canvas>
    <canvas canvas-id="progress_active" class="progress_active">
    </canvas>
    <view class="progress_text">
      {{timeStr}}
    </view>
  </view>
	<view class="btns">
		<view class="okBtn" bindtap="ok" wx:if="{{okShow}}">返回</view>
		<view class="pauseBtn" bindtap="pause" wx:if="{{pauseShow}}">暂停</view>
		<view class="continueCancleBtn" wx:if="{{continueCancleShow}}">
			<view class="continueBtn" bindtap="continue">继续</view>
			<view class="cancleBtn" bindtap="cancle">放弃</view>
		</view>
	</view>
</view>

json

{
  "navigationBarTitleText": "禅定时钟",
  "usingComponents": {}
}

wxss

　

/**index.wxss**/
/* page {
  overflow: hidden;
  background: #E7624F;
} */
.slider {
  width: 650rpx;
  margin: 40rpx auto;
  padding-top: 15rpx;
}
.task_text {
  height: 200rpx;
  margin: 40rpx auto;
  text-align: center;
}
.task_text .task_title{
  font-size: 35rpx;
  height: 120rpx;
  line-height: 120rpx;
}
.task_text .task_desc{
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #999999;
}
.task_cate {
  width: 660rpx;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.task_cate .cate_item {
  width: 220rpx;
  height: 130rpx;
  text-align: center;
  margin-bottom: 50rpx;
}
.task_cate .cate_item .cate_icon {
  height: 70rpx;
}
.task_cate .cate_item .cate_icon image {
  width: 50rpx;
  height: 50rpx;
}
.task_cate .cate_item .cate_text {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
}
.task_cate .cate_item .cate_text_active {
  color: #E7624F;
}
.start {
  width: 280rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  margin: 40rpx auto;
  border: 2rpx solid #E7624F;
  color: #E7624F;
  border-radius: 20rpx;
}
.clock {
  overflow: hidden;
  background: #E7624F;
}
.progress {
  width: 400rpx;
  height: 400rpx;
  margin: 140rpx auto;
  position: relative;
}
.progress .progress_bg, .progress .progress_active  {
  position: absolute;
  left: 0;
  top: 0;
  width: 400rpx;
  height: 400rpx;
}
.progress .progress_text{
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 35rpx;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 120rpx;
  top: 170rpx;
}
.btns .okBtn, .btns .pauseBtn, .btns .continueBtn, .btns .cancleBtn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #ffffff;
  border: 3rpx solid #ffffff;
  border-radius: 20rpx;
  margin: 0 auto 20rpx auto;
}

指导(guide)

js

// pages/guide/guide.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    content: [
      {
        nav: '(1) 首页',
        small: '/images/prompt.png',
        fun: '选择时间：选择你将要进行任务的时长，默认为5分钟，最小为1分钟，最大为60分钟。',
        small: '/images/prompt.png',
        fun1: '选择任务：选择你将要进行任务的类型。',
        pic: '/images/index.png'
      },
      {
        nav: '(2) 统计',
        small: '/images/prompt.png',
        fun: '上部内容：是对你禅定次数以及禅定时间的统计。',
        small: '/images/prompt.png',
        fun1: '下部内容：是对你今日禅定和历史禅定的记录。',
        pic: '/images/log.png'
      },
      {
        nav: '(3) 我的',
        small: '/images/prompt.png',
        fun: '清空记录：清空所有的记录，清空之后不可恢复，谨慎操作！',
        small: '/images/prompt.png',
        fun1: '联系作者：关于作者里面是作者的联系方式，不懂得地方可直接联系客服，有意见或者发现bug都可进行意见反馈。',
        pic: '/images/me.png'
      }
    ]
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    wx.showShareMenu({
      withShareTicket: true
    })
  }
})

　　

json

{
  "navigationBarTitleText": "操作指引",
  "usingComponents": {}
}

　　

wxml

<!--pages/guide/guide.wxml-->
<view class="welcome">
	<text class="welcome_title">欢迎来到  禅定时钟</text>
	<text class="welcome_text">禅定时钟是一款用来管理时间的小程序，把每天的任务时间进行记录，将你的记录可视化，让你清楚的知道自己每天干了什么，花了多长时间，从而改进自己的生活。</text>
</view>

<view class="main">
	<view class="title">小程序使用介绍</view>

	<view class="introduce" wx:for="{{content}}" wx:key="cont_key">
		<view class="introduce_nav">{{item.nav}}</view>
		<view class="introduce_fun">
			<image src="{{item.small}}"></image>{{item.fun}}
		</view>
		<view class="introduce_fun">
			<image src="{{item.small}}"></image>{{item.fun1}}
		</view>
		<view class="introduce_pic">
			<image src="{{item.pic}}"></image>
		</view>
	</view>
</view>

　　

wxss

/* pages/guide/guide.wxss */
.welcome {
  background-color: #E7624F;
  width: 100%;
  height: 400rpx;
}

.welcome .welcome_title {
  display: block;
  height: 180rpx;
  line-height: 180rpx;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 60rpx;
}

.welcome .welcome_text {
  display: block;
  height: 220rpx;
  font-weight: 700;
  font-size: 35rpx;
  margin:0 30rpx ;
  text-indent:2em;
  color: #fff;
}

.main {
  margin:30rpx;
  text-align: center;
}

.main .title {
  color: #E7624F;
  font-size: 35rpx;
  font-weight: 700;
}

.main .introduce {
  margin-top: 60rpx;
}

.introduce .introduce_nav {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.introduce .introduce_fun {
  text-align: left;
}

.introduce .introduce_fun image {
  width: 32rpx;
  height: 32rpx;
}
.introduce .introduce_pic image {
  width: 550rpx;
  height: 950rpx;
}

总结

自己看看做做，虽然交迟了，不过还是有些收获的

小程序来源

https://github.com/nankailiang/MeditationCloc