基于微信小程序的口腔診所服務(wù)平臺設(shè)計(jì)與實(shí)現(xiàn)

摘 ?要：針對傳統(tǒng)口腔醫(yī)療領(lǐng)域中口腔診所推廣難，紙質(zhì)信息保存難等問題，本文介紹了基于微信小程序的口腔診所服務(wù)平臺的設(shè)計(jì)與實(shí)現(xiàn)理念，基于原生小程序框架，面向口腔診所提出需求分析、功能改進(jìn)、技術(shù)難點(diǎn)等方案。經(jīng)實(shí)踐，該服務(wù)平臺有較好的應(yīng)用性，對推動移動醫(yī)療起到一定作用。

關(guān)鍵詞：微信;小程序;移動醫(yī)療;口腔

中圖分類號：TP311 ? ? 文獻(xiàn)標(biāo)識碼：A

Abstract：Aiming at the difficulties of dental clinic promotion and paper-printed information preservation in traditional dental medicare，this paper introduces the design and implementation concept of the dental clinic service platform based on WeChat applets.Based on the original applet framework，the paper provides schemes for requirements analysis，function improvement and technical difficulties in dental clinics.Practice shows that the service platform has good applicability and plays a positive role in promoting mobile medicare.

Keywords：WeChat;applets;mobile medicare;dental clinic

1 ? 引言（Introduction）

目前，微信是各個年齡段中最受歡迎的社交軟件，“全民微信熱”已為人所熟知，2017年1月19日，騰訊正式發(fā)布微信小程序，這種無須下載安裝也不用卸載[1]、節(jié)約內(nèi)存的程序立即受到人們的廣泛關(guān)注，截至目前，微信小程序越來越受到人們追捧，在各個年齡段中人群中普及。對醫(yī)療這個領(lǐng)域來說，尤其是口腔這種人體最基礎(chǔ)，最重要的部位，實(shí)現(xiàn)移動醫(yī)療不再是天方夜譚。口腔診所已經(jīng)遍布各個角落，但是很多口腔診所現(xiàn)在仍然人工掛號、登記、現(xiàn)場預(yù)約等，為患者和診所帶來諸多不便。因此，將微信小程序靈活的應(yīng)用在口腔診所中，可以將醫(yī)療行業(yè)的作用更大地發(fā)揮出來，實(shí)現(xiàn)市民可以足不出戶，隨時(shí)隨地利用手機(jī)查詢口腔診所信息，預(yù)約掛號，密切關(guān)注口腔健康的實(shí)時(shí)動態(tài)。真正意義上實(shí)現(xiàn)信息時(shí)代對于醫(yī)療事業(yè)的蓬勃發(fā)展。

2 ? 小程序的系統(tǒng)架構(gòu)（Applet system architecture）

2.1 ? 框架

小程序開發(fā)框架的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP體驗(yàn)的服務(wù)。

小程序的框架系統(tǒng)分為兩部分：視圖層（View）和邏輯層（App Service），可以讓視圖與數(shù)據(jù)簡單地保持同步。當(dāng)進(jìn)行數(shù)據(jù)修改時(shí)，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應(yīng)的更新。

2.2 ? 小程序的文件結(jié)構(gòu)

微信小程序使用微信開發(fā)工具新建一個項(xiàng)目，框架會自動生成描述整體程序的APP和多個描述頁面的page文件[2]。完整的小程序主要組成有：

一個入口文件：app.js（進(jìn)行頁面初始化，也可以定義全局方法）。

一個全局樣式：app.wxss（可以設(shè)置全局的css樣式）。

一個全局配置：app.json（配置生成頁面，窗口樣式，導(dǎo)航欄等）。

小程序pages下將頁面安裝文件夾劃分，每個頁面存在四個文件，分別為：視圖層：wxml文件、wxss文件;邏輯層：js文件、json文件（頁面配置，不是必須）。

2.3 ? 小程序頁面設(shè)計(jì)

小程序框架提供了一套基礎(chǔ)組件、包括表單組件，頁面鏈接、地圖等組件，幫助小程序更好得簡易得進(jìn)行開發(fā)。同時(shí)框架還提供豐富的API，可以方便地調(diào)用微信提供的能力，如：獲取用戶信息、支付功能、發(fā)起網(wǎng)絡(luò)請求等。

3 ?口腔診所小程序設(shè)計(jì)（Applet design for dental? ? ?clinics）

3.1 ? 需求分析

