钱 立

（四川职业技术学院计算机科学系，四川 遂宁 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-），男，四川遂宁人，四川职业技术学院副教授，硕士.研究方向：软件专业教学.