中醫(yī)經(jīng)絡(luò)簡(jiǎn)易動(dòng)態(tài)效果App的設(shè)計(jì)和實(shí)現(xiàn)

錢(qián) 立

（四川職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)系，四川 遂寧 629000）

中醫(yī)經(jīng)絡(luò)簡(jiǎn)易動(dòng)態(tài)效果App的設(shè)計(jì)和實(shí)現(xiàn)

錢(qián) 立

（四川職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)系，四川 遂寧 629000）

本文以Android的Web V ie w組件為核心，采用Web網(wǎng)頁(yè)和Android原生開(kāi)發(fā)結(jié)合的方式，設(shè)計(jì)了一款教學(xué)養(yǎng)生類(lèi)App.該App能動(dòng)態(tài)展示中醫(yī)經(jīng)絡(luò)的十二正經(jīng)和奇經(jīng)八脈的運(yùn)行狀況，并伴有聲音和文字說(shuō)明.對(duì)于十二正經(jīng)還能自動(dòng)循環(huán)展示，具有良好的實(shí)用性.

Android；WebView；WebApp；Javascript；經(jīng)絡(luò)

祖國(guó)中醫(yī)藥有著悠久的歷史，為中華民族的身體健康作出了極大的貢獻(xiàn).毛澤東曾題詞“中國(guó)醫(yī)藥學(xué)是一個(gè)偉大的寶庫(kù)，應(yīng)當(dāng)努力發(fā)掘，加以提高.”上世紀(jì)70年代以屠呦呦為代表的我國(guó)老一輩中醫(yī)藥工作者在這一思想的指導(dǎo)下，研發(fā)出了青蒿素，于2015年獲得了諾貝爾醫(yī)藥獎(jiǎng).中醫(yī)研究人體，學(xué)說(shuō)很多，其中經(jīng)絡(luò)學(xué)說(shuō)是中醫(yī)基礎(chǔ)中的基石.普通老百姓學(xué)習(xí)中醫(yī)的基礎(chǔ)知識(shí)，比如經(jīng)絡(luò)等，對(duì)于人民大眾的身體健康有著極為重要的意義.現(xiàn)代社會(huì)由于移動(dòng)智能設(shè)備，如手機(jī)、P A D等廣泛使用，利用移動(dòng)智能設(shè)備媒介開(kāi)發(fā)相關(guān)的App來(lái)普及中醫(yī)藥知識(shí)變成了現(xiàn)實(shí).

1 移動(dòng)App開(kāi)發(fā)技術(shù)及選擇

現(xiàn)在人們對(duì)知識(shí)的獲取是隨時(shí)發(fā)生的，通常用搜索引擎完成.但一般搜索到網(wǎng)頁(yè)信息，閱讀并不方便.另一方面，學(xué)習(xí)時(shí)需要反復(fù)查閱多個(gè)知識(shí)也不方便.在這樣的背景下，想要普及中醫(yī)知識(shí)，需要開(kāi)發(fā)移動(dòng)App來(lái)實(shí)現(xiàn)我們的愿望.現(xiàn)在移動(dòng)App非常流行，主要的運(yùn)行平臺(tái)有Android和iOS.相關(guān)技術(shù)有Android和iOS原生代碼開(kāi)發(fā)，還有基于移動(dòng)端運(yùn)行平臺(tái)瀏覽器的Web App開(kāi)發(fā)，以及原生開(kāi)發(fā)和Web App混合開(kāi)發(fā)技術(shù).本文采取的是最后一種.

2 設(shè)計(jì)

中醫(yī)經(jīng)絡(luò)學(xué)說(shuō)主要有聯(lián)系五臟六腑的十二正經(jīng)和奇經(jīng)八脈等.設(shè)計(jì)一個(gè)中醫(yī)經(jīng)絡(luò)簡(jiǎn)易動(dòng)態(tài)效果的App，需要實(shí)現(xiàn)相關(guān)經(jīng)脈的動(dòng)態(tài)運(yùn)行效果圖示，同時(shí)具備后臺(tái)語(yǔ)音說(shuō)明，以及經(jīng)絡(luò)的流轉(zhuǎn)次序，還能顯示出經(jīng)絡(luò)相關(guān)說(shuō)明，提示如何養(yǎng)生等.

由于不設(shè)計(jì)獲取移動(dòng)端硬件設(shè)備操作，為了方便界面設(shè)計(jì)及動(dòng)態(tài)圖展示，設(shè)計(jì)時(shí)采用基于瀏覽器的Web App開(kāi)發(fā)，結(jié)合原生開(kāi)發(fā)播放語(yǔ)音.各經(jīng)絡(luò)動(dòng)態(tài)圖采用GIF圖，界面設(shè)計(jì)及動(dòng)畫(huà)菜單效果采用HTML 5、CSS 3和j Query，經(jīng)絡(luò)相關(guān)的文字?jǐn)?shù)據(jù)以JSON方式分離存儲(chǔ)，設(shè)計(jì)圖如圖1.

