连接真机开发安卓(Android)移动app MUI框架 添加购物车等——混合式开发（四）...
生活随笔
收集整理的這篇文章主要介紹了
连接真机开发安卓(Android)移动app MUI框架 添加购物车等——混合式开发（四）...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
此文轉載自：https://blog.csdn.net/hanhanwanghaha/article/details/110094728
下面這個是我通過 js 從后端拿過來的
這涉及到后端的東西，之后我會把后端的代碼更新上傳，最后項目完成的時候再全部更新上傳！
這是前幾天添加的一些商品，看起來好好吃哈哈，不過網頁版看起來有點模糊，在移動端還是可好看啦
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>
這邊有點牛逼的是，我百度復制的超鏈接也有作用(哈哈哈哈哈，就連我自己都有點驚訝呢！)，點擊商品的進入商品明細，點擊藍色的字體的時候，就可以進入百度頁面。
頁面暫時有點小丑，待會過段時間優化一下！
哈哈哈
這篇發得有點晚了，實屬罪過！
以前高中月考的時候有幸進了一個學霸班坐了一個學霸的座位(應該是一位女學霸，桌子上面寫著：如果不是因為生氣而將事情變得更加嚴重，那么事情也不是那么的大了)
希望自己可以心情變得好起來。
這幾天的牢騷發完了，接下來說點有用的
第一部分：混合式開發(一)
第二部分：混合式開發(二)
第三部分：混合式開發(三)
目錄
- 一、完善登錄頁面的功能
- 二、商品列表
- 2.1之前的前端代碼
- 2.2通過js從后端拿到的數據
- 三、商品明細
- 四、加入購物車
一、完善登錄頁面的功能
添加注冊賬號和忘記密碼
login.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 從后端拿過來的
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行改路徑奧~
比如說我現在點擊甜甜圈，立馬就會跳轉
這邊有點牛逼的是，我百度復制的超鏈接也有作用(哈哈哈哈哈，就連我自己都有點驚訝呢！)，點擊商品的進入商品明細，點擊藍色的字體的時候，就可以進入百度頁面。
四、加入購物車
好了，重點壓軸出場了
<!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框架 添加购物车等——混合式开发（四）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cacheput注解 用法_以注解的方式
- 下一篇： Android定位方式和测试方法,定位方