基于Vue的“智慧助老”微信小程序的設(shè)計與實現(xiàn)

傅俊哲 李俊杰

關(guān)鍵詞：智慧助老；Vue.js；Node.js；Vant；Axios；微信小程序

0 引言

據(jù)統(tǒng)計，截至2021年末，我國60歲及以上人口超過26 700萬人，占全國人口的18.9%，其中65歲及以上人口為20 000萬人左右，占全國人口的14.2%。這是中國65歲及以上人口占比首次超過14%，老齡社會給國家?guī)砀鞣N各樣的問題和挑戰(zhàn)。

隨著信息化的迅速發(fā)展，互聯(lián)網(wǎng)應(yīng)用提供的智能化服務(wù)是居民滿足出行、就醫(yī)、消費等日常生活需求的必備工具。而老年人面臨的“數(shù)字鴻溝”問題也日益凸顯，為了讓更多的老人享受信息化帶來的便利，幫助老人學(xué)會一些常用的信息化手段已勢在必行[2]。

智慧助老小程序依托于微信公眾平臺[3]，以本地老齡協(xié)會微信公眾號作為推廣的主要媒介，采用Web前端技術(shù)嵌入小程序的開發(fā)方式，建立一個成本低且推廣度高的智慧助老平臺。既能適用于如今移動支付與網(wǎng)絡(luò)互通的整體大環(huán)境，也能夠建立具有本地化特色的助老服務(wù)。

1 需求分析

1.1 功能模塊

小程序首頁菜單包含了：智慧醫(yī)療、支付教程、行程碼、健康碼和電子期刊。

智慧醫(yī)療包含：我的位置、健康檢測、預(yù)約掛號三種功能；支付教程包含使用支付寶和微信的支付教程；健康碼和行程卡功能可跳轉(zhuǎn)至對應(yīng)第三方小程序進行查看；電子期刊展示老年人生活期刊列表，點擊列表項可查看詳情。

1.2 開發(fā)工具和技術(shù)

后端開發(fā)工具采用微軟的Visual Studio Code，是一款免費且強大的語言編輯器，可配置豐富的插件進行使用。小程序端則采用官方的微信開發(fā)者工具，可進行云開發(fā)、真機調(diào)試等。

小程序選用JS框架Vue.js，使用Vue-Cli構(gòu)建項目。Vue框架作為最受歡迎的三大框架之一，包括優(yōu)秀的Diff算法、虛擬Dom以及模板引擎，給廣大開發(fā)者帶來便捷。

前后端的數(shù)據(jù)交互選用的是Axios技術(shù)，它基于ES6中的Promise實現(xiàn)異步，可通過攔截器對數(shù)據(jù)和狀態(tài)進行統(tǒng)一處理。樣式使用的是Vant組件庫統(tǒng)一風格，其提供一些常用的業(yè)務(wù)組件以便于快速開發(fā)原型。

2 系統(tǒng)功能設(shè)計

2.1 詳細設(shè)計

2.1.1 第一個開發(fā)難點

項目的構(gòu)建。在NodeJS 官網(wǎng)下載Nodejs，使用Nodejs 包管理器npm 全局安裝vue-cli，在終端輸入npm install @vue/cli -g命令安裝vue-cli，再通過vuecli創(chuàng)建項目命令：vue create <項目名>，此時選擇De?fault（[Vue 2] babel， eslint），在創(chuàng)建時會下載相關(guān)依賴包。

