當(dāng)前位置：首頁(yè) > 运维知识 > Android >内容正文

Android

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

發(fā)布時(shí)間：2024/3/12 Android 52 豆豆

生活随笔收集整理的這篇文章主要介紹了连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

此文轉(zhuǎn)載自：https://blog.csdn.net/hanhanwanghaha/article/details/110094728

這篇發(fā)得有點(diǎn)晚了，實(shí)屬罪過！
以前高中月考的時(shí)候有幸進(jìn)了一個(gè)學(xué)霸班坐了一個(gè)學(xué)霸的座位(應(yīng)該是一位女學(xué)霸，桌子上面寫著：如果不是因?yàn)樯鷼舛鴮⑹虑樽兊酶訃?yán)重，那么事情也不是那么的大了)
希望自己可以心情變得好起來(lái)。
這幾天的牢騷發(fā)完了，接下來(lái)說(shuō)點(diǎn)有用的

第一部分：混合式開發(fā)(一)

第二部分：混合式開發(fā)(二)

第三部分：混合式開發(fā)(三)

一、完善登錄頁(yè)面的功能

添加注冊(cè)賬號(hào)和忘記密碼
login.html

這里有個(gè)點(diǎn)需要注意一下的是
將http://192.168.43.242:8080/SweetyManage/JavaApi存儲(chǔ)到requrl中，

后面的reg.html和proview.html等都可直接調(diào)用localStorage中的requrl

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

ememememem…
忘記密碼這塊我后面再做哈哈哈

二、商品列表

2.1之前的前端代碼

prolist.html

這是我手動(dòng)加進(jìn)去的靜態(tài)的前端哈哈哈

下面這個(gè)是我通過 js 從后端拿過來(lái)的

2.2通過js從后端拿到的數(shù)據(jù)

prolist.html

記得在第75行改路徑奧~

得到的效果就是這樣子的

這涉及到后端的東西，之后我會(huì)把后端的代碼更新上傳，最后項(xiàng)目完成的時(shí)候再全部更新上傳！
這是前幾天添加的一些商品，看起來(lái)好好吃哈哈，不過網(wǎng)頁(yè)版看起來(lái)有點(diǎn)模糊，在移動(dòng)端還是可好看啦

三、商品明細(xì)

在商品列表中隨便點(diǎn)擊一個(gè)商品，就可以看見關(guān)于它的詳細(xì)信息。
新建一個(gè)proview.html代表商品明細(xì)

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">商品明細(xì)</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; ">加入購(gòu)物車</button></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.plusReady(function(){var self = plus.webview.currentWebview();//獲取到當(dāng)前的webview.也就是獲取到當(dāng)前頁(yè)面對(duì)象.var proid = self.proid;console.log(proid);var requrl=localStorage.getItem("requrl");mui.ajax(requrl,{data:{rnum:"4",id:proid},dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請(qǐng)求類型timeout:10000,//超時(shí)時(shí)間設(shè)置為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',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請(qǐng)求類型timeout:10000,//超時(shí)時(shí)間設(shè)置為10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){mui.back();}});});});</script></body></html>

記得在第54行改路徑奧~

比如說(shuō)我現(xiàn)在點(diǎn)擊甜甜圈，立馬就會(huì)跳轉(zhuǎn)

這邊有點(diǎn)牛逼的是，我百度復(fù)制的超鏈接也有作用(哈哈哈哈哈，就連我自己都有點(diǎn)驚訝呢！)，點(diǎn)擊商品的進(jìn)入商品明細(xì)，點(diǎn)擊藍(lán)色的字體的時(shí)候，就可以進(jìn)入百度頁(yè)面。

四、加入購(gòu)物車

好了，重點(diǎn)壓軸出場(chǎng)了

<!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;">總價(jià)：<span id="pricebox"></span></p></div><button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="gotoprolist">繼續(xù)購(gòu)物</button><button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="gotopay">去結(jié)算</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">確認(rèn)下單</button></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.ready(function(){cardatainit();});//初始化購(gòu)物車?yán)锩娴臄?shù)據(jù)function cardatainit(){//查詢當(dāng)前登錄app的用戶在購(gòu)物車中加入的商品。把查詢出來(lái)的數(shù)據(jù)綁定到ul中。//需要的參數(shù)：useridvar requrl=localStorage.getItem("requrl");var userid=localStorage.getItem("id");/*<li><img src="img/gou.png" class="propic"/><p style="padding-top: 15px;">華為5G手機(jī)</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',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請(qǐng)求類型timeout:10000,//超時(shí)時(shí)間設(shè)置為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);// 單價(jià)*數(shù)量=小計(jì) 然后通過累加把所有商品的價(jià)格累加起來(lái) 保存在sumprice中。這里要注意，計(jì)算價(jià)格之前，要把單價(jià)和數(shù)量都轉(zhuǎn)為數(shù)字。}document.getElementById("pricebox").innerText=sumprice;document.getElementById("itembox").innerHTML=htmlstr;}}); }//通過委托的方式給增加按鈕綁定點(diǎn)擊事件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;//獲取該商品原來(lái)在購(gòu)物車中的數(shù)量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',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請(qǐng)求類型timeout:10000,//超時(shí)時(shí)間設(shè)置為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;//獲取該商品原來(lái)在購(gòu)物車中的數(shù)量v=parseInt(v);v=v-1;var requrl=localStorage.getItem("requrl");if(v<1){//如果購(gòu)物車?yán)锩嫔唐返臄?shù)量小于1,就需要?jiǎng)h除該商品mui.ajax(requrl,{data:{rnum:"7",userid:userid,id:proid},dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請(qǐng)求類型timeout:10000,//超時(shí)時(shí)間設(shè)置為10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){if(data.msg=="ok"){mui.toast("刪除成功!");}cardatainit();}}); }else{//如果商品的數(shù)量不小于1，只需要將該商品的數(shù)量減少1就可以了。mui.ajax(requrl,{data:{rnum:"8",userid:userid,id:proid,countvalue:v},dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請(qǐng)求類型timeout:10000,//超時(shí)時(shí)間設(shè)置為10秒；headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){cardatainit();}}); }});//點(diǎn)擊去結(jié)算按鈕document.getElementById("gotopay").addEventListener("tap",function(){document.getElementById("userinfobox").className="show";});//點(diǎn)擊繼續(xù)購(gòu)物按鈕document.getElementById("gotoprolist").addEventListener("tap",function(){var main=plus.webview.getWebviewById("main.html");mui.fire(main,'goprolist'); });</script></body></html>

看代碼是可以理解的，這邊需要注意的一下是132行的代碼

這邊點(diǎn)擊+就會(huì)添加數(shù)量，反之價(jià)格會(huì)減少，如果以及－到0了，就直接刪除這個(gè)商品
還有一個(gè)計(jì)算訂單的總價(jià)格
見圖

頁(yè)面暫時(shí)有點(diǎn)小丑，待會(huì)過段時(shí)間優(yōu)化一下！
哈哈哈

https://blog.csdn.net/hanhanwanghaha歡迎關(guān)注這個(gè)超級(jí)無(wú)敵可愛的人鴨，有什么問題留言私信皆可，看見必回！
創(chuàng)作不易，如有轉(zhuǎn)載，請(qǐng)注明出處

希望你我可以一直走在夢(mèng)想的路上，即使身在低谷，也不忘前行

總結(jié)

以上是生活随笔為你收集整理的连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： cacheput注解用法_以注解的方式
下一篇： Android定位方式和测试方法,定位方