微信“睡眠助手”小程序的設(shè)計(jì)與實(shí)現(xiàn)

張婭妮 孫龍琴

摘 ?要：設(shè)計(jì)一款基于微信小程序的“睡眠助手”，主要功能模塊有個(gè)人中心、瀏覽睡眠常識(shí)、設(shè)置睡眠鬧鐘、播放睡眠音樂(lè)、睡眠錄音與播放及睡眠分析表等。采用微信開(kāi)發(fā)者工具實(shí)現(xiàn)系統(tǒng)前端頁(yè)面，運(yùn)用Visual Studio Code搭建后臺(tái)，利用DBeaver數(shù)據(jù)庫(kù)管理工具創(chuàng)建MySQL數(shù)據(jù)庫(kù)并存放數(shù)據(jù)。用戶可以在小程序中瀏覽信息，利用各個(gè)功能對(duì)自身的睡眠質(zhì)量有所了解并加以改善。該小程序具有操作簡(jiǎn)單、界面清晰、管理方便、功能完備等優(yōu)勢(shì)，具有很高的應(yīng)用和推廣價(jià)值。

關(guān)鍵詞：微信小程序；微信開(kāi)發(fā)者工具；Visual Studio Code；DBeaver數(shù)據(jù)庫(kù)管理工具

中圖分類號(hào)：TP311.5 ? 文獻(xiàn)標(biāo)識(shí)碼：A ? 文章編號(hào)：2096-4706（2023）16-0058-04

Design and Implementation of WeChat “Sleep Assistant” Mini Program

ZHANG Yani， SUN Longqin

（School of Computer and Information， Qiannan Normal University for Nationalities， Duyun ?558000， China）

Abstract： In this paper， a “Sleep Assistant” based on WeChat mini program is designed， its main functional modules including personal center， browsing sleep knowledge， setting sleep alarm clock， playing sleep music， sleep recording and playback， and sleep analysis table. Use WeChat developer tools to implement the front-end page of the system， use Visual Studio Code to build the backend， and use DBeaver database management tools to create a MySQL database and store data. Users can browse information in the mini program and use various functions to understand and improve their sleep quality. This mini program has the advantages of simple operation， clear interface， convenient management， and complete functions， and has high application and promotion value.

Keywords： WeChat mini program; WeChat developer tool; Visual Studio Code; DBeaver database management tool

0 ?引 ?言

在目前互聯(lián)網(wǎng)技術(shù)、移動(dòng)終端技術(shù)飛速發(fā)展的背景下，國(guó)內(nèi)外已有許多睡眠輔助類APP，但基于微信小程序的睡眠軟件很少。本設(shè)計(jì)采用VSCode軟件構(gòu)建應(yīng)用平臺(tái)的后端，前段采用微信開(kāi)發(fā)者工具，實(shí)現(xiàn)前端后端分離，在提高應(yīng)用程序可維護(hù)性、可擴(kuò)展性的同時(shí)，也降低了小程序開(kāi)發(fā)的復(fù)雜度。用戶無(wú)須注冊(cè)賬號(hào)，直接獲取微信頭像昵稱信息即可登錄使用“睡眠助手”小程序，可瀏覽相關(guān)信息，以及利用各功能對(duì)自身的睡眠情況進(jìn)行了解和改善。

1 ?小程序功能需求分析

“睡眠助手”微信小程序的系統(tǒng)主要包括以下模塊：睡眠常識(shí)、睡眠音樂(lè)、睡眠鬧鐘、睡眠分析、睡眠錄音、個(gè)人中心和后端數(shù)據(jù)庫(kù)管理。小程序整體結(jié)構(gòu)圖如圖1所示。

模塊功能具體介紹如下：

睡眠常識(shí)：后端提供常識(shí)數(shù)據(jù)，前端展示常識(shí)數(shù)據(jù)。掌握健康資訊，提高對(duì)睡眠的重視。

睡眠音樂(lè)：本地存放一些助眠音樂(lè)，多種類的音樂(lè)可供用戶多樣化選擇，幫助用戶在舒適的音樂(lè)中冥想靜心，安然入睡。

睡眠鬧鐘：鬧鐘倒計(jì)時(shí)，設(shè)置一個(gè)倒計(jì)時(shí)，到指定時(shí)間后開(kāi)始播放音樂(lè)。

睡眠分析：根據(jù)用戶的需要記錄用戶的睡眠信息，進(jìn)行詳細(xì)全面的圖表數(shù)據(jù)分析，圖標(biāo)明確詳細(xì)，簡(jiǎn)潔易懂，包括深度睡眠、淺睡、醒、夢(mèng)等，各時(shí)間段的睡眠情況一目了然，用戶可以更加清楚地了解自己每天的睡眠情況，以達(dá)到更佳的生活狀態(tài)。

