50
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
1 系统的意义
餐饮企业为用户提供的服务，已经不再局限于堂食。随着移动互联网技术的发展，尤其是小程序的出现，餐饮企业的服务也随之升级，推出美食服务类的小程序，用户提供更为便捷的美食服务。这总服务的提升，带来的优势是，信息通信的成本得到降低，用户和餐饮企业的联系更为紧密，两者可以方便快捷的沟通，增加互动，提高了用户的粘性。餐饮企业通过小程序，进行线上营销，维系老用户，并获得更多的新用户。
生活水平的提高，让当代人对美食的追求，不再局限于温饱。人们渴望与食材、味道进行对话，渴望体验美食带来的乐趣。越来越多的人，热衷于自己烹饪美食，获得健康和幸福。用户使用美食类小程
序，查询各种美食的食材用料、做法等，解决没有经验，不会做的问题。用户追求便利消费，小程序的移动定位技术很好的满足了用户的需求。用户在美食类小程序中，美食的种类、数量、环境等选择面更为丰富。用户通过使用美食类小程序，不仅解决了吃的问题，更满足了情感需求和社交需求。2 系统的开发工具
小程序的开发框架实现了简单高效的开发方式，整体的系统框架由逻辑层、视图层两部分组成。逻辑层使用JavaScript 语言描述，视图层使用Wxml 语言和Wxss 语言描述。逻辑层与视图层可以进行数据、事件的通信。响应的数据绑定系统是小程序的框架核心，数据和视图可以保持同步的更新。框架管理整个小程序的页面路由，每个页面有完整的生命周期，页面之间可以切换。2.1 Wxml
Wxml （WeiXin Markup Language ）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML 具有数据渲染、列表渲染、条件渲染、模板等功能。在组建上使用wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。Wxml 中的动态数据均来自对应Page 的data 。使用wx:if 判断是否需要渲染代码块。可以在模板中定义代码片段，然后再不同的地方调用。2.2 Wxs
Wxs （WeiXin Script ）是小程序的一套脚本语言，结合WXML ，可以构建出页面的结构。可以在wx
ml 文件的 <wxs> 标签中编写WXS 代码，也可以在 .wxs 文件中编写WXS 代码。Wxs 可以在版本的小程序中运行。2.3 JavaScript
JavaScript 是一种轻量级、函数优先的解释型或即时编译型的编程语言。JavaScript 支持面向对象、命令式、函数式风格。Web 页面和很多非浏览器环境中，都可以使用JavaScript 。3 系统功能需求
在互联网和移动技术发展迅猛的时代，人们希望通过移动设备，学习美食的制作，观看美食视频，为自己的工作之余的时间，提供
基于小程序的美食服务平台的设计与实现
朱敏
（苏州市职业大学  江苏省苏州市  215104）
乐趣，减少压力。本系统是一个基于小程序的美食服务平台。系统为美食爱好者提供了方便快捷、即用即走的美食服务，包括菜谱、视频、热量、消息、登录等。用户无需下载安装，通过扫一扫或搜一下即可打开应用。用户能够方便快捷地查看菜谱、观看视频、计算热量等。3.1 学烹饪
本模块提供用户丰富的、图文并茂的、人性化的食谱家常菜，满足用户想要学习制作精致家常菜的需
求。每个菜谱由名称、食材准备、步骤、热量、制作时长等部分组成。用户能够通过简单的步骤学习制作精美家常菜。用户选择某一个菜谱，点击进入详细页面，查看菜谱的详细的制作过程。3.2 热量计算
现代人对食物的热量越来越重视，减少食物的摄入量，控制饮食，成为了健康的饮食方式。用户通过本系统的热量计算功能，能够获得食物的总热量，方便用户控制饮食，管理身体健康。系统将
摘　要：本文设计了一种基于小程序的美食服务平台系统，系统为美食爱好者提供了方便快捷、即用即走的美食服务，包括菜谱、视频、热量、消息、登录等。用户无需下载安装，通过扫一扫或搜一下即可打开应用。用户能够方便快捷地查看菜谱、观看视频、计算热量等。本系统使用的技术包括
Json、Wxml、Wxss、JavaScript 等。
关键词：小程序；平台设计；系统功能
图1：系统功能结构图
图2：系统运行效果图
51
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
所有的食材分为主食、蔬菜、水果、肉禽四大类。用户首先选择类别，在相关选项卡中，用户根据不同的食材，输入不同的重量，系统计算出所有食材的总热量。3.3 美食视频
用户通过本系统的美食视频，可以了解美食的制作过程，体验制作美食的乐趣，得到满足感。对于很多的上班族，自己制作美食受到客观条件的限制，观看美食视频，能够在视觉上得到满足，弥补味觉上的缺憾，增加食欲，美化心情，减少压力。用户通过点击喜欢的视频的链接，打开视频观看，并且可以发送弹幕，实现一边观看视频，一边与网友交流的体验。3.4 登录
用户使用登录功能，登录小程序，并且可以获取本系统的介绍、美食企业的情况，通过投诉功能，可以将对本系统的意见提交给企业，增加用户与企业的互动。用户点击登录按钮后，即可登录，并查看团队和美食企业的相关信息。3.5 消息
用户通过消息功能，可以与美食企业进行在线交流，满足的社交性能，美食企业通过与的沟通，可以联络感情，提高用户的留存率。用户通过发私信，与美食企业人员进行在线交流。系统功能结构图如图1所示。4 系统的实现4.1 学烹饪小程序制作平台哪个好
通过列表的形式，将所有的菜谱展示在页面中，用户通过点击感兴趣的菜谱，可以打开相关菜谱的详细信息页面，页面中显示该菜谱的制作过程的详细信息。在.js 文件，定义菜谱列表，保存菜谱的名称、图片、制作过程等信息。在.wxml 文件中，通过列表渲染，获取所有的列表项，并显示。核心代码如下：
<view class="list">
<block wx:for="{{array}}" wx:key="{{item.id}}">
<view class="item" bindtap="seeDetail"bindtap='goToDetail'data-id="{{item.id}}">
<view>4.2 热量计算
通过tab 标签，将所有的食材分为主食、蔬菜、肉禽、水果四类。用户选在相关的选项卡，在每个选项卡中，到相应的食材，并在对应的文本框中输入重量，最后单击计算按钮，即可获得总热量。在.js 文件中，定义相关食材的名称等信息。在.wxml 文件中，布局文本输入框，根据用户输入的食材的重量，计算所有食材的总热量。核心代码如下：
//布局输入框
<view class="wrap_layer"><text>番茄:</text>
<input type="number" placeholder="请输入" maxlength="3" class="inline" bindinput="fanqie" value="{{fanqie}}"></input>
</view>
//计算总热量
<button type="primary" bindtap="calculate">计算</button>4.3 美食视频
通过列表显示所有美食视频的名称，用户通过点击相关列表项，即可观看相应的视频。在观看视频的的过程中，可以输入弹幕，发送弹幕。在.js 文件中，定义视频列表，保存视频的名称等信息。在.wxml 文件中，渲染列表，显示在页面中。核心代码如下：
<view class="title">视频列表</view><view class="title::after" wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" bindtap="btnItemAction" data-
pid="{{itemName.name}}" data-indd="{{idx}}">4.4 登录
用户点击登录按钮，即可登录小程序。点击团队信息和企业信息，可以获取团队和企业的详细信息。在.js 文件中定义相关的变量，如用户的登录状态、图片的路径等，在.wxml 中，显示登录状态等信息。核心代码如下：
<button wx:else open-type="getUserInfo" bindgetuserinfo= "getMyInfo">未登录，在此登录</button>4.5 消息
用户通过私聊页面，可以与美食企业人员交流信息。在.js 文件中定义相关变量，如当前tab 的编号等，在.wxml 中，显示相关数据。核心代码如下：
<!--私信消息列表-->
<scroll-view scroll-y="true" class="message-list" wx:if="{{currentTab==0}}">
系统运行效果图如图2所示。5 系统的特5.1 本系统的主要特
本系统的开发是基于小程序，用户可以通过扫一扫，或者搜一下打开程序。本系统将小程序与美食相结合，用户足不出户，即可享受到美食带来的乐趣，满足社交体验，提高烹饪水平。美食企业通过发布各种美食食谱和视频，吸引用户的关注，提高关注度，为企业的发展开拓客源。通过消息的互动，实现用户与美食企业之间的良性沟通，使用户与美食企业都收益。5.2 本系统采用的主要技术
小程序的技术架构清晰明了，业务逻辑由js 负责实现，视图层由WXML 、WXSS 实现。小程序通过JSBridge 调用API 接口。小程序通过app.js 实现逻辑设计，通过app.json 实现公共设置，通过app.wxss 实现样式设置。在每个模块中，通过.js 文件实现页面的逻辑设计，通过.wxml 实现 页面结构的设计布局，通过.wxss 实现样式的定义，通过.json 实现页面设置。5.3 腾讯云数据库服务
本系统使用腾讯云数据库，支持基于 Windows 架构的小程序。即开即用、稳定可靠、安全运行、弹性扩缩等是腾讯云数据库的主要特点，并且具备高可用架构、数据安全保障、故障秒级恢复等功能。6 总结
作为一种新型的并行体系，小程序使用户体验到了触手可得的使用感受。其具备的可维护性、传播性、低成本，是目前能够流行的重要原因。本系统为美食爱好者提供了菜谱、视频、热量、消息、登录等功能。用户能够方便快捷地查看菜谱、观看视频、计算热量等。
参考文献
[1]鲜易洲.时食美食分享系统的设计与分析[J].电脑知识与技
术,2021(17):85-87.
[2]马静.基于小程序的购物商城系统的设计与实现[J].微
型电脑应用,2021(37):31-34.
[3]王圳.基于小程序设计校园浴室预约系统[J].电脑知识
与技术,2016(1):89-91.作者简介
朱敏（1981-），女，江苏省南京市人。硕士学位，苏州市职业大学讲师。研究方向为系统集成与分析。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。