針對傳統(tǒng)口腔診所預(yù)約難、推廣難、紙質(zhì)信息難保存等問題，采用調(diào)查法、信息研究法，走訪各個口腔診所與醫(yī)生和患者溝通交流，詢問需求;基于以上調(diào)查成果和微信小程序系統(tǒng)框架研究成果，微信口腔診所小程序從系統(tǒng)組成上可分為前臺微信端用戶操作系統(tǒng)和后臺醫(yī)院端信息管理系統(tǒng)兩部分。前臺系統(tǒng)為實(shí)現(xiàn)患者用戶的各種線上就醫(yī)功能，主要包括在線預(yù)約，口腔健康知識查詢，上傳口腔照片，線上提問，意見反饋和導(dǎo)航等模塊。后臺醫(yī)院端系統(tǒng)為醫(yī)院管理人員權(quán)限管理功能[3]，主要包括管理用戶的預(yù)約、照片、留言等信息，客服對用戶進(jìn)行反饋，更新診所介紹信息等模塊。

3.2 ? 用例分析

根據(jù)以上需求分析[4]我們可將參與者分為患者用戶和醫(yī)院管理員[5]。

小程序用戶：可以進(jìn)行自助服務(wù)，進(jìn)行就醫(yī)預(yù)約，上傳照片，進(jìn)行口腔診所導(dǎo)航等。

醫(yī)院管理人員：對患者用戶的信息進(jìn)行管理，及時(shí)處理預(yù)約信息，回答用戶的線上提問，對用戶反饋進(jìn)行調(diào)整等。

針對口腔診所小程序的用例圖，如圖1所示。

3.3 ? 功能設(shè)計(jì)

（1）微信端

頁面宣傳：小程序從邏輯層取到診所信息數(shù)據(jù)，將數(shù)據(jù)渲染到視圖層，實(shí)現(xiàn)全面介紹口腔診所的診療項(xiàng)目，服務(wù)功能，診所外觀等，使患者全面了解口腔診所的業(yè)務(wù)功能。

在線預(yù)約：用戶錄入信息后，通過點(diǎn)擊事件將數(shù)據(jù)發(fā)送到后端數(shù)據(jù)庫，實(shí)現(xiàn)存入并將成功訊號回調(diào)給微信端。同時(shí)醫(yī)院后端接收處理數(shù)據(jù)實(shí)現(xiàn)預(yù)約功能。

口腔小知識推薦：小程序從邏輯層和其他數(shù)據(jù)平臺提取數(shù)據(jù)，把對應(yīng)口腔健康知識數(shù)據(jù)渲染到視圖層，讓用戶足不出戶就可以利用手機(jī)查詢口腔方面知識。

片子上傳：使用騰訊云指定傳輸照片接口方法將患者口腔照片上傳到數(shù)據(jù)庫，后端即可收到對應(yīng)照片，方便醫(yī)生提前了解到患者的口腔問題，為就醫(yī)節(jié)約時(shí)間。

在線留言：用戶輸入對診所提出建議和意見后，通過koa2中間件將請求發(fā)送給后端數(shù)據(jù)庫，數(shù)據(jù)庫對應(yīng)患者用戶信息保存留言。

客服提問：通過小程序原生客服接口接入客服，用戶可以通過客服咨詢各種問題，如診所具體診療項(xiàng)目，病情詢問等，提高用戶體驗(yàn)。

在線導(dǎo)航：申請接入高德地圖的密鑰，取到key后接入高德地圖接口，定位診所位置，并提供多種交通方式與路線。

（2）醫(yī)院后臺端

管理預(yù)約情況：用戶預(yù)約信息通過koa2保存到數(shù)據(jù)庫后，醫(yī)院管理人員進(jìn)入到在微信平臺騰訊云后臺數(shù)據(jù)庫中查詢整理信息，安排就診時(shí)間。管理用戶照片、身份信息原理與之相同。

更新診所簡介：診所診療項(xiàng)目服務(wù)等有更新時(shí)，在邏輯層修改對應(yīng)數(shù)據(jù)，新的數(shù)據(jù)會同步到視圖層。需求圖如圖2所示。

3.4 ? 業(yè)務(wù)流程

3.4.1 ? 傳統(tǒng)微信小程序業(yè)務(wù)流程

小程序的系統(tǒng)可以分為視圖層（view）和邏輯層（app service），當(dāng)作數(shù)據(jù)修改時(shí)，只需要對邏輯層進(jìn)行修改便可完成對視圖層的改變。當(dāng)需要數(shù)據(jù)存儲進(jìn)行網(wǎng)絡(luò)請求等操作時(shí)，開發(fā)時(shí)可使用騰訊云為開發(fā)者提供的開發(fā)環(huán)境，騰訊云會自動分配二級域名，部署HTTPS，即可實(shí)現(xiàn)小程序?qū)︱v訊云服務(wù)器的訪問，流程如圖3所示。