睡眠錄音：點(diǎn)擊開(kāi)始錄音按鈕，點(diǎn)擊停止后才可以播放剛才的錄音。打開(kāi)睡眠助手，捕捉用戶的睡眠鼾聲，并記錄其夢(mèng)話，讓用戶更好地了解自己的睡眠習(xí)慣，早上起床聽(tīng)自己昨晚的睡眠錄音，趣味十足。

個(gè)人中心：獲取微信用戶的頭像和昵稱信息，查看個(gè)人信息。

后端數(shù)據(jù)庫(kù)管理：后端連接數(shù)據(jù)庫(kù)存放數(shù)據(jù)，并向前端提供數(shù)據(jù)。在本項(xiàng)目中將DBeaver作為數(shù)據(jù)庫(kù)工具，MySQL作為一個(gè)庫(kù)存放數(shù)據(jù)。利用VScode搭建后端連接數(shù)據(jù)庫(kù)，將數(shù)據(jù)提供給前端。后端主要作用是可以獲取睡眠常識(shí)內(nèi)容與睡眠音樂(lè)，此外，在后端可以對(duì)存放的數(shù)據(jù)進(jìn)行增刪查改。后臺(tái)管理結(jié)構(gòu)如圖2所示。

2 ?小程序的實(shí)現(xiàn)

2.1 ?首頁(yè)的實(shí)現(xiàn)

微信開(kāi)發(fā)者工具中為我們提供了內(nèi)置的swiper滑塊視圖容器組件以及附屬組件swiper-item，用以實(shí)現(xiàn)輪播圖的效果。在制作過(guò)程中，我們主要用到swiper組件的幾個(gè)屬性：1）“indicator-dots”：該屬性用于設(shè)置面板指示點(diǎn)的顯示與否，因本項(xiàng)目需要通過(guò)指示點(diǎn)了解目前輪播的圖片為第幾張，所以我們選擇使用“indicator-dots：true”，即顯示指示點(diǎn)。2）“indicator-color”：該屬性用于設(shè)置面板指示點(diǎn)的顏色。3）“autoplay”：該屬性用于設(shè)置輪播圖是否自動(dòng)切換。4）“circular”：該屬性用于設(shè)置銜接滑動(dòng)，即最后一張繼續(xù)向左滑則滑動(dòng)到第一張。

以上屬性也可以寫(xiě)進(jìn)js文件里的data：{}中，隨后在wxml所使用的siwper組件標(biāo)簽內(nèi)進(jìn)行調(diào)用。

打開(kāi)首頁(yè)文件夾的index.wxml，分別逐層添加view、siwper和siwper-item標(biāo)簽，通過(guò)js獲取輪播圖并在wxml頁(yè)面中展示。

利用Vant Weapp提供的lcon圖標(biāo)的組件來(lái)實(shí)現(xiàn)功能圖標(biāo)，在index.json中引入組件，寫(xiě)進(jìn)js文件里的data：{}中，隨后在wxml所使用的lcon圖標(biāo)組件標(biāo)簽內(nèi)進(jìn)行調(diào)用。首頁(yè)界面如圖3所示。

2.2 ?睡眠常識(shí)模塊的實(shí)現(xiàn)

在app.json中新建兩個(gè)頁(yè)面，分別為：pages/common-sense/index、pages/common-sense/detail/index。

在common-sense/index.wxml中通過(guò)CellGroup的title屬性可以指定分組標(biāo)題。在wxml文件中綁定bindtap事件，然后在js文件中進(jìn)行響應(yīng)，這樣在view層的時(shí)候就會(huì)跳轉(zhuǎn)到指定的URL地址了。

在common-sense/detail/index.wxml應(yīng)用van-image組件、rich-text組件，通過(guò)js文件中進(jìn)行響應(yīng)連接后臺(tái)提供數(shù)據(jù)，這樣在view中可以展示出常識(shí)數(shù)據(jù)內(nèi)容。睡眠常識(shí)界面如圖4所示。

2.3 ?睡眠音樂(lè)模塊的實(shí)現(xiàn)

在app.json中新建一個(gè)頁(yè)面為：pages/music/index。在music/index.wxml中通過(guò)CellGroup的title屬性可以指定分組標(biāo)題。在wxml文件中引入van-icon組件及其屬性設(shè)置播放，綁定bindtap事件，通過(guò)api及連接后臺(tái)數(shù)據(jù)接口地址，然后在js文件中進(jìn)行響應(yīng)，調(diào)用存儲(chǔ)在后臺(tái)的音樂(lè)，在view層可以展示音樂(lè)標(biāo)題并點(diǎn)擊播放音樂(lè)。睡眠音樂(lè)界面如圖5所示。