項目創(chuàng)建結(jié)束，使用VScode 打開項目，在終端（ctrl+`）里輸入npm run serve命令即可運行項目。

2.1.1 第二個開發(fā)難點

“我的位置”功能。該功能通過瀏覽器Api獲取經(jīng)緯度坐標，再將坐標傳送給百度地圖提供的地圖組件顯示到頁面上。瀏覽器出于安全考慮，若沒有SSL安全證書，則無法調(diào)用瀏覽器提供經(jīng)緯度坐標的Api，所以在生產(chǎn)模式中需要給域名申請SSL安全證書。

2.1.2 第三個開發(fā)難點

“健康碼/行程碼跳轉(zhuǎn)”功能。受健康碼和行程碼使用權(quán)限的限制，健康碼/行程碼功能采取調(diào)用第三方小程序數(shù)據(jù)接口，跳轉(zhuǎn)至對應(yīng)的“健康碼/行程碼”小程序平臺。使用JS-SDK進行相關(guān)配置并調(diào)用wxopen-launch-weapp 接口標簽來實現(xiàn)“健康碼/行程碼跳轉(zhuǎn)”功能。

2.2.3 期刊表

用于存儲期刊地址、標題、描述、狀態(tài)、創(chuàng)建人ID、是否刪除。如圖3所示：

3 系統(tǒng)實現(xiàn)

本設(shè)計基于老齡協(xié)會微信公眾號，創(chuàng)建新的微信小程序項目。項目在編碼過程中，使用Vue進行開發(fā)，因此提前將平臺提供的web-view控件嵌入小程序中[4]。需要注意，web-view控件要為域名申請SSL證書并將其添加到公眾號管理后臺的JS 接口安全域名中。

與此同時，為滿足針對老年人適老化[5]的界面UI設(shè)計需求，本設(shè)計采用了大字體、大圖標、色彩鮮艷的樣式特點，在一定程度上改善了老年人使用互聯(lián)網(wǎng)產(chǎn)品困難的問題。下面著重介紹幾個模塊功能。

首頁模塊，從老齡協(xié)會公眾號中點擊導(dǎo)航中的首頁菜單，即跳轉(zhuǎn)至小程序的首頁。首頁的頂部通過輪播圖展示本地老齡協(xié)會的宣傳畫冊及標語；中間部分包含智慧醫(yī)療、視頻教程、服務(wù)咨詢、行程碼、健康碼和電子期刊6個導(dǎo)航按鈕，采用了flex彈性布局方式，該布局方式可自適應(yīng)手機屏幕，方便老人使用不同分辨率的手機都能正常瀏覽頁面；下面部分為老齡協(xié)會每日推送的新聞資訊內(nèi)容，以豐富老人日常的信息生活，效果如圖4所示。

2.2 數(shù)據(jù)庫設(shè)計

2.2.1 用戶表

用于存儲用戶基本信息。字段包括：用戶名，密碼，狀態(tài)，是否刪除。如圖1所示，密碼通過bcript進行加密，del_flag軟刪除功能。

2.2.2 權(quán)限表

用于存儲不同用戶的頁面使用權(quán)限。字段包括：權(quán)限表頭、路徑、父級ID、排序序號、組件相對路徑、是否可見、狀態(tài)、權(quán)限類型、是否為外鏈。如圖2所示：

點擊首頁中的智慧醫(yī)療，進入我的位置模塊，通過navigator.geolocation.getCurrentPosition 方法獲取到經(jīng)緯度坐標，通過百度地圖提供的convertor.translate將經(jīng)緯度坐標轉(zhuǎn)換為mark在地圖上的位置，最后設(shè)置zoom（地圖縮放比例）、center（mark位置），實現(xiàn)我的位置，方便老人能夠隨時找到自己的所在位置，效果如圖5所示。

健康檢測模塊，老齡用戶在家中時常被子女忽視健康問題，子女也無法實時知曉老人的健康狀況。在本小程序設(shè)計中，老齡用戶可以通過穿戴智能設(shè)備（智能手表），將自身的心率和血壓值每隔一小時上傳至互聯(lián)網(wǎng)云平臺服務(wù)器。本小程序端則通過Ajax技術(shù)與云平臺進行交互，將獲取到的老人心率、血壓數(shù)據(jù)顯示在小程序中供子女和自己及時查看，以獲曉老人的身體健康狀況，效果如圖6所示。

視頻教程模塊，教會老人學(xué)會使用當下流行的網(wǎng)上支付工具。使用輪播圖van-swipe和網(wǎng)頁圖層識別技術(shù)，在禁用自動輪播和滑動輪播的情況下，通過代碼判斷點擊正確位置向后輪播，目標點擊位置采用高亮的顯示突出，為體現(xiàn)適老化的要求，該模塊還添加了小手動畫作為友好提示，效果如圖7所示。

電子期刊模塊，通過從后臺管理頁面上傳pdf文件至服務(wù)器，小程序端通過列表展示最新的十條期刊標題，手指上滑加載更多期刊列表項，點擊列表項后進入詳情頁面，并通過vue-pdf-embed 組件將pdf 顯示到頁面上，代碼為：

4 總結(jié)

本文設(shè)計了基于Vue的“智慧助老”微信小程序，立足于本地化服務(wù)，解決老人面臨的“數(shù)字鴻溝”問題，讓更多的老人享受信息化帶來的便利，幫助老人學(xué)會一些常用的信息化手段。經(jīng)過功能測試，該小程序方便老人如何學(xué)會使用流行的網(wǎng)上支付工具以及通過穿戴智能設(shè)備方便子女隨時檢測自己的心率和血壓，為老人的生活帶來便捷。程序界面具備適老化要求且操作簡單，整體設(shè)計可靠，部署方便快捷，待進一步測試之后便可推廣使用。