3.4.2 ? 口腔診所小程序業(yè)務(wù)流程

基于以上小程序設(shè)計(jì)模式，口腔診所小程序也在此基礎(chǔ)上進(jìn)行。

口腔小診所自己特有的功能，如在線預(yù)約，上傳照片等。在微信端用戶只要點(diǎn)擊功能按鈕，邏輯層就將請求通過koa2中間件發(fā)送給騰訊云服務(wù)器，將數(shù)據(jù)存儲到騰訊云的數(shù)據(jù)庫中，操作成功后將信息反饋給用戶，給用戶良好的使用體驗(yàn)，在服務(wù)端醫(yī)院也可以對用戶的信息進(jìn)行管理。此外，小程序可以連接第三方接口文檔，訪問他們的數(shù)據(jù)平臺，這樣可以實(shí)現(xiàn)查詢各種各樣口腔問題和健康保護(hù)口腔的知識，第三方接口文檔已json格式返回給小程序，再在view層渲染數(shù)據(jù)，將信息呈現(xiàn)給用戶。

圖4是小程序的時(shí)序業(yè)務(wù)流程圖（以在線預(yù)約、查詢小知識為例）。

4 ? 系統(tǒng)實(shí)現(xiàn)（System implementation）

4.1 ? 環(huán)境搭建

微信端可以直接在官方提供的微信開發(fā)者工具中設(shè)計(jì)頁面之間的交互，需要進(jìn)行數(shù)據(jù)庫存儲時(shí)，選擇用到騰訊云的開發(fā)環(huán)境[6]。騰訊云把開發(fā)用到node、koa2等環(huán)境進(jìn)行了打包處理，使開發(fā)者開發(fā)更方便。數(shù)據(jù)庫選用MySQL，存放用戶預(yù)約信息，留言等數(shù)據(jù)。

搭建過程中需向騰訊云申請自己的https證書、二級域名，讓騰訊云為微信小程序分配服務(wù)器，基于以上模式即搭建好整個開發(fā)環(huán)境。此外，可以選擇自行在本地下載安裝node.js，配置koa和koa-router，并用pm2管理進(jìn)程也可以進(jìn)行開發(fā)。

4.2 ? 關(guān)鍵技術(shù)分析

（1）帶參數(shù)數(shù)據(jù)交互

正常的數(shù)據(jù)交互可通過邏輯層.setData（）方法設(shè)置數(shù)據(jù)，在微信端即可渲染數(shù)據(jù)。當(dāng)有多個數(shù)據(jù)時(shí)，想在同一頁面訪問不同數(shù)據(jù)詳細(xì)信息時(shí)，就需要帶上相應(yīng)參數(shù)。帶參數(shù)數(shù)據(jù)交互在微信小程序中是十分常用也十分重要的方法，數(shù)據(jù)龐大時(shí)有著相同特點(diǎn)的數(shù)據(jù)即可跳轉(zhuǎn)至同一頁面，不必為每組數(shù)據(jù)信息設(shè)置單獨(dú)的頁面。

比如：查看口腔健康小知識時(shí)，會有多條知識，點(diǎn)擊每個模塊就會顯示相應(yīng)的詳細(xì)信息。此時(shí)，我們需要對每一條知識設(shè)置能識別此條消息的id，在跳轉(zhuǎn)頁面時(shí)，通過wx.navigateTo（{url：‘test？id=1}）方法，將對應(yīng)信息的id參數(shù)傳遞過去，便可實(shí)現(xiàn)查詢不同頁面信息。

（2）使用第三方API

開發(fā)小程序時(shí)，會用到各種各樣的信息，有時(shí)候到專門的數(shù)據(jù)平臺查詢數(shù)據(jù)也是必要的。該口腔診所小程序就不僅實(shí)現(xiàn)推薦給用戶口腔健康小知識，還提供查詢服務(wù)。實(shí)現(xiàn)方法為連接第三方數(shù)據(jù)平臺的API，輸入文字信息，即能在第三方數(shù)據(jù)平臺數(shù)據(jù)庫中查詢到數(shù)據(jù)，并將數(shù)據(jù)返回給客戶端。