2.4 ?睡眠鬧鐘模塊的實(shí)現(xiàn)

在app.json中新建一個(gè)頁(yè)面為：pages/clock/index。

在clock/index.wxml中通過(guò)van-cell-group組件的title屬性指定分組標(biāo)題，引入slider滑塊，利用其屬性設(shè)置指定選擇范圍，拖動(dòng)進(jìn)度條時(shí)的觸發(fā)。

引入Circle環(huán)形進(jìn)度條組件，該組件為圓環(huán)形的進(jìn)度條，支持進(jìn)度漸變動(dòng)畫(huà)。rate屬性表示進(jìn)度條的目標(biāo)進(jìn)度，v-model：current-rate表示動(dòng)畫(huà)過(guò)程中的實(shí)時(shí)進(jìn)度。當(dāng)rate發(fā)生變化時(shí)，v-model：current-rate會(huì)以speed的速度變化，直至達(dá)到rate設(shè)定的值。通過(guò)stroke-width屬性來(lái)控制進(jìn)度條寬度，color屬性來(lái)控制進(jìn)度條顏色，layer-color屬性來(lái)控制軌道顏色。color屬性支持傳入對(duì)象格式來(lái)定義漸變色。將clockwise設(shè)置為false，進(jìn)度會(huì)從逆時(shí)針?lè)较蜷_(kāi)始。通過(guò)size屬性設(shè)置圓環(huán)直徑。

應(yīng)用Button按鈕組件，用于觸發(fā)一個(gè)操作。通過(guò)button按鈕組件的屬性設(shè)置按鈕的大小顏色，綁定bindtap事件。

設(shè)置鬧鐘倒計(jì)時(shí)時(shí)長(zhǎng)，點(diǎn)擊開(kāi)始按鈕開(kāi)始倒計(jì)時(shí)。通過(guò)js文件連接后臺(tái)地址接口進(jìn)行響應(yīng)，倒計(jì)時(shí)時(shí)長(zhǎng)完成，就會(huì)播放用戶選擇的音樂(lè)。睡眠鬧鐘界面如圖6所示。

2.5 ?睡眠分析模塊的實(shí)現(xiàn)

該頁(yè)面使用到微信開(kāi)發(fā)者工具中的canvas畫(huà)布。canvas組件提供了繪制界面，可以在其上進(jìn)行任意繪制。基礎(chǔ)使用方法：第一步：在wxml中添加canvas組件。首先需要在wxml中添加canvas組件。指定id=“mycanvas”唯一標(biāo)識(shí)一個(gè)canvas，用于后續(xù)獲取canvas對(duì)象。指定type用于定義畫(huà)布類型。第二步：獲取canvas對(duì)象和渲染上下文。通過(guò)SelectorQuery選擇上一步的canvas，可以獲取到canvas對(duì)象。再通過(guò)canvas.getContext，我們可以獲取到渲染上下文RenderingContext。后續(xù)的畫(huà)布操作與渲染操作都需要通過(guò)這兩個(gè)對(duì)象來(lái)實(shí)現(xiàn)。第三步：初始化canvas。canvas的寬高分為渲染寬高和邏輯寬高：渲染寬高為canvas畫(huà)布在頁(yè)面中所實(shí)際占用的寬高大小，即通過(guò)對(duì)節(jié)點(diǎn)進(jìn)行boundingClientRect請(qǐng)求獲取到的大小。邏輯寬高為canvas在渲染過(guò)程中的邏輯寬高大小，如繪制一個(gè)長(zhǎng)方形與邏輯寬高相同，最終長(zhǎng)方形會(huì)占滿整個(gè)畫(huà)布。邏輯寬高默認(rèn)為300×150。不同的設(shè)備上，存在物理像素和邏輯像素不相等的情況，所我們需要用wx.getWindowInfo獲取設(shè)備的像素比，乘上canvas的渲染大小，作為畫(huà)布的邏輯大小。第四步：進(jìn)行繪制。通過(guò)渲染上下文上的繪圖api，我們可以在畫(huà)布上進(jìn)行任意的繪制。

在app.json中新建一個(gè)頁(yè)面：pages/report/index。根據(jù)微信開(kāi)發(fā)文檔提供的canvas畫(huà)布，添加canvas組件。

將下載ec-canvas文件夾導(dǎo)入到小程序項(xiàng)目資源管理器，創(chuàng)建要使用的圖表組件，在要使用圖表的report/index頁(yè)面配置引入ec-canvas，在要使用的圖表頁(yè)面引用圖表組件。