設(shè)計(jì)經(jīng)絡(luò)連續(xù)動(dòng)態(tài)效果，有如下幾個(gè)難點(diǎn)：

（1）每一經(jīng)絡(luò)GIF圖大小和持續(xù)時(shí)間不一；

（2）經(jīng)絡(luò)流轉(zhuǎn)次序如何與經(jīng)絡(luò)動(dòng)態(tài)圖一致；

（3）由于屏幕大小限制，在顯示動(dòng)態(tài)圖時(shí)，如何展示文字說(shuō)明.

3 Web頁(yè)面開(kāi)發(fā)

因主要展示經(jīng)絡(luò)動(dòng)態(tài)圖，主要關(guān)注設(shè)計(jì)單一主界面.該主界面包括了右上角主菜單、左右兩側(cè)的經(jīng)絡(luò)菜單，以及底部按鈕功能.

（1）整理經(jīng)絡(luò)動(dòng)態(tài)G I F圖.十二正經(jīng)分為手三陰經(jīng)、手三陽(yáng)經(jīng)、足三陰經(jīng)、足三陽(yáng)經(jīng).手部經(jīng)絡(luò)主要在上半身，足部經(jīng)絡(luò)為全身.故圖片尺寸整理為統(tǒng)一的兩大類(lèi).上半身和全身圖大小都分別固定.圖片命名為jing N，N為序號(hào)，從1到12.G I F圖中每一幀為200 ms，記錄下每一經(jīng)絡(luò)從起點(diǎn)到終點(diǎn)的時(shí)間存入一數(shù)組last Time[12].

（2）設(shè)計(jì)經(jīng)絡(luò)流轉(zhuǎn)圖片12張，如圖1標(biāo)題下面，分別取名liu N，N為序號(hào)，從1到12.

（3）經(jīng)絡(luò)相關(guān)的文字說(shuō)明由一個(gè)D I V層展示，初始為隱藏，點(diǎn)擊右下角的“說(shuō)明”后顯示.

為了既能連續(xù)動(dòng)態(tài)地展示12條經(jīng)絡(luò)運(yùn)行，又能分別展示每一經(jīng)的運(yùn)行，設(shè)計(jì)了自動(dòng)播放過(guò)程.設(shè)計(jì)思路如下：（a）創(chuàng)建一個(gè)索引器N和一個(gè)定時(shí)器timer，設(shè)定N=1，先從last Time數(shù)組中取出第一個(gè)元素（N-1）的值作為定時(shí)器設(shè)定的定時(shí)時(shí)間，顯示jing N和liu N圖片，（b）當(dāng)定時(shí)器時(shí)間結(jié)束后，N++，繼續(xù)從last Time數(shù)組中取出下一個(gè)元素（N-1）的值作為定時(shí)器新的設(shè)定時(shí)間，重新啟動(dòng)定時(shí)器，依次執(zhí)行下去，直到N〉12后，重新賦值N=1.

屏幕兩側(cè)分別設(shè)計(jì)了兩列經(jīng)絡(luò)菜單，屏幕下方還設(shè)計(jì)了“上一經(jīng)”、“下一經(jīng)”按鈕，選擇后可顯示單一經(jīng)絡(luò)運(yùn)行.通過(guò)右上角的主菜單還可轉(zhuǎn)到其他界面了解更多的經(jīng)絡(luò)知識(shí).

界面展示和經(jīng)絡(luò)文字說(shuō)明進(jìn)行分離設(shè)計(jì)，把文字說(shuō)明存放為JSON數(shù)據(jù).經(jīng)絡(luò)的JSON數(shù)據(jù)格式如下：

[{

ID:1,

Jing:手太陰肺經(jīng),

Time:3 點(diǎn)到5 點(diǎn),

Memo:……,

ZhangFu:肺,

XueWei:……

},{……},{……}]

當(dāng)需要看當(dāng)前顯示的第N條經(jīng)絡(luò)說(shuō)明時(shí)，根據(jù)N值從JSON中查找ID對(duì)應(yīng)經(jīng)絡(luò)顯示相關(guān)信息.為了設(shè)計(jì)好界面，便于高效開(kāi)發(fā)，用到了jquery.js庫(kù)，既能做出簡(jiǎn)單的菜單動(dòng)畫(huà)，有能操作J S O N數(shù)據(jù).運(yùn)行效果如圖1.

圖1 界面效果圖

4 與Android原生代碼混合開(kāi)發(fā)

雖說(shuō)H T M L 5標(biāo)準(zhǔn)已發(fā)布，但各瀏覽器開(kāi)發(fā)商對(duì)該標(biāo)準(zhǔn)的支持性也不盡相同.Android 4.2版本之前瀏覽器內(nèi)核是Webkit，而這之后的版本是Chromium內(nèi)核.Android這兩種內(nèi)核對(duì)H TML 5的audio標(biāo)簽均不支持.為了能在演示GIF的同時(shí)播放語(yǔ)音，只好采用原生代碼開(kāi)發(fā).又由于要從Web頁(yè)面上控制后臺(tái)語(yǔ)音的播放，故需要采用JS調(diào)用原生后臺(tái)Java方法.分別描述如下實(shí)現(xiàn)過(guò)程.

