這篇發得有點晚了，實屬罪過！
以前高中月考的時候有幸進了一個學霸班坐了一個學霸的座位（應該是一位女學霸，桌子上面寫著：如果不是因為生氣而將事情變得更加嚴重，那么事情也不是那么的大了）
希望自己可以心情變得好起來。
這幾天的牢騷發完了，接下來說點有用的
第一部分：混合式開發（一）
第二部分：混合式開發（二）
第三部分：混合式開發（三）
目錄
- 一、完善登錄頁面的功能
- 二、商品列表
- 2.1之前的前端代碼
- 2.2通過js從后端拿到的數據
- 三、商品明細
- 四、加入購物車
一、完善登錄頁面的功能
添加注冊賬號和忘記密碼
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',type:'post',timeout:10000,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"); console.log(requrl);mui.ajax(requrl,{data:{rnum:"3"},dataType:'json',type:'post',timeout:10000,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+='</div>';}itembox.innerHTML=itemlisthtml;}});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();var proid = self.proid;console.log(proid);var requrl=localStorage.getItem("requrl");mui.ajax(requrl,{data:{rnum:"4",id:proid},dataType:'json',type:'post',timeout:10000,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',type:'post',timeout:10000,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"></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(){var requrl=localStorage.getItem("requrl");var userid=localStorage.getItem("id");mui.ajax(requrl,{data:{rnum:"6",userid:userid },dataType:'json',type:'post',timeout:10000,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);}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',type:'post',timeout:10000,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){mui.ajax(requrl,{data:{rnum:"7",userid:userid,id:proid},dataType:'json',type:'post',timeout:10000,headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){if(data.msg=="ok"){mui.toast("刪除成功!");}cardatainit();}}); }else{mui.ajax(requrl,{data:{rnum:"8",userid:userid,id:proid,countvalue:v},dataType:'json',type:'post',timeout:10000,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框架 添加购物车等——混合式开发（四）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