在該頁(yè)面js文件的data：{}寫(xiě)頁(yè)面圖表的初始數(shù)據(jù)，然后在wxml文件中對(duì)使用組件標(biāo)簽進(jìn)行調(diào)用。睡眠分析界面如圖7所示。

2.6 ?睡眠錄音模塊的實(shí)現(xiàn)

實(shí)現(xiàn)步驟如下：1）在app.json中新建一個(gè)頁(yè)面：pages/record/index。2）引入toast輕提示組件。在頁(yè)面中間彈出黑色半透明提示，用于消息通知、加載提示、操作結(jié)果提示等場(chǎng)景。3）添加view層，通過(guò)image組件插入一張圖片在頁(yè)面上。4）引入loading加載組件，加載圖標(biāo)，用于表示加載中的過(guò)渡狀態(tài)。

在wxml文件中應(yīng)用button按鈕組件，用于觸發(fā)一個(gè)操作。通過(guò)button按鈕組件的屬性設(shè)置按鈕的大小、顏色，綁定bindtap事件。該按鈕用于開(kāi)始錄音和停止錄音，停止錄音后會(huì)自動(dòng)播放錄音。睡眠錄音界面如圖8所示。

2.7 ?個(gè)人中心模塊的實(shí)現(xiàn)

實(shí)現(xiàn)步驟如下：1）在app.json中新建一個(gè)頁(yè)面：pages/user/index。2）應(yīng)用label組件標(biāo)簽，用來(lái)改進(jìn)表單組件的可用性。使用for屬性找到對(duì)應(yīng)的id，或者將控件放在該標(biāo)簽下，當(dāng)點(diǎn)擊時(shí)，就會(huì)觸發(fā)對(duì)應(yīng)的控件。for優(yōu)先級(jí)高于內(nèi)部控件，內(nèi)部有多個(gè)控件的時(shí)候默認(rèn)觸發(fā)第一個(gè)控件。目前可以綁定的控件有：button、checkbox、radio、switch、input。3）應(yīng)用scroll-view組件標(biāo)簽，可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給sscroll-viewscroll-view一個(gè)固定高度，通過(guò)wxss設(shè)置height。組件屬性的長(zhǎng)度單位默認(rèn)為px，其2.4.0版本起支持傳入單位（rpx/px）。4）應(yīng)用button組件，添加按鈕，并綁定bindtap事件。5）將以上三個(gè)組件標(biāo)簽寫(xiě)入wxml文件中，通過(guò)wxss文件設(shè)置組件屬性長(zhǎng)度。個(gè)人中心界面如圖9所示。

3 ?結(jié) ?論

微信小程序可以很好地解決APP占內(nèi)存的問(wèn)題，無(wú)需單獨(dú)下載，操作簡(jiǎn)單快捷。新疫情后人們都注重身體健康，特別是睡眠質(zhì)量。微信“睡眠助手”小程序通過(guò)簡(jiǎn)單有效的操作，幫助人們?yōu)g覽睡眠常識(shí)、設(shè)置睡眠鬧鐘、播放睡眠音樂(lè)、睡眠錄音與播放、分析睡眠質(zhì)量改善睡眠，有很好的應(yīng)用價(jià)值和現(xiàn)實(shí)意義。

參考文獻(xiàn)：

[1] 閔慧，李鵬.“我的排課表”微信小程序的設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)時(shí)代，2023（2）：111-114.

[2] 秦鵬程.基于微信小程序的體溫自助上報(bào)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].現(xiàn)代信息科技，2022，6（13）：36-38+42.

[3] 楊建敏，伏健，鄭珊珊.基于微信小程序的大學(xué)生成長(zhǎng)紀(jì)實(shí)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [J].現(xiàn)代電子技術(shù)，2022，45（22）：101-106.

[4] 吳海彥.基于微信小程序的智慧社區(qū)服務(wù)程序設(shè)計(jì)與實(shí)現(xiàn) [J].新媒體研究，2022，8（21）：30-35.

[5] 王珊，薩師煊.數(shù)據(jù)庫(kù)系統(tǒng)概論：第五版 [M].北京：高等教育出版社，2023.

[6] 丁茂震，紀(jì)雨.基于微信小程序的人臉訪客管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].網(wǎng)絡(luò)安全和信息化，2022（10）：99-102.

作者簡(jiǎn)介：張婭妮（1980—），女，滿族，四川成都

人，副教授，工程碩士，主要研究方向：計(jì)算機(jī)信息管理、信息技術(shù)教育；孫龍琴（2000—），女，漢族，貴州惠水人，本科在讀，主要研究方向：計(jì)算機(jī)應(yīng)用。