4.1 播放后臺(tái)語(yǔ)音

本文經(jīng)絡(luò)動(dòng)態(tài)圖的語(yǔ)音文件采用M P 3，聲音時(shí)間與動(dòng)畫(huà)展示時(shí)間相當(dāng)，都在20 s左右，文件大小都小于50 K，共有20個(gè)，總體大小不超過(guò)1 M.播放音頻采用了音效池SoundPool，它主要用于播放一些較短的聲音片段，可以加載多個(gè)音頻，按照音頻I D進(jìn)行播放，能同時(shí)播放多個(gè)音頻，與MediaPlay-er相比，其硬件CPU資源占用少反應(yīng)快.

在Android 資源res 目錄下建立raw 文件夾，把MP3 文件放入其中，建立資源數(shù)組，使用Sound-Pool 的load 方法一次性加載完，分配好音頻ID，代碼如下：

int[] mp3s = {R.raw.s1, R.raw.s2,……};

int[] mID = new int[12];

SoundPool sp=new SoundPool(1,0,5);// 允許一次最多播放一個(gè)音頻，質(zhì)量為5

for(int i = 0; i 〈mp3s.length; i++){

mID[i]=sp.load(this,mp3s[i],1);// 成功加載一個(gè)音頻返回一個(gè)音頻ID

}

4.2 JS調(diào)用原生后臺(tái)Java方法

后臺(tái)創(chuàng)建一個(gè)MySound 類(lèi)，設(shè)計(jì)一個(gè)方法play(i) 用來(lái)控制播放第i 個(gè)MP3，設(shè)計(jì)一個(gè)mute(true)方法來(lái)控制聲音的開(kāi)關(guān).

public class MySound{

SoundPool sp;

Context ctx;

public MySound(Context ctx){

this.ctx = ctx;

}

@JavascriptInterface

public void play(int i){

sp.play(mID[i],0.8f,0.8f,5,0,1.0f);

}

@JavascriptInterface

public void mute(boolean flag){

AudioManager am = (AudioManager)

ctx.getSystemService(Context.AUDIO_SERVICE);

am.setSteamMute (AudioManager.STREAM_MUSIC,flag); }}}

在WebView 的Activity 中創(chuàng)建MySound 對(duì)象，映射到Web 頁(yè)面取名為my，如下：

web View.add Javascript Interface(

new My Sound(Main Activity.this),“my”);

Web頁(yè)面調(diào)用如下：

$(‘＃btn’).click(function(){

my.play(i); // 或者my.mute(true);});

});

通過(guò)這樣的混合開(kāi)發(fā)方式，在Web前臺(tái)可以通過(guò)點(diǎn)擊“下一經(jīng)”展示下一經(jīng)動(dòng)態(tài)效果的同時(shí)播放聲音，點(diǎn)擊左下角開(kāi)關(guān)按鈕時(shí)可關(guān)閉聲音.

5 結(jié)語(yǔ)

本文設(shè)計(jì)了一款教學(xué)養(yǎng)生類(lèi)App，該App展示了中醫(yī)經(jīng)絡(luò)的十二正經(jīng)和奇經(jīng)八脈的動(dòng)態(tài)運(yùn)行狀況，并帶有音頻、文字說(shuō)明，值得中醫(yī)愛(ài)好者和養(yǎng)生人士參考.App的設(shè)計(jì)采用了Web網(wǎng)頁(yè)的形式，使得界面美觀，操作方便，同時(shí)又結(jié)合Android原生開(kāi)發(fā)，解決了Web View不支持audio標(biāo)簽問(wèn)題，能在展示經(jīng)絡(luò)運(yùn)行的同時(shí)提供音頻解說(shuō)，使得App圖文聲并茂.

[1]唐俊開(kāi).HTML5移動(dòng)Web開(kāi)發(fā)指南[M].北京:電子工業(yè)出版社，2012.

[2]王石磊，吳崢.Android多媒體應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)詳解[M].北京:人民郵電出版社，2012.

[3]張家錫.中醫(yī)學(xué)基礎(chǔ)[M].上海:上?？茖W(xué)技術(shù)文獻(xiàn)出版社，2001.

App Design and Implementation of TCM Meridian Simple Dynamic Running State

Qian Li
（Sichuan Vocational and Technical College, Sichuan Suining, 629000）

In this paper, the WebView component of Android as the core, we use the combination of Web pages and Android native development for the design of a teaching health class App. The App can display dynamic running state of meridians of the normal twelve meridians and the abnormal eight meridians, with voice and text. For the twelve meridians, it can show loop automatically, with good practicality.

Android; WebView; WebApp; Javascript; Meridian

T P 319

A

1672-2094（2017）04-0154-03

責(zé)任編輯：張隆輝

2017-04-21

錢(qián) 立（1978-），男，四川遂寧人，四川職業(yè)技術(shù)學(xué)院副教授，碩士.研究方向：軟件專(zhuān)業(yè)教學(xué).