基于微信小程序的眩晕症检测及指导平台前端设计与实现

1 系统需求分析

1.1 可行性分析

1.1.1 经济可行性

目前随着微信小程序的发展，所需要的技术成本也就越来越低。相对于传统的门诊和电话随访，微信小程序随访模式能够传递更加丰富的教育资源，包括更加直观的图片和视频等[14]。我们使用的手机微信小程序，系统开发成本及维护成本低廉，使用方便，推广后可接受程度高[15]。
微信小程序是一种不需要下载安装即可使用的应用，体现了小精简、用完即走的服务理念。从小程序在微信的位置来看，其和朋友圈、购物、游戏等均在发现一栏，拥有二级入口，凸显了其重要性。相比于原生APP而言，微信小程序方便、成本更低、界面简洁，单个小程序的开发成本大概在数千元左右，仅为原生APP开发成本的十分之一或者更少，与HTML5相比，其运行环境在微信内部，接口等功能更为丰富，比如微信分享、缓存等使之社交属性和流畅性大幅提高。相比于微信服务号其功能更强大，而且不依托公众号平台，重服务，轻营销。

1.1.2 技术可行性

本项目是基于微信小程序所开发研制的程序，开发环境和使用的架构已经比较成熟了，利用现有的技术完全可以实现系统开发目标。并且于自身因素而言，基于大学期间所学习的程序编程，UI设计等前端相关知识，并查阅大量的文献资料，有关眩晕症的相关软件的调研查询为前期提供了充足的准备，为后期的程序设计提供了坚实的基础。于外部技术支撑而言，量表的科学性和有效性，是通过和成都中医药大学谢慧老师眩晕症研究团队进行研究获得，具有很强的临床指导价值。

1.1.3 社会可行性

近几年来，随着眩晕症的普遍性即人均5 ~ 8 %的发病率，误诊率，空白性，老龄化和严重性的问题的存在，也是使得了眩晕症备受大家的关注，眩晕受到多个学科越来越多的关注，以眩晕为专题的学术会议越来越多，一些学科的学术会议专门设立了眩晕分会场，而眩晕会场的人数通常最多，这种热情和场面前所未有[16]。并且于2017年6月9日便创立了第一个“中国眩晕防治日”和“世界眩晕防治日”。眩晕症讨论的热度化以及眩晕症的普遍性，小程序的快速发展，都为眩晕症能成为一个专门的小程序提供了极大的基础条件。

1.2 需求结构

1.2.1 信息系统需求结构

患者自我管理拥有的一级功能即基本信息管理、眩晕测试、指导、资讯浏览、各级量表测试、治疗时间记录。
医生进行患者管理拥有的一级功能即患者阶段诊断、患者信息检索、患者信息管理、基本信息修改。

1.2.2 需求结构的说明

患者自我管理拥有“基本信息管理”即可以自己修改自身的头像、昵称、年龄、姓名、性别，“眩晕测试”即完成眩晕测试量表，“眩晕指导”即饮食、睡眠、运动与环境的生活指导提醒，“平衡信心测试”与“眩晕障碍评分”即对自身眩晕的了解度。
医生对患者信息管理拥有“患者阶段诊断”即医生通过患者就诊前的量表测试来判断患者患病所处的阶段，“患者信息检索”即查看患者就诊前，后所填写的量表测试，“医生自身基本信息修改”即医生可以修改自身姓名。

1.3功能

1.3.1 概述

本项目主要分为医生和患者两个端口，在患者端口，患者通过眩晕量表填写功能进行就诊前真实可靠的眩晕数据，并交于医生端口，就诊医生通过经验判断患者的发病阶段与发病的严重性，为医生就诊时提供了方便且可靠的数据，对于病人身体真实状况有了初步判断。患者在就诊完成后便可以进行障碍眩晕测试，平衡信心测试，查看自己眩晕程度是否有所好转，也给与医生一个就诊反馈。患者经过前期医生判断发病阶段来获得有关于饮食，起居，环境和锻炼的指导。
在医生端口，医生通过“我的患者”这一功能模块来查看患者所填写的各级量表测试的分数与等级，通过获取的真实的情况来反馈患者患病阶段及后为后期治疗有所铺垫。

1.3.2 功能用例分析

患者端口可拥有登录注册，眩晕诊断，自我监控，个人中心等四大功能模块，在眩晕诊断中可进行填写问卷，医生诊断结果查看。自我监控有平衡信心测试，DHI量表，治疗时间记录，眩晕指导，资讯浏览。个人中心可以进行查看个人档案，修改个人基本信息。
医生端口拥有登录注册，待诊断判断，患者管理与个人中心等四打功能模块，医生通过待诊断判断得出患者的眩晕阶段，并通过患者管理功能查看患者的基本信息。通过个人中心修改个人信息。

2 系统实现

2.1 设计理念

