结合以前的知识点，做一个商城App的几个页面。
开发工具：Hbuilder，前端框架：mui，类型：混合开发App.
1. 商城app效果图：
商城首页
商城分类页
商品详情页
商品兑换页
2. 代码部分
2.1 商城首页shop.html，部分代码说明：
页面布局：
<!DOCTYPE html>
<html>
<body class="white">
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="box">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav header_q">
<span class="mui-pull-right sousuoab"><a data-href="searchproduct.html" id="sousuo"><i class="iconfont icon-sousuo sousuo"></i></a></span>
<h1 class="mui-title">积分商城</h1>
</header>
<!-- 主页面内容容器 -->
<div class="mui-scroll mui-scroll2">
<div class="banner-1">
<img src="img/tu1.jpg">
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9" id="ul2">
<li id="more" class="mui-table-view-cell mui-table-view-cell-2 mui-media mui-col-xs-4 mui-col-sm-3">
<a data-id="">
<div class="beijing beijingq beijing9"><i class="iconfont icon-gengduo"></i></div>
<div class="mui-media-body mui-media-bodym">更多</div>
</a>
</li>
</ul>
<div class="mui-slider-item mui-slider-item2">
<div class="remen remen5">
<div class="remen2"></div>
<h4>热门推荐</h4>
</div>
<ul class="mui-table-view mui-grid-view jiahengx" id="ul3">
</ul>
</div>
</div>
</div>
</body>
</html>函数定义：
<script>
var detailPage = null; //商品详情页面
mui.init(); //mui初始化
//mui加载完毕事件
mui.plusReady(function(){
//预加载产品详情页面
if(!detailPage){
detailPage = mui.preload({
url:'productdetail.html',
id:'productdetail.html'
});
}
//点击header回到顶部
document.querySelector('header').addEventListener('tap',function () {
window.scroll(0, 0);
});
console.log("shop.html加载完毕");
});
//自定义的刷新事件
window.addEventListener("refreshShop",function(event){
//产品分类列表
getClassification();
//获取推荐商品
getRecommand();
});
//bind:绑定商品分类点击事件
mui("#ul2").on('tap','a',function(){
//获取商品分类id
var id = this.getAttribute("data-id");
//直接打开产品分类页面
mui.openWindow({
url:'products.html',
id:'products.html',
extras:{
pid:id
}
});
});
//function:获取推荐商品
function getRecommand(){
$("#ul3").empty();
mui.post(shoprecommandURL,{},function(data){
if(data.success){
//依次放入推荐商品
$.each(data.list,function(i,v){
var li ='<li class="mui-table-view-cell mui-media mui-col-xs-6" data-id="'+v.id+'">xxxx</li>';
$("#ul3").append(li);
});
//推荐商品的点击事件
mui("#ul3").on('tap','li',function(){
//获取商品id
var id = this.getAttribute("data-id");
//触发详情页自定义事件
mui.fire(detailPage,'productInfo',{id:id});
//打开详情页面
mui.openWindow({
id:"productdetail.html"
});
});
}
},'json');
}
</script>懂Html就能开发App，博文持续更新，博主QQ:260737830！