微信“睡眠助手”小程序的設計與實現

張婭妮 孫龍琴

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

關鍵詞：微信小程序；微信開發者工具；Visual Studio Code；DBeaver數據庫管理工具

中圖分類號：TP311.5 ? 文獻標識碼：A ? 文章編號：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 ?引 ?言

在目前互聯網技術、移動終端技術飛速發展的背景下，國內外已有許多睡眠輔助類APP，但基于微信小程序的睡眠軟件很少。本設計采用VSCode軟件構建應用平臺的后端，前段采用微信開發者工具，實現前端后端分離，在提高應用程序可維護性、可擴展性的同時，也降低了小程序開發的復雜度。用戶無須注冊賬號，直接獲取微信頭像昵稱信息即可登錄使用“睡眠助手”小程序，可瀏覽相關信息，以及利用各功能對自身的睡眠情況進行了解和改善。

1 ?小程序功能需求分析

“睡眠助手”微信小程序的系統主要包括以下模塊：睡眠常識、睡眠音樂、睡眠鬧鐘、睡眠分析、睡眠錄音、個人中心和后端數據庫管理。小程序整體結構圖如圖1所示。

模塊功能具體介紹如下：

睡眠常識：后端提供常識數據，前端展示常識數據。掌握健康資訊，提高對睡眠的重視。

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

睡眠鬧鐘：鬧鐘倒計時，設置一個倒計時，到指定時間后開始播放音樂。

睡眠分析：根據用戶的需要記錄用戶的睡眠信息，進行詳細全面的圖表數據分析，圖標明確詳細，簡潔易懂，包括深度睡眠、淺睡、醒、夢等，各時間段的睡眠情況一目了然，用戶可以更加清楚地了解自己每天的睡眠情況，以達到更佳的生活狀態。

睡眠錄音：點擊開始錄音按鈕，點擊停止后才可以播放剛才的錄音。打開睡眠助手，捕捉用戶的睡眠鼾聲，并記錄其夢話，讓用戶更好地了解自己的睡眠習慣，早上起床聽自己昨晚的睡眠錄音，趣味十足。

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

后端數據庫管理：后端連接數據庫存放數據，并向前端提供數據。在本項目中將DBeaver作為數據庫工具，MySQL作為一個庫存放數據。利用VScode搭建后端連接數據庫，將數據提供給前端。后端主要作用是可以獲取睡眠常識內容與睡眠音樂，此外，在后端可以對存放的數據進行增刪查改。后臺管理結構如圖2所示。

2 ?小程序的實現

2.1 ?首頁的實現

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

以上屬性也可以寫進js文件里的data：{}中，隨后在wxml所使用的siwper組件標簽內進行調用。

打開首頁文件夾的index.wxml，分別逐層添加view、siwper和siwper-item標簽，通過js獲取輪播圖并在wxml頁面中展示。

利用Vant Weapp提供的lcon圖標的組件來實現功能圖標，在index.json中引入組件，寫進js文件里的data：{}中，隨后在wxml所使用的lcon圖標組件標簽內進行調用。首頁界面如圖3所示。

2.2 ?睡眠常識模塊的實現

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

在common-sense/index.wxml中通過CellGroup的title屬性可以指定分組標題。在wxml文件中綁定bindtap事件，然后在js文件中進行響應，這樣在view層的時候就會跳轉到指定的URL地址了。

在common-sense/detail/index.wxml應用van-image組件、rich-text組件，通過js文件中進行響應連接后臺提供數據，這樣在view中可以展示出常識數據內容。睡眠常識界面如圖4所示。

2.3 ?睡眠音樂模塊的實現

在app.json中新建一個頁面為：pages/music/index。在music/index.wxml中通過CellGroup的title屬性可以指定分組標題。在wxml文件中引入van-icon組件及其屬性設置播放，綁定bindtap事件，通過api及連接后臺數據接口地址，然后在js文件中進行響應，調用存儲在后臺的音樂，在view層可以展示音樂標題并點擊播放音樂。睡眠音樂界面如圖5所示。