界面以蓝，黄色为主基调色，冷色调蓝色寓意冷静，让人一联想到广阔的大海，便能了解到心胸的宽广，暖色调黄色寓意温暖，让人一联想到太阳，便能了解到温暖包裹全身。整体色彩更具反差。色卡如图2-1所示:
眩晕小程序logo如图2-2显示，以眼睛为基础进行logo的设计，并且皆以圆形为基调，使得图片更具柔和性，眩晕其实更多是由眼睛来感受得出，并且采用蓝色这一冷色调来告知人们，眼睛是星辰大海，充满无限可能。

2.2 界面实现

在用户使用小程序的时候，用户都是有自己明确的目标，他们使用手机来帮助自己完成所需要的目标。用户在完成目标时，只会专注于目标，所以系统和交互设计者，应该创造良好并且更加简洁的环境，以便于用户快捷，愉快的完成目标任务。设计为人是一基础原则，是让产品能更好的为人服务，所以本项目主要设计理念便是简洁，人们使用时一眼便能看清楚自己的需求。“简洁”二字一直贯穿在本项目中，各级页面也主要是以图片和少量的文字来进行设计，整体以跳跃性的色调为页面颜色的覆盖，大量的页面留白使得人的感受更加舒缓。

（1）登录模块

简洁而精炼的登录与注册，让人能一瞬间完成自己登录或者注册的目标，并且只有两个按扭键功能给人更多的舒适感与重点性的提醒。医生按钮以蓝色为主，以冷色调蓝色为按钮色调，医生在面对病人时，要时刻以冷静的态度去诊断病人情况。患者按钮以暖色调黄色为基调，让患者能感受到温暖。医生与患者头像，语言的不同，以及按钮色调不一样，能让二者清晰的了解到角色的安排。医生登录页面采用的是大众都使用的员工登录界面，但在其基础上，进行了背景的留白，让其更加正式，并且医生通过特定的账号密码登录。登录模块分为登录界面，医生登录界面与患者登录界面，如图所示。

<View className={classnames("columnFlex content", styles.content)}>
      {/* className是设置类名 这里是绑定样式 */}
      {/* 用户进入需要选择角色 */}
      <View onClick={()=>{pageRoute('/pages/doctor/login/login')}} className={classnames("rowFlex",styles.roleItem)} style={{background: '#03D6FF'}}>
        <View className={classnames("rowFlex",styles.imgCircle)}>
          <Image mode="aspectFill" className={styles.imgBox} src={doctor}/>
        </View>
        <Text className={styles.text}>我是医生</Text>
      </View>
      <Button openType="getUserInfo" onGetUserInfo={getUserInfo} className={classnames("rowFlex",styles.roleItem)} style={{background: '#FECD39'}}>
        <View className={classnames("rowFlex",styles.imgCircle)}>
          <Image  mode="aspectFill" className={styles.imgBox} src={patient}/>
        </View>
        <Text className={styles.text}>我是患者</Text>
      </Button>
    </View>

（2）患者被审核模块

省略多余的文案，比如过分修饰，欢迎语，多余指示性语句，这些罗嗦的词语会影响用户对关键信息的阅读理解和判断，必须干掉。患者填完诊断量表后即立即返回到开始界面，让患者等待，一个小的提醒框告知让患者了解到医生未查看诊断出病情阶段。患者被审核模块分为登录界面，眩晕量表提交界面与眩晕提交诊断提醒界面，如图所示。

{/* 代码节选片段 */}
 <View className={classnames(styles.item)}>
        <View className={styles.title}>1.在过去，你是否发生过至少一次的眩晕？</View>
        <View className={styles.ansBox}>
{/* 用户选择按钮 */}
          <RadioGroup onChange={(e) => changeRadio(e, '1')}>
            <Label className={styles.label}><Radio checked={form['1'] == 1 ? true : false} value={1} className={styles.radio}>是</Radio></Label>
            <Label className={styles.label}><Radio checked={form['1'] == 0 ? true : false} value={0} className={styles.radio}>否</Radio></Label>
          </RadioGroup>
        </View>
      </View>
      <View className={classnames(styles.item)}>
        <View className={styles.title}>2.第一次眩晕发生在多久？</View>
        <View className={styles.ansBox}>
          <View className={classnames('rowFlex', styles.line)}>
            <Text className={styles.text}>请填写具体的日期</Text>
            <Picker onChange={(e) => {
              timeChange(e, '2')
            }} mode="date" className={styles.picker}>
              <View className={styles.pickerText}>{form['2']}</View>
            </Picker>
          </View>
        </View>
      </View>

（3）指导模块

任意打开其中的大纲，即可获得指导文字，将其放于首页，并不单独设置页面跳转，使得患者能更加清楚了解到指导的重要性，并能快速的获得指导。指导模块分为饮食大纲界面，起居大纲界面，如图所示。

