H5 移动APP - 面包店
2024-05-20 17:15:06
使用jquerymobile、html5、css3实现移动APP
流程图
打包
用hbuilder实现打包
效果截图展示
图2-1 APP图标
图2-2 主页
图2-3 面包列表&详细信息
图2-4 订购
图2-5 生成&查看订单
图2-6 删除订单
图2-7 分店列表&详细信息
图2-8 定位系统
主要代码
index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><script type="text/javascript">document.addEventListener('plusready', function() {//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"});$(function() {})</script></head><body><div data-role="page"><div data-role="header" data-position="fixed"><h1>面包物语</h1></div><div data-role="main" class="ui-content"><img src="img/logolong.png" style="width: 100%;"/><ul data-role="listview" data-inset="true"><li><a href="list.html" data-ajax="false">面包列表</a></li><li><a href="search.html" data-ajax="false">我的订单</a></li><li><a href="map.html" data-ajax="false">地图定位</a></li> <li><a href="info.html" data-ajax="false">商店信息</a></li><li><a href="jiameng.html" data-ajax="false">关于我们</a></li><!-- <li><a href=""></a></li> --></ul></div></div></body>
</html>search.html
<!doctype html>
<html><head><meta charset="utf-8"><title>用户查询订单</title><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">#content {font-size: 15px;padding: 20px;margin: 0px;}.ui-block-a,.ui-block-b,.ui-block-c {height: 30px;text-align: center;padding-top: 5px;border-bottom: 1px solid;}</style><script type="text/javascript">$('#first').ready(function() {$("#del").hide(); //隐藏按钮//判断各个商品是否有值,否则不显示if (localStorage.sp1 != null) {$("#sp1").html(localStorage.sp1);$("#kw1").html(localStorage.kw1);} else {$("#sp1p").hide();}if (localStorage.sp2 != null) {$("#sp2").html(localStorage.sp2);$("#kw2").html(localStorage.kw2);} else {$("#sp2p").hide();}if (localStorage.sp3 != null) {$("#sp3").html(localStorage.sp3);$("#kw3").html(localStorage.kw3);} else {$("#sp3p").hide();}if (localStorage.sp4 != null) {$("#sp4").html(localStorage.sp4);$("#kw4").html(localStorage.kw4);} else {$("#sp4p").hide();}if (localStorage.sp1 != null || localStorage.sp2 != null || localStorage.sp3 != null || localStorage.sp4 != null) {$(".noorder").hide();if (localStorage.pay == 1) {$("#delo").show();$("#pay1").hide();$("#pay2").show();$("#alo").hide();} else {$("#pay1").show();$("#pay2").hide();}} else {$(".haveorder").hide();$("#pay1").hide();$("#pay2").hide();}});function deleteOrder() {localStorage.clear();$(".ui-grid-b").html("已经取消订单！");$(".noorder").show();$(".haveorder").hide();$("ul").hide();$("#pay2").hide();$("#pay1").hide();$("#del").show();}</script></head><body><div data-role="page" data-title="订单列表" id="first" data-theme="a"><div data-role="header" data-position="fixed"><a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">主页</a><h1>订单列表</h1></div><div data-role="content" id="content"><ul id="sp1p" data-role="listview" data-inset="true"><li data-role="list-divider">面包种类</li><li>奶油面包</li><li data-role="list-divider">口味</li><li id="kw1"></li><li data-role="list-divider">订购数量</li><li id="sp1"></li></ul><ul id="sp2p" data-role="listview" data-inset="true"><li data-role="list-divider">面包种类</li><li>全麦培根面包</li><li data-role="list-divider">口味</li><li id="kw2"></li><li data-role="list-divider">订购数量</li><li id="sp2"></li></ul><ul id="sp3p" data-role="listview" data-inset="true"><li data-role="list-divider">面包种类</li><li>黑糖面包</li><li data-role="list-divider">口味</li><li id="kw3"></li><li data-role="list-divider">订购数量</li><li id="sp3"></li></ul><ul id="sp4p" data-role="listview" data-inset="true"><li data-role="list-divider">面包种类</li><li>全麦面包</li><li data-role="list-divider">口味</li><li id="kw4"></li><li data-role="list-divider">订购数量</li><li id="sp4"></li></ul><ul id="del" data-role="listview" data-inset="true"><li>订单已删除！</li></ul><a class="haveorder" id="alo" href="list.html" data-role="button" data-inline="true" onclick="alterOrder () ;" data-ajax="false">修改订单</a><a class="haveorder" id="delo" href="#" data-role="button" data-inline="true" onclick="deleteOrder () ;" data-ajax="false">删除订单</a><a id="pay1" href="pay.html" data-role="button" data-inline="true" data-ajax="false">支付订单</a><a id="pay2" href="#" data-role="button" data-inline="true" data-ajax="false">已完成订单</a><a class="noorder" href="list.html" data-role="button" data-ajax="false">没有订单哦~<br>点此查看面包~</a></div><div data-role="footer" data-position="fixed" style="text-align:center">订购专线：18900229966</div></div></body>
</html>list.html
<!doctype html>
<html><head><meta charset="utf-8"><title>面包列表</title><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style type="text/css">img {width: 100%;}.cont {width: 100%;}</style><script>$.extend({//这个函数用于更新列表的商品数量'sp':function(){if(localStorage.sp1==null){$("#sp1").html("0");} else {$("#sp1").html(localStorage.sp1);$("#num1").val(localStorage.sp1);}if(localStorage.sp2==null){$("#sp2").html("0");} else {$("#sp2").html(localStorage.sp2);$("#num2").val(localStorage.sp2);}if(localStorage.sp3==null){$("#sp3").html("0");} else {$("#sp3").html(localStorage.sp3);$("#num3").val(localStorage.sp3);}if(localStorage.sp4==null){$("#sp4").html("0");} else {$("#sp4").html(localStorage.sp4);$("#num4").val(localStorage.sp4);}}});$(function(){$.sp();//按钮点击触发$("#addToStorage1").click(function(){localStorage.sp1=$("#num1").val();localStorage.kw1=$("#selectflavour1").val();localStorage.bz1=$("#selectitem1").val();$.sp();$("#a1")[0].click(); //关闭弹窗,下同});$("#addToStorage2").click(function(){localStorage.sp2=$("#num2").val();localStorage.kw2=$("#selectflavour2").val();localStorage.bz2=$("#selectitem2").val();$.sp();$("#a2")[0].click();});$("#addToStorage3").click(function(){localStorage.sp3=$("#num3").val();localStorage.kw3=$("#selectflavour3").val();localStorage.bz3=$("#selectitem3").val();$.sp();$("#a3")[0].click();});$("#addToStorage4").click(function(){localStorage.sp4=$("#num4").val();localStorage.kw4=$("#selectflavour4").val();localStorage.bz4=$("#selectitem4").val();$.sp();$("#a4")[0].click();});})</script></head><body><div data-role="page"><div data-role="header"><a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">主页</a><h1>面包物语</h1><a href="search.html" data-icon="check" data-ajax="false">提交订单</a></div><div data-role="main" class="ui-content"><ul data-role="listview" data-inset="true" data-filter="true"><li> <a href="#buy1" data-rel="popup"> <img src="img/ny.jpg"><h3>奶油面包<span id="sp1" class="ui-li-count"></span></h3><p>面包中包含夹心奶油，入口即化，口味俱佳，若是加热三分钟，口感更上一层</p></a><!-- zheli --><div data-role="popup" id="buy1" class="ui-content"><a id="a1" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a><p><p><img src="img/ny.jpg" /></p><p class="cont">面包中包含夹心奶油，入口即化，口味俱佳，若是加热三分钟，口感更上一层</p><br>选择包装种类：<select name="selectitem" id="selectitem1"><option value="塑料袋装盒">塑料袋装盒</option><option value="纸片装盒">纸片装盒</option><option value="锡纸装盒">锡纸装盒</option></select><!--选择口味-->选择口味：<select name="selectflavour" id="selectflavour1"><option value="奶油味">奶油味</option><option value="全麦">全麦</option><option value="黑糖">黑糖</option><option value="培根">培根</option></select><fieldset data-role="controlgroup"><!--数量范围滑竿--><br>订购数量:<input type="range" name="num" id="num1" value="1" min="0" max="100" data-highlight="true" /><!--订购按钮--><br><input type="button" id="addToStorage1" value="确定" /></fieldset></p></div></li><li> <a href="#buy2" data-rel="popup"> <img src="img/pg.jpg" /><h3>全麦培根面包<span id="sp2" class="ui-li-count"></span></h3><p>德国进口的炭烧培根，嵌入全麦面包片中，味道超级棒</p></a><div data-role="popup" id="buy2" class="ui-content"><a id="a2" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a><p><p><img src="img/pg.jpg" /></p><p class="cont">德国进口的炭烧培根，嵌入全麦面包片中，味道超级棒</p><br>选择包装种类：<select name="selectitem" id="selectitem2"><option value="塑料袋装盒">塑料袋装盒</option><option value="纸片装盒">纸片装盒</option><option value="锡纸装盒">锡纸装盒</option></select><!--选择口味-->选择口味：<select name="selectflavour" id="selectflavour2"><option value="奶油味">奶油味</option><option value="全麦">全麦</option><option value="黑糖">黑糖</option><option value="培根">培根</option></select><fieldset data-role="controlgroup"><!--数量范围滑竿--><br>订购数量:<input type="range" name="num" id="num2" value="1" min="0" max="100" data-highlight="true" /><!--订购按钮--><br><input type="button" id="addToStorage2" value="确定" /></fieldset></p></div><!-- jiesu --></li><li> <a href="#buy3" data-rel="popup"> <img src="img/ht.jpg" /><h3>黑糖面包<span id="sp3" class="ui-li-count"></span></h3><p>精选黑糖，烧至糖汁，涂至面包外层，冷凝成黑糖层，口味极佳，一致好评</p></a><div data-role="popup" id="buy3" class="ui-content"><a id="a3" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a><p><p><img src="img/ht.jpg" /></p><p class="cont">精选黑糖，烧至糖汁，涂至面包外层，冷凝成黑糖层，口味极佳，一致好评</p><br>选择包装种类：<select name="selectitem" id="selectitem3"><option value="塑料袋装盒">塑料袋装盒</option><option value="纸片装盒">纸片装盒</option><option value="锡纸装盒">锡纸装盒</option></select><!--选择口味-->选择口味：<select name="selectflavour" id="selectflavour3"><option value="奶油味">奶油味</option><option value="全麦">全麦</option><option value="黑糖">黑糖</option><option value="培根">培根</option></select><fieldset data-role="controlgroup"><!--数量范围滑竿--><br>订购数量:<input type="range" name="num" id="num3" value="1" min="0" max="100" data-highlight="true" /><!--订购按钮--><br><input type="button" id="addToStorage3" value="确定" /></fieldset></p></div><!-- jiesu --></li><li> <a href="#buy4" data-rel="popup"> <img src="img/qm.jpg" /><h3>全麦面包<span id="sp4" class="ui-li-count"></span></h3><p>全麦面包纯手工制作，天然不含任何添加物</p></a><div data-role="popup" id="buy4" class="ui-content"><a id="a4" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a><p><p><img src="img/qm.jpg" /></p><p class="cont">全麦面包纯手工制作，天然不含任何添加物</p><br>选择包装种类：<select name="selectitem" id="selectitem4"><option value="塑料袋装盒">塑料袋装盒</option><option value="纸片装盒">纸片装盒</option><option value="锡纸装盒">锡纸装盒</option></select><!--选择口味-->选择口味：<select name="selectflavour" id="selectflavour4"><option value="奶油味">奶油味</option><option value="全麦">全麦</option><option value="黑糖">黑糖</option><option value="培根">培根</option></select><fieldset data-role="controlgroup"><!--数量范围滑竿--><br>订购数量:<input type="range" name="num" id="num4" value="1" min="0" max="100" data-highlight="true" /><!--订购按钮--><br><input type="button" id="addToStorage4" value="确定" /></fieldset></p></div></li></ul></div></div></body>
</html>info.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分店信息</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
img {width: 100%;
}
</style>
</head>
<body>
<div data-role="header"> <a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">主页</a>
<h1>分店信息</h1>
</div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li> <a href="#shop1" data-rel="popup" class="ui-btn ui-icon-arrow-r ui-btn-icon-right"> <img src="img/fd1.jpg" />
<h3>思明区分店</h3>
<p>外送专线：010-1234321</p>
</a>
<div data-role="popup" id="shop1" class="ui-content">
<h2 align="center">思明区分店</h2>
<img src="img/fd1.jpg">
<h4>联系电话：15895364815</h4>
<h4>详细地址：福建省厦门市思明区厦禾路860号华普大厦2层 </h4>
</div>
</li>
<li> <a href="#shop2" data-rel="popup" class="ui-btn ui-icon-arrow-r ui-btn-icon-right"> <img src="img/fd2.jpg"/>
<h3>集美区分店</h3>
<p>外送专线：010-1357956</p>
</a>
<div data-role="popup" id="shop2" class="ui-content">
<h2 align="center">集美区分店</h2>
<img src="img/fd2.jpg">
<h4>联系电话：15163864715</h4>
<h4>详细地址：厦门市集美区银江路137号万达广场F1 </h4>
</div>
</li>
<li> <a href="#shop3" data-rel="popup" class="ui-btn ui-icon-arrow-r ui-btn-icon-right"> <img src="img/fd3.jpg" />
<h3>湖里区分店</h3>
<p>外送专线：010-4321777</p>
</a>
<div data-role="popup" id="shop3" class="ui-content">
<h2 align="center">湖里区分店</h2>
<img src="img/fd3.jpg">
<h4>联系电话：17606184179</h4>
<h4>详细地址：福建省厦门市湖里区安兜社349号101 </h4>
</div>
</li>
<li> <a href="#shop4" data-rel="popup" class="ui-btn ui-icon-arrow-r ui-btn-icon-right"> <img src="img/fd4.jpg"/>
<h3>翔安区分店</h3>
<p>外送专线：010-4123142</p>
</a>
<div data-role="popup" id="shop4" class="ui-content">
<h2 align="center">翔安区分店</h2>
<img src="img/fd4.jpg">
<h4>联系电话：17605188146</h4>
<h4>详细地址：福建省厦门市翔安区锦江之星(厦门翔安马巷店)北60米</h4>
</div>
</li>
</ul>
</body>
</html>jiameng.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>加盟热线</title>
</head>
<body><div data-role="page"><div data-role="header" data-position="fixed"><a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">主页</a><h1>联系方式</h1></div><div data-role="main" class="ui-content"><ul data-role="listview" data-inset="true"><li><img src="img/jiameng1.jpg" id="jiameng"></li><li>联系人：朱先生</li><li>QQ：520131499</li><li>加盟热线：12345678911</li> <li>备用电话：11125052544</li></ul></div></div></body>
</html>pay.html
<!doctype html>
<html><head><meta charset="utf-8"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">img {width:100%;}.cont {width:100%;}</style><script>$(function(){$("a").click(function(){localStorage.pay=1;alert("支付成功");});});</script><title>支付</title></head><body><div data-role="page" data-title="支付" id="first" data-theme="a"><div data-role="header" data-position="fixed"><a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">完成支付</a><h1>支付</h1></div><div data-role="content" id="content"><img src="img/zhifu.jpg" /></div></div></body></html>H5 移动APP - 面包店相关推荐
- H5 唤起 APP的解决方案
H5 唤起 APP的解决方案 参考文章: (1)H5 唤起 APP的解决方案 (2)https://www.cnblogs.com/yzhihao/p/8989195.html 备忘一下.
- H5网页App和纯原生的App差距在哪？
1.动画 动画有很多种,比如侧边栏菜单的滑入滑出.元素的响应动画.页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的性能.一般这些的话有几种不同的选择:css3动画.javasc ...
- H5唤醒app，不完全兼容
---ps---最近新发现一个开源的H5唤醒app的库:建议使用第三方开源库https://github.com/suanmei/callapp-lib实现:或者极光魔链(后期可能会收费)https: ...
- 微信不再提供小程序打开App？借助H5为App引流的方式你必须知道！
简介: 2021年5月14日App开发者领域发布了一条重要消息:微信开放平台为了提升用户体验,将于2021年5月20日(后来延期到2021年5月27日)起不再提供"小程序打开App技术服务& ...
- h5封装去底部_Appium—Native+H5混合APP的自动化
前言 小编所在项目的客户端是比较奇怪的一个APP,大部分页面Android和iOS的客户端只提供了webview的功能,都是由H5处理业务逻辑和用户交互.H5承担了和服务端.和客户端的交互. 虽然在开 ...
- h5做app和原生app有什么区别
H5开发的web APP和原生APP的区别有以下几个方面: 一.开发方面 原生App ⊙ 每一种移动操作系统都需要独立的开发项目 ⊙ 每种平台都需要独立的开发语言.Java(Android), Obj ...
- H5唤起APP进行分享的尝试
H5唤起APP进行分享 最近很久没有写blog和note,倒是过家家的开发日志简单草草写了一点.这次记录下这个学习过程 由来 我们的 "通达有你",web h5页面的分享功能体验太 ...
- H5的APP逆向方法
注:小肩膀新课程<安卓逆向百例>,讲解一百个APP的实战,1999￥. 现在的app开发有很多框架,不再是单纯的Java和so了.不同框架开发的app,有不同的逆向方法. 1. 常见的Ja ...
- uniapp解决H5唤醒APP
H5唤醒APP 解决H5唤醒指定APP 设置schemes - Android 打开项目manifest.json文件源码视图 在manifest.json文件的"app-plus" ...
最新文章
- bzoj 2435: [Noi2011]道路修建【树形dp】
- 关于OSPF用反掩码
- 抽屉之Tornado实战（5）--点赞与评论树
- 属于自己的MES（二）必备的主数据
- mysql事务隔离的锁_mysql锁及四种事务隔离级别笔记
- 数字孪生可视化开发技术（ThingJS）学习笔记
- 单变量微积分笔记——无穷级数，泰勒展开及欧拉公式的证明
- 数学建模常用算法案例k—means聚类分析
- excel中vlookup函数的使用方法_Excel教程：函数VLOOKUP实用技巧
- java破解WIFI
- rk3588 驱动调试记录
- 大江大河——通信设备商们的2019年
- linux给PATH添加变量,给PATH变量添加路径--用Enki学Linux系列（6）
- Web前端教程学习笔记1.2-2022.10.17始
- Python+pytest+requests 自动化测试框架
- 【ECharts】 # ECharts入门学习
- KruskalAlgorithm(克鲁斯卡尔算法)
- BUG越改越多？微信团队用自动化测试化险为夷
- Vue前后端分离的电商后台管理系统项目的概述
- 实战】-内容项目实战