基于Vue的“智慧助老”微信小程序的設計與實現

傅俊哲 李俊杰

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

0 引言

據統計，截至2021年末，我國60歲及以上人口超過26 700萬人，占全國人口的18.9%，其中65歲及以上人口為20 000萬人左右，占全國人口的14.2%。這是中國65歲及以上人口占比首次超過14%，老齡社會給國家帶來各種各樣的問題和挑戰。

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

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

1 需求分析

1.1 功能模塊

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

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

1.2 開發工具和技術

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

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

前后端的數據交互選用的是Axios技術，它基于ES6中的Promise實現異步，可通過攔截器對數據和狀態進行統一處理。樣式使用的是Vant組件庫統一風格，其提供一些常用的業務組件以便于快速開發原型。

2 系統功能設計

2.1 詳細設計

2.1.1 第一個開發難點

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

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

2.1.1 第二個開發難點

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

2.1.2 第三個開發難點

“健康碼/行程碼跳轉”功能。受健康碼和行程碼使用權限的限制，健康碼/行程碼功能采取調用第三方小程序數據接口，跳轉至對應的“健康碼/行程碼”小程序平臺。使用JS-SDK進行相關配置并調用wxopen-launch-weapp 接口標簽來實現“健康碼/行程碼跳轉”功能。

2.2.3 期刊表

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

3 系統實現

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

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

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

2.2 數據庫設計

2.2.1 用戶表

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

2.2.2 權限表

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

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

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

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

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

4 總結

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