中醫經絡簡易動態效果App的設計和實現

錢 立

（四川職業技術學院計算機科學系，四川 遂寧 629000）

中醫經絡簡易動態效果App的設計和實現

錢 立

（四川職業技術學院計算機科學系，四川 遂寧 629000）

本文以Android的Web V ie w組件為核心，采用Web網頁和Android原生開發結合的方式，設計了一款教學養生類App.該App能動態展示中醫經絡的十二正經和奇經八脈的運行狀況，并伴有聲音和文字說明.對于十二正經還能自動循環展示，具有良好的實用性.

Android；WebView；WebApp；Javascript；經絡

祖國中醫藥有著悠久的歷史，為中華民族的身體健康作出了極大的貢獻.毛澤東曾題詞“中國醫藥學是一個偉大的寶庫，應當努力發掘，加以提高.”上世紀70年代以屠呦呦為代表的我國老一輩中醫藥工作者在這一思想的指導下，研發出了青蒿素，于2015年獲得了諾貝爾醫藥獎.中醫研究人體，學說很多，其中經絡學說是中醫基礎中的基石.普通老百姓學習中醫的基礎知識，比如經絡等，對于人民大眾的身體健康有著極為重要的意義.現代社會由于移動智能設備，如手機、P A D等廣泛使用，利用移動智能設備媒介開發相關的App來普及中醫藥知識變成了現實.

1 移動App開發技術及選擇

現在人們對知識的獲取是隨時發生的，通常用搜索引擎完成.但一般搜索到網頁信息，閱讀并不方便.另一方面，學習時需要反復查閱多個知識也不方便.在這樣的背景下，想要普及中醫知識，需要開發移動App來實現我們的愿望.現在移動App非常流行，主要的運行平臺有Android和iOS.相關技術有Android和iOS原生代碼開發，還有基于移動端運行平臺瀏覽器的Web App開發，以及原生開發和Web App混合開發技術.本文采取的是最后一種.

2 設計

中醫經絡學說主要有聯系五臟六腑的十二正經和奇經八脈等.設計一個中醫經絡簡易動態效果的App，需要實現相關經脈的動態運行效果圖示，同時具備后臺語音說明，以及經絡的流轉次序，還能顯示出經絡相關說明，提示如何養生等.

由于不設計獲取移動端硬件設備操作，為了方便界面設計及動態圖展示，設計時采用基于瀏覽器的Web App開發，結合原生開發播放語音.各經絡動態圖采用GIF圖，界面設計及動畫菜單效果采用HTML 5、CSS 3和j Query，經絡相關的文字數據以JSON方式分離存儲，設計圖如圖1.

設計經絡連續動態效果，有如下幾個難點：

（1）每一經絡GIF圖大小和持續時間不一；

（2）經絡流轉次序如何與經絡動態圖一致；

（3）由于屏幕大小限制，在顯示動態圖時，如何展示文字說明.

3 Web頁面開發

因主要展示經絡動態圖，主要關注設計單一主界面.該主界面包括了右上角主菜單、左右兩側的經絡菜單，以及底部按鈕功能.

（1）整理經絡動態G I F圖.十二正經分為手三陰經、手三陽經、足三陰經、足三陽經.手部經絡主要在上半身，足部經絡為全身.故圖片尺寸整理為統一的兩大類.上半身和全身圖大小都分別固定.圖片命名為jing N，N為序號，從1到12.G I F圖中每一幀為200 ms，記錄下每一經絡從起點到終點的時間存入一數組last Time[12].

（2）設計經絡流轉圖片12張，如圖1標題下面，分別取名liu N，N為序號，從1到12.

（3）經絡相關的文字說明由一個D I V層展示，初始為隱藏，點擊右下角的“說明”后顯示.

為了既能連續動態地展示12條經絡運行，又能分別展示每一經的運行，設計了自動播放過程.設計思路如下：（a）創建一個索引器N和一個定時器timer，設定N=1，先從last Time數組中取出第一個元素（N-1）的值作為定時器設定的定時時間，顯示jing N和liu N圖片，（b）當定時器時間結束后，N++，繼續從last Time數組中取出下一個元素（N-1）的值作為定時器新的設定時間，重新啟動定時器，依次執行下去，直到N〉12后，重新賦值N=1.

屏幕兩側分別設計了兩列經絡菜單，屏幕下方還設計了“上一經”、“下一經”按鈕，選擇后可顯示單一經絡運行.通過右上角的主菜單還可轉到其他界面了解更多的經絡知識.

界面展示和經絡文字說明進行分離設計，把文字說明存放為JSON數據.經絡的JSON數據格式如下：

[{

ID:1,

Jing:手太陰肺經,

Time:3 點到5 點,

Memo:……,

ZhangFu:肺,

XueWei:……

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

當需要看當前顯示的第N條經絡說明時，根據N值從JSON中查找ID對應經絡顯示相關信息.為了設計好界面，便于高效開發，用到了jquery.js庫，既能做出簡單的菜單動畫，有能操作J S O N數據.運行效果如圖1.

圖1 界面效果圖

4 與Android原生代碼混合開發

雖說H T M L 5標準已發布，但各瀏覽器開發商對該標準的支持性也不盡相同.Android 4.2版本之前瀏覽器內核是Webkit，而這之后的版本是Chromium內核.Android這兩種內核對H TML 5的audio標簽均不支持.為了能在演示GIF的同時播放語音，只好采用原生代碼開發.又由于要從Web頁面上控制后臺語音的播放，故需要采用JS調用原生后臺Java方法.分別描述如下實現過程.

4.1 播放后臺語音

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

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

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

int[] mID = new int[12];

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

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

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

}

4.2 JS調用原生后臺Java方法

后臺創建一個MySound 類，設計一個方法play(i) 用來控制播放第i 個MP3，設計一個mute(true)方法來控制聲音的開關.

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 中創建MySound 對象，映射到Web 頁面取名為my，如下：

web View.add Javascript Interface(

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

Web頁面調用如下：

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

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

});

通過這樣的混合開發方式，在Web前臺可以通過點擊“下一經”展示下一經動態效果的同時播放聲音，點擊左下角開關按鈕時可關閉聲音.

5 結語

本文設計了一款教學養生類App，該App展示了中醫經絡的十二正經和奇經八脈的動態運行狀況，并帶有音頻、文字說明，值得中醫愛好者和養生人士參考.App的設計采用了Web網頁的形式，使得界面美觀，操作方便，同時又結合Android原生開發，解決了Web View不支持audio標簽問題，能在展示經絡運行的同時提供音頻解說，使得App圖文聲并茂.

[1]唐俊開.HTML5移動Web開發指南[M].北京:電子工業出版社，2012.

[2]王石磊，吳崢.Android多媒體應用開發實戰詳解[M].北京:人民郵電出版社，2012.

[3]張家錫.中醫學基礎[M].上海:上海科學技術文獻出版社，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

責任編輯：張隆輝

2017-04-21

錢 立（1978-），男，四川遂寧人，四川職業技術學院副教授，碩士.研究方向：軟件專業教學.