{/* 代码节选片段 */}
<View className={styles.guideBox}>
   <View className={styles.title}>指导</View>
     <View className={classnames('rowFlex',styles.guideMain) }>
       <View className={classnames('rowFlex',styles.guideItem) } onClick={()=>{openLayout(1)}}>
            <Text>饮食</Text>
         </View>
        <View className={classnames('rowFlex',styles.guideItem) } onClick={()=>{openLayout(2)}}>
            <Text>运动</Text>
        </View>
        <View className={classnames('rowFlex',styles.guideItem) } onClick={()=>{openLayout(3)}}>
            <Text>环境</Text>
          </View>
        <View className={classnames('rowFlex',styles.guideItem) } onClick={()=>{openLayout(4)}}>
            <Text>睡眠</Text>
          </View>
        </View>
      </View>

（4）量表图模块

眩晕障碍量表以选择的形式，让患者获得最终的眩晕等级评级，而平衡心量表以不同于障碍量表的星星选择来进行分数的评级，让患者能很清楚的区分自己所填写的界面，量表测试题都放于同一相应页面内，让患者能反复斟酌自己的选项，减少当题量处于不同页面时的点击繁琐麻烦。量表图模块分为眩晕障碍测试界面与平衡信心测试界面，如图所示。

/* 获取平衡信心量测试问题JS逻辑代码 */
/* useEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。在useEffect中，不仅会请求后端的数据，还会通过调用setData来更新本地的状态，这样会触发view的更新。*/
  useEffect(()=>{
    initPage()
  },[])
/* 初始化页面 */
  const initPage = ()=>{
    setLoading(true)
    Taro.showLoading({
      title: '加载中...'
    })
  /* 获取平衡信心量测试问题接口 */
    listBalanceTest({}).then(res=>{
      setLoading(false)
      Taro.hideLoading()
      if(res.code == 200){
      /* 拿到数据进行加载页面*/
        setBalance(res.result)
      }
    }).catch(()=>{
      Taro.hideLoading()
      setLoading(false)
    })
  }
  const rateChange = (e,data)=>{
    setAns({...ans, [data.balanceId]: e});
  }

（5）首页模块

以一个页面便告知用户本程序所具有的重要功能，眩晕障碍测试与平衡心量表测试分别以不同的颜色占据同一行的前后位置，明确告知患者这个界面还有两个测试跟进，放于显眼的地方，并以颜色和文字区分。闹钟的图片放于中间，让用户能很清楚的了解到就诊时间情况。首页模块如图所示。

/* 首页布局部分代码节选 */ 
<View className={styles.banner}>
        <Image className={styles.bannerImg} src={banner} mode="aspectFill"></Image>
      </View>
      <View className={classnames('rowFlex', styles.topBox)}>
        <View className={classnames("rowFlex",styles.boxItem)} onClick={() => {
          pageRoute('/pages/patient/vertigo/vertigo')
        }}>
          <Image src={icon1} className={styles.icon} />
          <Text>眩晕障碍量表测试</Text>
        </View>
        <View className={styles.center} onClick={()=>{showTime()}}>
          <Image src={icon3} className={styles.icon3} mode="widthFix" />
        </View>
        <View className={classnames("rowFlex",styles.boxItem)} onClick={() => {
          pageRoute('/pages/patient/balance/balance')
        }}>
          <Image src={icon2} className={styles.icon} />
          <Text>
            平衡信心量测试
          </Text>
        </View>
      </View>

（6）个人中心模块

眩晕障碍得分，平衡心指数等级，患者眩晕阶段，就诊时间，年龄，性别，姓名，电话等患者的个人信息放于同一页面，让用户能更加清楚的自身目前所处的情况。眩晕障碍、平衡心、就诊时间处于同一行，并以不同的颜色进行区分。个人中心模块如图所示。

 // 获取用户相关信息
  const getUserInfo = (e) => {
    const info = e.detail.userInfo;
    Taro.login({
      success: (lo)=>{
        Taro.showLoading({
          title: '登录中...'
        })
        // 登录接口
        wechatLogin({code: lo.code}).then(we=>{
          if(we.code == 20001){
            let reqData = {  //提交数据表单
              userNickName: info.nickName,
              userImage: info.avatarUrl,
              userSex: info.gender,
              userId: we.result.userId,
            }
            updateUser(reqData).then(()=>{ //更新用户接口
              getUserById({userId: we.result.userId}).then(user=>{
                Taro.hideLoading()
                if(user.code == 200){
                  setUserInfo(user.result) //缓存用户数据
                  setStrong(cusData.userInfo,user.result || null)
                }
              })
            }).catch(()=>{
              Taro.hideLoading()
            })
          }else {
            Taro.hideLoading()
            setUserInfo(we.result)
            setStrong(cusData.userInfo,we.result || null)
          }
        }).catch(()=>{
          Taro.hideLoading()
        })
      }
    })
  }