１ 饮食搭配科普小程序的设计背景
１．１ 时代背景
１．１．１ 外界环境的变化
现如今5G的快速建设和5G网络的快速普及为用户使用智能手机提供了基础的条件。
１．１．２ 小程序的优势
小程序以简洁、方便的特点深受大众的喜爱，已经成为人们日常生活中不可或缺的一部分。据统计，截至2020年7月14日，小程序的日活跃账户数已突破4亿。１．１．３ 国民现状
相关问卷调查数据表明，有超过一半的受调查者认为自己每天的饮食搭配不均衡，更有80%的受调查者表示自己并没有用过饮食搭配科普类的小程序，但是有超过90%的受调查者表明自己未来将会使用此类小程序，因此此类项目的研究拥有着极大的发展前景。１．２ 社会背景
１．２．１ 国内研究现状
2008年，赵昕通过对家用、餐馆电子食谱及其应用载体进行交互性设计，致力于研究出1个在实际生活中方便实用的可操作性强的养生食谱应用系统，该系统可以指导人们科学饮食[1]。
2018年，张志杰、杨自荣等人基于目前膳食分析系统存在需要通过手动输入1 d的饮食才能进行分析的问题，设计开发出一款以大数据为基础的膳食分析系统，该系统可以满足现代人对饮食的高要求以及特定人对饮食的需求[2]。
2019年，王丹、王亚文等人基于现代人的健康问题，致力于开发1个名为“吃了么”的小程序，旨在向用户传播与食物营养有关知识以及向用户介绍人体的营养需求，并帮助用户合理制定饮食方案[3]。
１．２．２ 国外研究现状
2003年，Abdus Salam Khan等人超越传统的基于案例的
饮食搭配科普小程序的交互
设计与探索
尹鲲龙 刘 雨 朱雅文 彭以建 陈望甲
（江苏大学京江学院，江苏 镇江 212002）
摘 要：基于目前存在会因膳食结构变化而引起非传染性疾病以及大众对饮食搭配了解很少的现象，该
项目使用Java、WXML以及JS等语言，设计了一款基于小程序的科普饮食搭配知识的小程序，旨在向人们普及有关饮食搭配的知识。用户在搜索目标饮食搭配的同时也能知道哪些是错误的饮食搭配，从而使国民能够意识到健康正确饮食搭配的重要性。以下将以时代背景为切入点详细介绍饮食搭配科普小程序的开发设计过程及其可以实现的功能。
关键词：小程序；小程序编码；饮食搭配；饮食知识科普；食品健康
中图分类号：TP 391.3 文献标志码：A
导，对高散热半导体材料的制备和发展有重要意义。
参考文献
[1]达文.中国纳米技术前景展望[J].中国新技术新产品精选，2004（4）：6-10.
[2]荆赟，施凯升.一种新型笼状纳米铂金的制备和应用[J].中国新技术新产品，2021（1）：13-15.
[3]张莹莹.铝硅界面热导的分子动力学模拟计算与理论模型研究[D].武汉：华中科技大学，2017.
[4]吴自勤，王兵，孙霞.薄膜生长.2版[M].北京：科学出版社，2013： 269-272.
[5]Tian Z，Esfarjani K，Chen G.Enhancing phonon transmission across a Si/Ge interface by atomic roughness： First-principles study with the Green's function method[J].Physical Review B Condensed Matter，2012，86（23）：235304.
[6]Zhang J，et al.Design rules for interfacial thermal conductance：Building better bridges[J].Physical review.B，Condensed Matter And Materals Physics，2017，95（19）：195303.1-195303.10.
[7]田民波.薄膜技术与薄膜材料[M].北京：清华大学出版社，2011：369-374.
[8]陈于中，宋成轶.电声耦合效应对热界面材料导热性能影响的研究进展[J].功能材料，2021，52（1）：1001-1010.
[9]Dickey J M，Paskin A.Computer Simulation of the Lattice Dyna mics of Solids[J].Physical Review，1969，188（3）：1407-1418. [10]Liang Z，Tsai H L.Effect of thin film confined between two dissi milar solids on interfacial thermal resistance[J].Journal of Physics Cond ensed Matter，2011，23（49）：495303.
[11] Liang T，Zhou M，Zhang P，et al.Multilayer in-plane graph ene/hexagonal boron nitride hetero
structures： Insights into the inter facial thermal transport properties[J].International Journal of Heat and Mass Transfer，2020， 151：119395.
（上接第7页）
- 27 -
推理方法，提出了1种可以有效开发菜单、构建系统的新方法。该方法允许系统自动构建1个根据客户的个人要求和食物偏好而定制的菜单，当用户不满意系统推荐的菜谱时，将由专家为用户手动修改推荐菜谱[4]。
2012年，Petot 等人通过对专家设计的菜单进行建模，设计出了既能够满足营养需求，又能够满足用户饮食需求的专家系统[5]。
２ 饮食搭配科普小程序开发的意义
目前有关饮食搭配以及介绍哪些搭配会减少营养的吸收甚至致病的文献不是很多并且比较分散，不利于人们系统地获取饮食搭配的相关知识。此外，虽然目前有许多关于对饮食营养分析以及搭配的小程序和App，但是它们都缺少纠正人们错误饮食搭配的功能，并且搜索得出的结果比较单一，即搜索内容即结果，并没有为用户提供目标搜索内容以外的饮食资讯。因此，笔者想开发一款科普饮食搭
配知识的小程序来帮助人们更好地了解各种健康的饮食搭配，同时使人们也能熟知哪些饮食搭配对身体有危害。
２．１ 饮食搭配科普小程序的目的
饮食搭配科普小程序旨在为各个年龄段的人提供服务，进而设计出一款以为用户提供饮食搭配为基础，科普饮食知识功能的小程序，在提升生活质量、避免疾病发生的同时，能够均衡个人的膳食结构，养成健康正确的饮食搭配意识。
２．２ 饮食搭配科普小程序的作用
虽然随着经济结构的改变，人们的生活水平有所提升，但是人们缺乏对饮食搭配以及饮食成分的认识，因此与饮食有关的慢性非传染病，例如肠胃不适、血脂指数异常以及心脏功能受损等疾病的发病率越来越高，这已渐渐成为威胁国民健康的突出问题[6]。 笔者希望用户可以通过该小程序了解食物本身的营养与禁忌，在适应快节奏生活、减少外卖食用次数的同时，更加注重饮食搭配的健康性，从而达到营养均衡的目的。
３ 饮食搭配科普小程序的设计过程及功能介绍３．１ 小程序的开发流程
３．１．１ 前期准备
在开发小程序之前，需要对系统进行分析与规划，确定用户需求以及系统应该具备的功能，从而设计出E-R 图，并对关系模式进行设计。
３．１．２ 开发工具
３．１．２．１ 开发者工具
通过开发者工具并使用WXML、JS等语言对小程序的整体布局以及系统功能进行开发，再对小程序进行调试、运行和维护，最终完成对小程序的设计。３．１．２．２ Ｅｃｌｉｐｓｅ
Eclipse平台的主要作用是为工具提供者提供使用机
制和遵循的规则，从而实现无缝集成工具。该平台可以提供有助于开发新工具的构建块和框架。
３．１．３ 前端显示
３．１．３．１ 注册登录界面
该模块是登录小程序的注册登录界面，基于Eclipse开发环境对用户注册登录界面进行编写。用户需要输入姓名和密码才可以进入小程序。
该模块的主要代码如下。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional// EN”
“http：///TR/html4/loose.dtd”><html><head><center> <title>用户登录页面</title>
<style type=”texts”>
@import url（style.css）;
</style>
； ； ； ；
</head><center>
<body >
<div id=”bg”>
<div class=”login_main” ><br>
<h1 align=”center” > <font face=”黑体” size=”10”>饮食搭配科普<br>小程序<br>
</font></h1>
<br><br>
<form name=frm action=”main-page.jsp”>
姓名：<input type="text" name="xm" class="inputText"
onblur=”fun（）” placeholder=”请输入用户名”/><br>
密码：
<input type="password" name="mm"
class="inputText" placeholder="请输入密码"/><br>
； ； ； ；
<input type=”submit” value=”登录”style=”width：200px;height：35px” class=”inputBtn”/>
</form>
</div>
</body>
</center>
</html>
３．１．３．２ 首页界面
该模块是系统登录后的首页界面，基于Eclipse开发环境对小程序的首页界面进行编写，通过表单标记<form>属性设置搜索栏目，从而收集用户搜索的信息，最终实现系统与用户之间的交互功能。用户在搜索框内输入食品名称及搭配，就可以得到目标食物的相关信息，小程序的运行效果如图1所示。
该模块的主要代码如下。
<center>
<div id=”bg”>
<div class-”bordered” >
<h2 align=”center”font-face=”黑体”“font-size=”6”>
- 28 -
饮食格配科普</h2>
<form action=”milk.html” >
<input type=”text” name=”xm” class=inputText”
onblur=”fun（）” placeholder=”牛奶不宜和什么一起搭配? “ />
<input type=”submit”value=”搜索” style=”width：50px;height：25px”class=”input1”><br>
<img src=”插图1.jpg”width=”300px”height=”118px” alt=”403” >
小程序平台有哪些<br><img src=”插图5.jpg” width=”300px”height=”58px” alt=”403” >
<br><br>
<p align=”left”><br><font face=”黑体” size=”5”> ；项目一览</font></b>
<font face=”黑体” size=”3” colar=”grey” > ；自选项目 快速精准</font>
</p>
<table border=”o”>
<tr>
<td>< img src=”插图4. png” width=”150px”height=”80px” alt=”403”></td>
<td>< img src=”插图2. png” width=”150px”height=”80px” alt=”403”></td>
</tr>
<table>
<br>< img src=”插图6.png” width=”335px” height=”45px”a1t=”403”
</form>
</div>
</div>
</center>
３．１．３．３ 搜索详情页面
该模块是小程序的搜索详情界面（以搜索牛奶为例），该编码程序可以实现搜索界面与信息查询结果界面之间的跳转，从而显示某食品（以牛奶为例）相关搭配的具体信息。同时，用户搜索所得到的界面信息是由不同平台汇总所得出的。
该模块的主要代码如下。
<center>
<div id=”bg”>
<p><b><font face=” 黑体” size=”5” > ；热量查询</ font></b>
<form>
<input type =”text’ name-”xm” class=”inputText”
onblur=”fun（）” placeholder-”牛奶”/>
</form>
<br>
<table>
<tr><td rowspan=”4”>< img src=”插图10.jpg”width=”150px” height=”80px” alt=”403”></td> <td><font size=”3”color=”grey”>牛奶热量： </font></ td>
</tr>
<tr><td><font size=”5”> 50大卡/100克</font></</ td></tr>
<tr><td>每100克牛奶含碳水化合物4.71克，脂肪2克，蛋白质3.29克，纤维素0克</td></tr>
<tr><td>.详情></td></tr>
</tab1e>
</div>
</center>
３．１．３．４ ＣＳＳ样式界面代码
该模块可以优化设计小程序的界面，通过层叠样式表单CSS技术实现对小程序界面样式的设计，达到简化页面排版、保持多个页面样式协调统一的效果。
该模块的主要代码如下。
.bordered {border-style：solid; width：600px;height：350px;} #bg{width：335px;height：568px; background： url（背景1.jpg）;}
input{width： 200px;height：35px;margin： 10px auto;font-size： 16px;
box-sizing： border-box;outline： none;}
.inputText{border：solid cadetblue 1px;padding-left： 10px;} .inputBtn{background： cadetblue;color： white;border：none;}
３．２ 小程序的构成
总体上小程序可以分为首页、饮食搭配、饮食知识以及食友交流4个版块。其中首页包括所有功能的链接入口，能够方便用户快速地搜索到目标内容。当然，用户也可以进入不同的版块，对各版块进行点对点的了解；其中，第二版块（饮食搭配）是该小程序最有创意、也是最重要的内容，它可以帮助用户了解并纠正日常最容易被忽略的错误饮食搭配；第三版块（饮食知识）主要具备查询饮食的热量以及成分的功能；第四版块（食友交流）可以为食友提供交流与信息互享的平台，如图1所示。
图1 饮食搭配科普小程序页面图
饮食搭配科普
牛奶不易和什么一起搭配？
快速问专家
饮食资询 快速搭配
自选项目 快速精准
饮食了解
首页饮食搭配饮食知识食友交流
项目一览
搜索
7*24小时去咨询
- 29 -
- 30 -
３．３ 小程序的核心功能
３．３．１ 自动生成目标饮食搭配，并指出相关且有害的饮食搭配
在小程序的饮食搭配页面，用户可以在最顶层的搜索栏搜索自己的目标饮食，随后小程序会根据用户的搜索内容在数据库中检索出不同的饮食搭配，并将搜索结果细分为以下2类：1） 正确的饮食搭配。2） 错误的饮食搭配。搜索结果也会附带相应的医学知识，明确地指出各类搭配的利弊所在，从而达到向用户科普饮食知识的目的（如图2所示）。另外，用户也可以选择搜索框中的早、午、晚、一天以及每周的综合搭配按钮，进而寻求更全面、更综合的搭配。
３．３．２ 对查询结果的精细化分类处理
现在页面显示的查询结果会进一步对内容进行细分，其中每一条搜索结果后面有标注为常见与不常见的字样，用户可以很直观地查看自己的搜索结果，如图2所示。
图2 饮食搭配页面
牛奶+橘汁（不常见）
牛奶+香蕉（常见）
此搭配不可取。有些人建议在牛奶中…此搭配不可取。香蕉是含糖量比较…2020-12-22
2021-03-08
牛奶
３．３．３ 查询食品的热量以及营养成分
在热量查询窗口，用户可以对食物的热量以及营养成
分结构进行查询。
３．３．４ 饮食该文每日推送
在进入小程序后，单击项目一览下的每日推送功能按钮，页面就会跳转至饮食知识版块的饮食文章区域，用户可以根据该文左下角的日期来选取最新的饮食资讯。
３．３．５ 专家２４ ｈ在线免费咨询
用户进入小程序首页后，单击快速问专家右侧的按钮，就可以进入询问专家的页面，这里将有许多医院专家以及在高校食品和营养学专业任教的老师为用户提供24 h 的服务。
３．３．６ 默契匹配，食友交流
用户可以在食友交流页面分享、上传自己的饮食体会，经过专家审核后，就可以在首页的底端查看自己发布的内容，该功能充分调动大家对健康饮食的兴趣。
３．４ 小程序的后台基础
３．４．１ 数据的支持
笔者将通过开发者工具平台，利用WXML、JS 等语言对小程序的前端进行创建，在后端用Java
语言对服务器端程序进行编写；同时引用2016版《中国居民膳食指南》以及中国饮食网等权威网站的相关数据，从而确保数据来源的可靠性。
３．４．２ 医院专家以及高校教师的支持
该小程序将会招募许多在一线的医学工作者以及在高校食品、营养学专业任教的老师，进而在最大程度上提高信息内容的准确性。
３．４．３ 后台维护
当出现异常运行时，小程序就会自动报错，并将相关信息上传至系统，由后台维护者在后台对漏洞、程序进行统一修复和更新，尽可能地确保用户在正常使用小程序的同时拥有更加舒适的体验。
４ 结语
现在小程序逐渐走入人们的日常生活，据统计，截至2020年7月14日，小程序的日活跃账户数已突破4亿，但是手机里关于饮食搭配的信息鱼龙混杂，朋友圈、里充斥着大量未经证实的饮食搭配，这些信息具有很强的误导性。因此，为了给人们提供健康饮食的有效信息、避免伪科学给人们带来危害，该程序致力于建设1个服务大众的公用平台，科学地甄别各种饮食搭配信息，在帮助用户纠正错误饮食搭配，避免患病的同时，也能够形成健康正确的饮食搭配意识，保证人们的健康。除此
之外，研究人员还会对该程序进行不断地更新，进而增强小程序的实用性。
参考文献
[1]赵昕.交互式设计在电子健康饮食菜谱及其载体设计中的应用[D].上海：同济大学，2008.
[2]张志杰，杨自荣，滕玉东，等.基于小程序的智能膳食分析系统[J].智能处理与应用，2018（6）：102-105.[3]王丹，王亚文，刘佳.“吃了么”小程序的开发与应用[J].电脑编程技巧与维护，2019，414（12）：82-84.[4]Khan A S，Hoffmann A.Building a case-based diet recommend ation system without a knowledge engineer[J].Artificial Intelligence in Medicine，2003，27（2）：155-179.
[5]A.NuriBasoglu，Tugrul Ü.Daim，Ibrahim Iskin，et al.New pr oduct development for the healthcare industry ： A case study of diet software[J].Health Policy & Technology，2012，1（2）：93-104.
[6]中国营养协会.中国居民膳食指南[M].北京：人民卫生出版社，2016.
基金项目：江苏大学京江学院2020年度大学生创新创业训练资助项目（项目编号：202013986009Y）。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论