首先微信小程序要發(fā)出請求，連接到第三方數(shù)據(jù)平臺后，平臺根據(jù)接收到請求找到對應(yīng)數(shù)據(jù)，并將包裝好的數(shù)據(jù)以json形式傳遞給微信端，小程序再將數(shù)據(jù)傳到客戶端。發(fā)送請求用wx.request（）方法發(fā)起https網(wǎng)絡(luò)請求，連接到數(shù)據(jù)平臺的網(wǎng)站，接收到返回的數(shù)據(jù)后，再用.setData（）方法，將數(shù)據(jù)渲染到視圖層。為了代碼的整潔與可維護(hù)性，可將這兩個方法分別寫在不同的函數(shù)中，在用戶點(diǎn)擊查詢事件后，分兩次調(diào)用相應(yīng)函數(shù)。出現(xiàn)錯誤時(shí)，可一目了然地分析出是https請求出現(xiàn)了錯誤，還是數(shù)據(jù)回調(diào)時(shí)出現(xiàn)了錯誤，節(jié)約了編碼和維護(hù)的時(shí)間。

（3）使用緩存功能

微信小程序中緩存也是一項(xiàng)重要的功能，緩存模塊可以用來文件存儲，用戶授權(quán)數(shù)據(jù)等。口腔診所小程序中用緩存來實(shí)現(xiàn)收藏功能，剛進(jìn)入頁面時(shí)用戶點(diǎn)擊收藏按鈕則提示收藏成功;再點(diǎn)擊一次按鈕則提示取消收藏，幫助用戶對自己感興趣的信息進(jìn)行收藏標(biāo)記。

再點(diǎn)擊收藏按鈕之后，需要用wx.getStorageSync（）方法從緩存中取值，再將取到的對象進(jìn)行取反操作，用wx.setStorageSync（）方法將取反后的對象存入緩存中，判斷緩存中是否有值，每一次點(diǎn)擊事件后，都進(jìn)行取反操作，緩存中則每次都會切換狀態(tài)，實(shí)現(xiàn)收藏功能。

需要注意的是：一開始加載頁面的時(shí)候，緩存中不一定存在相應(yīng)的對象，所以開始加載頁面時(shí)首先要判斷緩存中存不存在對應(yīng)對象，如果不存在的話，就要首先創(chuàng)造一個空對象，將對象設(shè)置為false，這樣點(diǎn)擊事件之后，能在緩存中找到該對象。否則沒事先創(chuàng)造對象會出現(xiàn)報(bào)錯提示。

4.3 ? 界面實(shí)現(xiàn)

經(jīng)過近半年的調(diào)研開發(fā)與部分口腔診所大夫和口腔疾病患者的體驗(yàn)，此小程序有較好的應(yīng)用性[7]。在線預(yù)約，健康知識推薦，在線留言等功能有效貼近大眾生活。系統(tǒng)原型界面如圖5所示。

5 ? 結(jié)論（Conclusion）

通過對微信小程序開發(fā)的研究與口腔診所線上信息管理與推廣的調(diào)研，本文提出了將微信小程序應(yīng)用到口腔診所的觀點(diǎn)，用戶能實(shí)現(xiàn)線上預(yù)約，上傳照片，對診所提出建議等功能，彌補(bǔ)了傳統(tǒng)醫(yī)療預(yù)約麻煩，人工記錄信息的弊端，同時(shí)可線上增加患者與醫(yī)療機(jī)構(gòu)的互動，患者不僅能更加了解自己的口腔問題，同時(shí)也促進(jìn)了醫(yī)療事業(yè)的發(fā)展。

參考文獻(xiàn)（References）

[1] 微信小程序官方教程[EB/OL].https：//developers.weixin.qq.com/miniprogram/dev/framework/MINA.html，2016-09-29.

[2] 王亮，鄒志鵬，姜虹.基于微信小程序的醫(yī)患交流平臺的設(shè)計(jì)與研究[J].中國遠(yuǎn)數(shù)字醫(yī)學(xué)，2017，12（11）：71-73;99.

[3] 查曉俊，成剛，楊玉志.基于微信小程序的醫(yī)療設(shè)備管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].中國醫(yī)療裝備，2018（5）：125-129.

[4] 張合華，孫永檣，趙玉虹.移動醫(yī)療健康需求分析[J].醫(yī)學(xué)信息學(xué)雜志，2014，35（5）：8-13.

[5] 李增本.基于微信小程序的多媒體設(shè)備故障報(bào)修系統(tǒng)的設(shè)計(jì)[J].信息技術(shù)與信息化，2018（9）：56-59.

[6] 陸衛(wèi)忠，趙玉雪，朱云祥，等.基于微信公眾平臺架構(gòu)的應(yīng)用系統(tǒng)開發(fā)[J].蘇州科技學(xué)院學(xué)報(bào)（自然科學(xué)版），2015，32（3）：47-51.

[7] 趙卉寒.APP移動終端或?qū)㈤_啟醫(yī)療企業(yè)營銷新戰(zhàn)場[J].中國醫(yī)療美容，2013（2）：34-37.

作者簡介：

李安妮（1997-），女，本科生.研究領(lǐng)域：web設(shè)計(jì).