計算機專業(yè)課程設計報告-記事時鐘

題目：微信小程序-記事時鐘一、課題背景與意義1．項目背景基于微信，使他天然就有著龐大的用戶基數(shù)即掃即用，合理地分配了自己的工作時間弋碼量并不是很大，但是卻是一個完整的web項目它貼近生活，具有現(xiàn)實性它能更好地促進我們的生活二、主要任務和預期目標1．主要任務及要求實現(xiàn)一個微信打開就可以安排規(guī)劃的程序(2用微信web開發(fā)者工具完成所有編譯調(diào)試工作(3編程語言主要為html,css,javascript2．預期目標實現(xiàn)工作的能夠按時間提示，完成任務目標。三、設計方案1．設計思路小程序底部分為三個菜單欄，“主頁”，“記錄”，“設置”。主頁主要負責設置任務名稱以及工作內(nèi)容。記錄主要負責記錄首頁完成任務的結果，開始以及結束的過程設置頁面可以設置工作時間，休息時間主頁和啟用鈴聲。2．實現(xiàn)過程分為三個頁面index,logs,setting2.1Index設計頁面constutil=require('../../utils/util.js')constdefaultLogName={work:工'作',rest休息’}constactionName={stop:停止'，start開始'}constinitDeg={left:45,right:-45,Page({data:{?rp? rp . ,,remainTimeText:'',timerType:'work',log:{},completed:false,isRuning:false,leftDeg:initDeg.left,rightDeg:initDeg.right},onShow:function(){if(this.data.isRuning)returnletworkTime=util.formatTime(wx.getStorageSync('workTime'),'HH')letrestTime=util.formatTime(wx.getStorageSync('restTime'),'HH')this.setData({workTime:workTime,restTime:restTime,remainTimeText:workTime+':00'})},startTimer:function(e){letstartTime=Date.now()letisRuning=this.data.isRuninglettimerType=e.target.dataset.typeletshowTime=this.data[timerType+'Time']letkeepTime=showTime*60*1000letlogName=this.logName||defaultLogName[timerType]if(!isRuning){this.timer=setInterval((function(){this.updateTimer()this.startNameAnimation()}).bind(this),1000)}else{this.stopTimer()}this.setData({isRuning:!isRuning,completed:false,timerType:timerType,remainTimeText:showTime+':00',taskName:logName})this.data.log={name:logName,startTime:Date.now(),keepTime:keepTime,endTime:keepTime+startTime,action:actionName[isRuning?'stop':'start'],type:timerType}this.saveLog(this.data.log)},startNameAnimation:function(){letanimation=wx.createAnimation({duration:450})animation.opacity(0.2).step()animation.opacity(1).step()this.setData({nameAnimation:animation.export()})},stopTimer:function(){//resetcircleprogressthis.setData({leftDeg:initDeg.left,rightDeg:initDeg.right})//cleartimerthis.timer&&clearInterval(this.timer)},updateTimer:function(){letlog=this.data.logletnow=Date.now()letremainingTime=Math.round((log.endTime-now)/1000)letH=util.formatTime(Math.floor(remainingTime/(60*60))%24,'HH')letM=util.formatTime(Math.floor(remainingTime/(60))%60,'MM')letS=util.formatTime(Math.floor(remainingTime)%60,'SS')lethalfTime//updatetextif(remainingTime>0){letremainTimeText=(H==="00"?"":(H+":"))+M+":"+Sthis.setData({remainTimeText:remainTimeText})}elseif(remainingTime==0){this.setData({completed:true})this.stopTimer()return}//updatecircleprogresshalfTime=log.keepTime/2if((remainingTime*1000)>halfTime){this.setData({leftDeg:initDeg.left-(180*(now-log.startTime)/halfTime)})}else{this.setData({leftDeg:-135})this.setData({rightDeg:initDeg.right-(180*(now-(log.startTime+halfTime))/halfTime)})}},changeLogName:function(e){this.logName=e.detail.value},saveLog:function(log){varlogs=wx.getStorageSync('logs')||[]logs.unshift(log)wx.setStorageSync('logs',logs)}})2.2log頁面設計varutil=require('../../utils/util.js')Page({data:{logs:[],modalHidden:true,toastHidden:true},onShow:function(){wx.setNavigationBarTitle({titie任務記錄’})this.getLogs()},set:function(){},getLogs:function(){letlogs=wx.getStorageSync('logs')logs.forEach(function(item,index,arry){item.startTime=newDate(item.startTime).toLocaleString()})this.setData({logs:logs})},onLoad:function(){},switchModal:function(){this.setData({modalHidden:!this.data.modalHidden})},hideToast:function(){this.setData({toastHidden:true})},clearLog:function(e){wx.setStorageSync('logs',[])this.switchModal()this.setData({toastHidden:false})this.getLogs()}})2.3setti頁面Page({onShow:function(){wx.setNavigationBarTitle({titl設置'})this.setData({workTime:wx.getStorageSync('workTime'),restTime:wx.getStorageSync('restTime')})},changeWorkTime:function(e){wx.setStorage({key:'workTime',data:e.detail.value})},changeRestTime:function(e){wx.setStorage({key:'restTime',data:e.detail.value})}})2.4app.js頁面{〃〃「"pages":["pages/index/index","pages/logs/logs","pages/setting/setting"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#3197ed","navigationBarTitleText":"","navigationBarTextStyle":"white"},"tabBar":{"color":"#dddddd","selectedColor":"#3cc51f","borderStyle":"black","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","iconPath":"image/wechat.png","selectedIconPath":"image/wechatHL.png","text〃:主頁〃},{"pagePath":"pages/logs/logs","iconPath":"image/wechat.png","selectedIconPath":"image/wechatHL.png","text"記錄"},{"pagePath":"pages/setting/setting","iconPath":"image/wechat.png","selectedIconPath":"image/wechatHL.png","text"設置〃}]}}3．設計中的關鍵問題與解決方法對于微信的wxml,jsonjs文件的操作不熟悉，有些參考資料閱讀不順利,只能花時間去學習它，研究它。對于”tabBa”示簽的屬性操作不會用，在網(wǎng)上找其他案例的例子進行操作。4．設計結果2019/1/9下午2:?0:55停止吃蛋2019/1/9下午2:20:37吃蛋2019/1/9下午2:20:37槨止吃蛋2019/1/9下午2:20:35吃蛋2019/1/9下午2;19:57停止吃番2019/1/9下午2;19:55開始吃蛋2019/1/9下午12:37:12停止吃蛋#44441h屮凱」RI4G114^!II"UU%i^Mp??*0工仙長伽j 30休豈時長〔另鐘J 30冠背號膨背景aW啟用饕蘆>四、總結或結論微信小程序主要是使用“微信開發(fā)者工具”這個IDE,在微信小程序官方網(wǎng)站注冊小程序，獲取微信的appid。進入開發(fā)工具要進行對js文件，json文件，wxss文件，進行配置，書寫出小程序主要界面的代碼。設置“工作”“休息”的const常量，同時在image頁面添加對應的圓圈或者藍色背景，創(chuàng)造出登錄小程序后的首要頁面。之后在app.json頁面添加一個tabBar，增加下屬菜單列表。一個是“記錄”，一個“設置"。記錄，通過對首頁頁面的工作休息信息讀取后，傳到“記錄”頁面顯示出來。“設置”頁面可以設置自己想要