碼上歡樂
相關內容    簡體    繁體

微信小程序--時鍾小程序

本文轉載自   查看原文   2020-10-25 19:02   397 
博客班級 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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序時鍾（xx年xx月xx日xx:xx格式） 超詳細，用canvas在微信小程序上畫時鍾教程 微信小程序 微信小程序 【微信小程序】 如何開發一個微信小程序 微信小程序全屏 微信小程序的布局 微信小程序-WXML 微信小程序構架 我眼中的微信小程序
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM