这篇发得有点晚了，实属罪过！
以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位（应该是一位女学霸，桌子上面写着：如果不是因为生气而将事情变得更加严重，那么事情也不是那么的大了）
希望自己可以心情变得好起来。
这几天的牢骚发完了，接下来说点有用的

第一部分：混合式开发（一）

第二部分：混合式开发（二）

第三部分：混合式开发（三）

一、完善登录页面的功能

添加注册账号和忘记密码
login.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css"></style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">登录</h1></header><div class="mui-content"><form class="mui-input-group"><div class="mui-input-row"><label>用户名</label><input type="text"  id="tbnusername" class="mui-input-clear" value="杰子" placeholder="用户名"></div><div class="mui-input-row"><label>密码</label><input type="text" id="tbnpassword" class="mui-input-clear" value="123" placeholder="密码"></div><div class="mui-input-row"><input value="登录" type="button"  class="mui-btn-block"  id="btnlogin"  /></div><div style="height: 50px; text-align: center; line-height: 50px;"><span id="btnreg">注册账号</span>|<span id="">忘记密码</span></div></form></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();document.getElementById("btnreg").addEventListener("tap",function(){console.log(11);mui.openWindow({url:"reg.html",id:"reg.html"});});document.getElementById("btnlogin").addEventListener("tap",function(){var vusername=document.getElementById("tbnusername").value;var vpassword=document.getElementById("tbnpassword").value;               var requrl="http://192.168.43.242:8080/SweetyManage/JavaApi";localStorage.setItem("requrl",requrl);mui.ajax(requrl,{data:{rnum:"2",username:vusername,password:vpassword},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){console.log(JSON.stringify(data));if(data==null||data==""){mui.toast("用户名或者密码错误!");}else{console.log(data[0].id);mui.toast("登录成功!");localStorage.setItem("id",data[0].id);mui.openWindow({url:"main.html",id:"main"});} }});});</script></body></html>

这里有个点需要注意一下的是
将http://192.168.43.242:8080/SweetyManage/JavaApi存储到requrl中，

后面的reg.html和proview.html等都可直接调用localStorage中的requrl

var requrl="http://192.168.43.242:8080/SweetyManage/JavaApi";
localStorage.setItem("requrl",requrl);

ememememem…
忘记密码这块我后面再做哈哈哈

二、商品列表

2.1之前的前端代码

prolist.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css">.item{width: calc(50% - 12px);height: 280px;border: 1px solid #CCCCCC;float: left;margin-top: 10px;margin-left:10px;border-radius: 5px;}.item img{width: 100%;height: 200px;}.item p{line-height: 10px;text-align: center;}</style></head><body><div class="mui-content"><div class="mui-scroll-wrapper"><div class="mui-scroll"><div class="photobox"><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div></div></div></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()</script></body></html>

这是我手动加进去的静态的前端哈哈哈

下面这个是我通过 js 从后端拿过来的

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

2.2通过js从后端拿到的数据

prolist.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css">.item{width:calc(50% - 12px);height: 260px;border: solid 1px #ccc;float:left;margin-top: 10px;margin-left:10px;border-radius: 5px;}.item img{width: 100%;height: 200px;}.item p{line-height:10px;text-align: center;}</style></head><body><div class="mui-content"><div class="mui-scroll-wrapper"><div class="mui-scroll"><div class="probox" id="itembox"></div></div></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui('.mui-scroll-wrapper').scroll({indicators: false, //是否显示滚动条deceleration:0.00006, //阻尼系数,系数越小滑动越灵敏bounce: true //是否启用回弹});mui.ready(function(){//页面加载完毕之后执行此处的代码var requrl=localStorage.getItem("requrl"); //从localStorage中获取接口地址console.log(requrl);mui.ajax(requrl,{data:{rnum:"3"},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){var itembox = document.getElementById("itembox");console.log(JSON.stringify(data));var itemlisthtml="";for(var i=0;i<data.length;i++){itemlisthtml+='<div class="item"  id="'+data[i].id+'">';itemlisthtml+='<p><img src="http://192.168.43.242:8080/SweetyManage/upload/'+data[i].imgurl+'"/></p>';itemlisthtml+='<p>'+data[i].proname+'</p>';itemlisthtml+='<p>￥:'+data[i].price+'</p>'//itemlisthtml+='<p>'+data[i].brief+'</p>';简介itemlisthtml+='</div>';}itembox.innerHTML=itemlisthtml;/*<div class="item"><p><img src="img/g-1.png"/></p><p>华为p40</p><p>￥:5999.00</p><p>5G手机</p></div>* */}});mui("#itembox").on("tap","div.item",function(){var currentid=this.id;console.log(currentid);mui.openWindow({url:"proview.html",id:"proview.html",extras:{proid:currentid}});});});    </script></body></html>

记得在第75行改路径奥~

得到的效果就是这样子的