2.4 ?睡眠鬧鐘模塊的實現

在app.json中新建一個頁面為：pages/clock/index。

在clock/index.wxml中通過van-cell-group組件的title屬性指定分組標題，引入slider滑塊，利用其屬性設置指定選擇范圍，拖動進度條時的觸發。

引入Circle環形進度條組件，該組件為圓環形的進度條，支持進度漸變動畫。rate屬性表示進度條的目標進度，v-model：current-rate表示動畫過程中的實時進度。當rate發生變化時，v-model：current-rate會以speed的速度變化，直至達到rate設定的值。通過stroke-width屬性來控制進度條寬度，color屬性來控制進度條顏色，layer-color屬性來控制軌道顏色。color屬性支持傳入對象格式來定義漸變色。將clockwise設置為false，進度會從逆時針方向開始。通過size屬性設置圓環直徑。

應用Button按鈕組件，用于觸發一個操作。通過button按鈕組件的屬性設置按鈕的大小顏色，綁定bindtap事件。

設置鬧鐘倒計時時長，點擊開始按鈕開始倒計時。通過js文件連接后臺地址接口進行響應，倒計時時長完成，就會播放用戶選擇的音樂。睡眠鬧鐘界面如圖6所示。

2.5 ?睡眠分析模塊的實現

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

在app.json中新建一個頁面：pages/report/index。根據微信開發文檔提供的canvas畫布，添加canvas組件。

將下載ec-canvas文件夾導入到小程序項目資源管理器，創建要使用的圖表組件，在要使用圖表的report/index頁面配置引入ec-canvas，在要使用的圖表頁面引用圖表組件。

在該頁面js文件的data：{}寫頁面圖表的初始數據，然后在wxml文件中對使用組件標簽進行調用。睡眠分析界面如圖7所示。

2.6 ?睡眠錄音模塊的實現

實現步驟如下：1）在app.json中新建一個頁面：pages/record/index。2）引入toast輕提示組件。在頁面中間彈出黑色半透明提示，用于消息通知、加載提示、操作結果提示等場景。3）添加view層，通過image組件插入一張圖片在頁面上。4）引入loading加載組件，加載圖標，用于表示加載中的過渡狀態。

在wxml文件中應用button按鈕組件，用于觸發一個操作。通過button按鈕組件的屬性設置按鈕的大小、顏色，綁定bindtap事件。該按鈕用于開始錄音和停止錄音，停止錄音后會自動播放錄音。睡眠錄音界面如圖8所示。

2.7 ?個人中心模塊的實現

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

3 ?結 ?論

微信小程序可以很好地解決APP占內存的問題，無需單獨下載，操作簡單快捷。新疫情后人們都注重身體健康，特別是睡眠質量。微信“睡眠助手”小程序通過簡單有效的操作，幫助人們瀏覽睡眠常識、設置睡眠鬧鐘、播放睡眠音樂、睡眠錄音與播放、分析睡眠質量改善睡眠，有很好的應用價值和現實意義。

參考文獻：

[1] 閔慧，李鵬.“我的排課表”微信小程序的設計與實現 [J].計算機時代，2023（2）：111-114.

[2] 秦鵬程.基于微信小程序的體溫自助上報系統的設計與實現 [J].現代信息科技，2022，6（13）：36-38+42.

[3] 楊建敏，伏健，鄭珊珊.基于微信小程序的大學生成長紀實平臺的設計與實現 [J].現代電子技術，2022，45（22）：101-106.

[4] 吳海彥.基于微信小程序的智慧社區服務程序設計與實現 [J].新媒體研究，2022，8（21）：30-35.

[5] 王珊，薩師煊.數據庫系統概論：第五版 [M].北京：高等教育出版社，2023.

[6] 丁茂震，紀雨.基于微信小程序的人臉訪客管理系統的設計與實現 [J].網絡安全和信息化，2022（10）：99-102.

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

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