信息通信
INFORMATION  & COMMUNICATIONS
2020年第5期(总第209期)
2020(Sum. No  209)
基于mui 和H5+混合应用的菜篮子APP 设计和实现
谭晖涛，孙 洁.谢赞福，卢道设
(广州华夏职业学院，广东广州510900)
摘要：移动应用APP 开发模式由原来单一的native  app 开发模式到现在的H5+混合应用开发，基于H5+混合应用开发,
由于具有开发周期短、跨平台、一次开发多端发布等优点逐漸成为主流趋势，文章以菜篮子APP 为应用实例，通过基于
mui 和H5+混合应用开发模式，服务器端采用SSM 架构，数据库采用MySQL，客户端开发采用mui 框架
、Jquerymobile  等技术设计实现，经测试，利用基于mui 和H5+爲合应用开发的APP 能&实现一次开发多端发布，能够运行直Android 、 IOS 等系统平台上，实现跨平台开发。
关键词：H5+混合应用mui ; SSM 架构；多端发布
中图分类号:TP311.56
文献标识码:B  文章编号：1673-1131(2020 )05-0098-04
1概述
随着移动互联网的发展和智能手机的普及，移动APP 正对 很多行业产生变革，中国成为APP 数量增长最快的国家之一，
现如今，国内智能手机用户般动APP 的需求量也在不断的增
加,APP 开发市场还拥有着巨大的发展潜力。国内很多大型企
业都已经意识到移动互联网的强大，打造专属APP 迎接移动互 联网的新挑战，而一些传统行业也针对自身业务的需求打造线 上APP 拓展自己的业务。移动APP 开发市场在我国未来的发
展前景被看好,APP 也将会成为移动互联网未来的大趋势。
目前移动应用APP 开发模式总的来说主要分为三种。
1.1原生应用开发
原生应用开发，是在Android 、IOS 等移动平台上利用官方
提供的开发语言、开发类库、开发工具进行APP 开发。比如
Android  是利用 java 、eclipse 、Android  studio, IOS  是利用 Ob- jective-C 和Xcode 进行开发。原生应用由于利用的是官方提 供的语言和工具并且能够直接操控硬件设备(比如多点触控、
NFC 、读取短信等)，在应用性能上和交互体验上应该是最好 的，但是原幽用的可移植性比妙特别是一款原生的APP,
Android 和IOS 都要各自开发，同样的逻辑、界面要写两套。
1.2是HTML5应用开发
HTML5应用开发是利用Web 技术进行的APP 开发，我
们知道Web 技术本身需要浏览器的支持才能进行展示和用户
交互。主要用到的技术是HTML5、JavaScript 、CSS 等。现在
还有一些开发框架可以利用，比如phoneGap 、bootstrap 、jquery
等。H5开发的好处是可以跨平台，编写的代码可以同时在
Android 、IOS 、Windows 上进行运行。由于Web 技术本身的限
制,H5移动应用不能直接访问设备硬件和离线存储，所以在体 验和性能上有很大的局限性。
1.3混合应用开发
混合应用开发正是结合原生和H5开发的技术，取长补短
的一种开发模式，原生代码部分利用WebView 插件或者其它
的框架为H5提供了一个容器，程序主要的业务实现、界面展
示是利用H5相关的Web 技术进行实现的。比如现在的京东、 淘宝、今日头条等都是利用的混合开发模式。混合APP 开发 是未来的趋势，目前混合开发中使用的技术也很多，主要的混
合开发技术有 jQuery  Mobile 、React  Native 、Cordova 、API-
Cloud^AppCan  等。
结合菜篮子APP 的应用场景，我们采用第三种混合应用
开发方法，客户端采用基于mui 框架和H5+技术，融合ajax 和
json 数据技术，实现菜篮子APP 应用功能。
2莱篮子APP 系统功能需求分析
随着移动互联网的发展和智能手机的普及，越来越多的
人习惯通过手机购物，促使很多线下的蔬菜和肉类等农产品
供应商开拓了线上商城。农产品配送APP 的出现，给人们的 日常生活提供了便利，让人们足不出户就可以买到各种生鮮
食材，给用户带来了生活上的便捷。
菜篮子APP 系统主要包括如下功能：
⑴热门农产品:APP 首页会为用户展示各种类型的热门
农产品，也会为用户提供行业资讯，方便用户在线浏览相关产
品和行业资讯，让用户深入了解生鲜市场。
(2) 农产品分类：为了方便用户在短时间内到合适的农 产品，平台会对农产品进行分类，用户可以选择相应的农产品
板块来搜索商品，也能直接在线査农产品信息，让用户获得 良好的购买体验。
(3) 农产品介绍：通过精美图片来展示农产品是店铺吸引 用户消费的手段，用户在浏览商品信息的同时也能查看农产
品图片，给用户提供一定的便利。
(4) 在线支付功能：当用户选购好相关产品之后，就能在 线支付购买费用，平台支持用户使用钱包或是支付宝进 行在线支付。
⑸用户下单之后，就能短时间内受到农产品，在保证商
品质量的情况下为用户提供良好的配送服务。
3服务端架构和数据库
3.1服务端系统架构
基于mui 和H5+混合应用菜篮子APP 包插服务器端和移 动APP 客户端，服务器端主要员责提供接口数据返回给客户 端，同时接收客户端返回的数据进行处理和保存。服务端框 架采用 SpringMVC  + Spring  + MyBatis  进行开发。
图1月良箸端部署图
收稿日期：202卜0447
98
jquery源码在线

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