这涉及到后端的东西，之后我会把后端的代码更新上传，最后项目完成的时候再全部更新上传！
这是前几天添加的一些商品，看起来好好吃哈哈，不过网页版看起来有点模糊，在移动端还是可好看啦

三、商品明细

在商品列表中随便点击一个商品，就可以看见关于它的详细信息。
新建一个proview.html代表商品明细

proview.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css">.mui-content p{padding: 0 10px;}</style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">商品明细</h1></header><div class="mui-content"><p><img src=""  id="proimg" style="width: 50%;margin: 0 auto;display: block;margin-top: 20px;"/> </p><p id="p1"></p><p id="p2"></p><p id="p3"></p><p id="p4"></p><p id="p5"></p><button type="button" class="mui-btn" id="btnaddtocar" style="margin: 0 auto;display: block; ">加入购物车</button></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.plusReady(function(){var self = plus.webview.currentWebview();//获取到当前的webview.也就是获取到当前页面对象.var proid = self.proid;console.log(proid);var requrl=localStorage.getItem("requrl");mui.ajax(requrl,{data:{rnum:"4",id:proid},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){console.log(JSON.stringify(data));var picimgurl="http://192.168.43.242:8080/SweetyManage/upload/"+data.imgurl;document.getElementById("proimg").src=picimgurl;document.getElementById("p1").innerText=data.proname;document.getElementById("p2").innerHTML=data.address;document.getElementById("p3").innerHTML=data.price;document.getElementById("p4").innerHTML=data.brief;document.getElementById("p5").innerHTML=data.descriptions;  }});document.getElementById("btnaddtocar").addEventListener("tap",function(){var userid=localStorage.getItem("id");mui.ajax(requrl,{data:{rnum:"5",userid:userid,proid:proid},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){mui.back();}});});});</script></body></html>

记得在第54行改路径奥~

比如说我现在点击甜甜圈，立马就会跳转

这边有点牛逼的是，我百度复制的超链接也有作用（哈哈哈哈哈，就连我自己都有点惊讶呢！），点击商品的进入商品明细，点击蓝色的字体的时候，就可以进入百度页面。

四、加入购物车

好了，重点压轴出场了
car.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css">#listbox{background-color: #fff;}#listbox ul{list-style: none;}#listbox ul li{height: 80px;border-bottom: solid 1px #eee;position: relative;}#listbox ul li img.propic{width:70px;height:70px;float: left;}#listbox ul li span{display: block;border: solid 1px #eee;width:28px;height:28px;text-align: center;line-height:28px;float: left;}.btnbox{width: 90px;height: 30px;position: absolute;right: 5px;top:20px;}.hidden{display: none;}.show{display: block;}</style></head><body><div class="mui-content"><div id="listbox"><ul id="itembox"><!--<li><img src="img/gou.png" class="propic"/><p style="padding-top: 15px;">华为5G手机</p><p>￥5888.00</p><div class="btnbox"><span>-</span><span>1</span><span>+</span></div></li>--></ul><p style="padding-left: 50px;padding-bottom: 20px;">总价：<span id="pricebox"></span></p></div><button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="gotoprolist">继续购物</button><button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="gotopay">去结算</button><div id="userinfobox" class="hidden"><form class="mui-input-group"><div class="mui-input-row"><label>收货人</label><input type="text" class="mui-input-clear" placeholder="收货人"></div><div class="mui-input-row"><label>电话</label><input type="text" class="mui-input-clear" placeholder="电话"></div><div class="mui-input-row"><label>地址</label><input type="text" class="mui-input-clear" placeholder="地址"></div></form><button type="button" class="mui-btn mui-btn-blue mui-btn-block">确认下单</button></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.ready(function(){cardatainit();});//初始化购物车里面的数据function cardatainit(){//查询当前登录app的用户在购物车中加入的商品。 把查询出来的数据绑定到ul中。//需要的参数：useridvar requrl=localStorage.getItem("requrl");var userid=localStorage.getItem("id");/*<li><img src="img/gou.png" class="propic"/><p style="padding-top: 15px;">华为5G手机</p><p>￥5888.00</p><div class="btnbox"><span>-</span><span>1</span><span>+</span></div></li>*/mui.ajax(requrl,{data:{rnum:"6",userid:userid                       },dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){console.log(JSON.stringify(data));var htmlstr="";var sumprice=0;for (var i=0;i<data.length;i++) {htmlstr+='<li>';htmlstr+='<img src="http://192.168.43.242:8080/SweetyManage/upload/'+data[i].imgurl+'" class="propic"/>';htmlstr+='<p style="padding-top: 15px;">'+data[i].proname+'</p>';htmlstr+='<p>￥'+data[i].price+'.00</p>';htmlstr+='<div class="btnbox" id="'+data[i].proid+'"><span class="btnjian">-</span><span class="numberbox">'+data[i].procount+'</span><span class="btnjia">+</span></div>';htmlstr+="</li>";sumprice +=parseInt(data[i].price)*parseInt(data[i].procount);//   单价*数量=小计  然后通过累加 把所有商品的价格累加起来 保存在sumprice中。 这里要注意，计算价格之前，要把单价和数量都转为数字。}document.getElementById("pricebox").innerText=sumprice;document.getElementById("itembox").innerHTML=htmlstr;}});               }//通过委托的方式给增加按钮绑定点击事件mui("#itembox").on("tap","span.btnjia",function(){var proid=this.parentNode.getAttribute("id");var userid=localStorage.getItem("id");var v=this.parentNode.querySelector(".numberbox").innerText;//获取该商品原来在购物车中的数量v=parseInt(v);v=v+1;var requrl=localStorage.getItem("requrl");mui.ajax(requrl,{data:{rnum:"8",userid:userid,id:proid,countvalue:v},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){cardatainit();}});      });mui("#itembox").on("tap","span.btnjian",function(){var proid=this.parentNode.getAttribute("id");var userid=localStorage.getItem("id");var v=this.parentNode.querySelector(".numberbox").innerText;//获取该商品原来在购物车中的数量v=parseInt(v);v=v-1;var requrl=localStorage.getItem("requrl");if(v<1){//如果购物车里面商品的数量小于1,就需要删除该商品mui.ajax(requrl,{data:{rnum:"7",userid:userid,id:proid},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){if(data.msg=="ok"){mui.toast("删除成功!");}cardatainit();}});       }else{//如果商品的数量不小于1，只需要将该商品的数量减少1就可以了。mui.ajax(requrl,{data:{rnum:"8",userid:userid,id:proid,countvalue:v},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){cardatainit();}});       }});//点击去结算按钮document.getElementById("gotopay").addEventListener("tap",function(){document.getElementById("userinfobox").className="show";});//点击继续购物按钮document.getElementById("gotoprolist").addEventListener("tap",function(){var main=plus.webview.getWebviewById("main.html");mui.fire(main,'goprolist'); });</script></body></html>

看代码是可以理解的，这边需要注意的一下是132行的代码

这边点击+就会添加数量，反之价格会减少，如果以及－到0了，就直接删除这个商品
还有一个计算订单的总价格
见图

页面暂时有点小丑，待会过段时间优化一下！
哈哈哈

https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭，有什么问题留言私信皆可，看见必回！
创作不易，如有转载，请注明出处

希望你我可以一直走在梦想的路上，即使身在低谷，也不忘前行

连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）相关推荐

连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）...
此文转载自:https://blog.csdn.net/hanhanwanghaha/article/details/110094728 这篇发得有点晚了,实属罪过! 以前高中月考的时候有幸进了一个学 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（一）（敲详细）
从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈).有想过用模拟器来运行的,但是模拟器太 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二）带你项目开发（最新版）
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
连接真机开发安卓(Android)移动app MUI框架反馈意见、忘记密码、登录、底部选项卡、联系我们、导航等页面代码可拿——混合式开发（六）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 开头先分享个有趣的 ...
APP自动化测试系列之adb连接真机和模拟器
VOL 160 21 2020-09 今天距2021年101天这是ITester软件测试小栈第160次推文点击上方蓝字"ITester软件测试小栈"关注我,每周一.三.五早上 ...
Android Studio下载、安装、配置及连接真机开发第一个App ——入门选手快进
最近的安卓测试给我心态搞蹦了,问也没人问,难受简直了!又是一轮自学之路(说实话这一路上教会我一个很大的道理就是一定要有愿意帮助你的老师,还有自己的自觉,一样也不能少.前者没有的话只能后者补了呜呜呜 ...
Windows 10 安装 Android Studio 安装创建APP 创建模拟器调试真机调试编译签名打包APP
要想使用Android Studio开发android APP,需要安装三个工具:JDK.Android Studio.Android SDK 先了解这三个工具是做什么的 JDK:JDK是Java语言 ...
iOS 11开发教程（九）iOS11数据线连接真机测试
iOS 11开发教程(九)iOS11数据线连接真机测试在Xcode 7.0之后,苹果公司在开发许可权限上做了很多的改变,在测试App方面取消了一些限制.在Xcode7.0之前的版本,苹果公司只向注册 ...

连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）

目录

一、完善登录页面的功能

二、商品列表

2.1之前的前端代码

2.2通过js从后端拿到的数据

三、商品明细

四、加入购物车

连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）相关推荐

最新文章

热门文章

连接真机开发安卓(Android)移动app MUI框架 添加购物车等——混合式开发（四）

目录

一、完善登录页面的功能

二、商品列表

2.1之前的前端代码

2.2通过js从后端拿到的数据

三、商品明细

四、加入购物车

连接真机开发安卓(Android)移动app MUI框架 添加购物车等——混合式开发（四）相关推荐

最新文章

热门文章

连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）

连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）相关推荐