g***@sina.com
g***@sina.com
  • 发布:2019-07-26 14:30
  • 更新:2019-12-04 10:43
  • 阅读:3273

基于mui+vue框架的跨平台客户端app---购物商城

分类:MUI
Vue

涉及到知识点:

  • vue.js
  • 首页底部Tab
  • banner广告
  • 沉浸式状态栏
  • 分类顶部切换的slider
  • 图片预览并保存到相册
  • 拍照、扫码、选择本地文件
  • 侧滑栏
  • 搜索列表页两层侧滑栏筛选
  • 上拉刷新下拉加载
  • 登录、退出逻辑处理

主要功能点:
首页商品展示,商品分类,搜索列表,商品详情,购物车,下订单,个人中心,我的订单/退单,收货地址管理

示例图片

常见问题

  • 首页底部的Tab
    html页面
<nav class="mui-bar mui-bar-tab footerBar">  
	<a id="defaultTab" class="mui-tab-item ft-tab-item mui-active" href="home.html">  
		<span class=" mui-icon iconfont icon-m-ao"></span>  
		<span class="mui-tab-label">首页</span>  
	</a>  
	<a id="tab1" class="mui-tab-item ft-tab-item" href="classify.html">  
		<span class="mui-icon iconfont icon-m-am"></span>  
		<span class="mui-tab-label">分类</span>  
	</a>  
	<a id="tab2" class="mui-tab-item ft-tab-item" href="cart.html">  
		<span class="mui-icon iconfont icon-m-y"></span>  
		<span class="mui-tab-label">购物车</span>  
	</a>  
	<a id="tab3" class="mui-tab-item ft-tab-item" href="my.html">  
		<span class="mui-icon iconfont icon-m-aq"></span>  
		<span class="mui-tab-label">我的</span>  
	</a>  
</nav>

js代码

//底部选项卡切换跳转  
(function jumpPage() {  
	//跳转页面  
	var subpages = ['view/home/home.html', 'view/home/classify.html', 'view/home/cart.html', 'view/home/my.html'];  
	var ids = ['home.html', 'classify.html', 'cart.html', 'my.html'];  
	var aniShow = {};  
	//创建子页面,首个选项卡页面显示,其它均隐藏;  
	mui.plusReady(function() {  
		plus.screen.lockOrientation("portrait-primary");   
		var subpage_style = {  
			top: '0px',  
			bottom: '51px'  
		};  
		//设置bottom绝对位置  
		//iphoneX中出现遮挡底部tab现象,采用js判断屏幕大小方式改变bottom值  
		//isIPhoneX() 要在plusReady后调用  
		if (isIPhoneX()) {  
			subpage_style = {  
				top: '0px',  
				bottom: '88px', //34px  
				styles: {  
					"render": "always",  
				}  
			};  
		}  
		var self = plus.webview.currentWebview();  
		for (var i = 0; i < 4; i++) {  
			var temp = {};  
			var sub = plus.webview.create(subpages[i], ids[i], subpage_style);  
			if (i > 0) {  
				sub.hide();  
			} else {  
				temp[ids[i]] = "true";  
				mui.extend(aniShow, temp);  
			}  
			self.append(sub);  
		}  
	});  
	//当前激活选项  
	var activeTab = ids[0];  
  
	//选项卡点击事件  
	mui('.mui-bar-tab').on('tap', 'a', function(e) {  
		e.preventDefault();  
		var targetTab = this.getAttribute('href');  
		if (targetTab == activeTab) {  
			return;  
		}  
		//显示目标选项卡  
		//若为iOS平台或非首次显示,则直接显示  
		if (mui.os.ios || aniShow[targetTab]) {  
			plus.webview.show(targetTab);  
		} else {  
			//否则,使用fade-in动画,且保存变量  
			var temp = {};  
			temp[targetTab] = "true";  
			mui.extend(aniShow, temp);  
			plus.webview.show(targetTab, "fade-in", 300);  
		}  
		//隐藏当前;  
		plus.webview.hide(activeTab);  
		//更改当前活跃的选项卡  
		activeTab = targetTab;  
	});  
})()  

注意iphoneX中出现遮挡底部tab现象,采用js判断屏幕大小方式改变bottom值,isIPhoneX(),isIPhoneX() 要在plusReady后调用。

  • 沉浸式状态栏

1.在manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true

"statusbar" : {  
	"immersed" : true  
},

2.设置了沉浸式状态栏后,状态栏的高度变为0,如图所示
https://github.com/gs-wenbing/mui-mall/blob/master/img/show/status1.jpg
输入框把状态挡住了,这时候需要重写mui.css或者mui.min.css样式表,在样式表底部添加如下一段样式

*解决沉寖式状态栏导致导航栏高度少20px的问题*/  
.mui-bar-nav {  
    height: 64px;  
    padding-top: 22px;  
}  
  
.mui-bar-nav ~ .mui-content  
{  
    padding-top: 64px;  
}  
  
.mui-bar-nav ~ .mui-content .mui-pull-top-pocket  
{  
    top: 64px;  
}  
  
.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical  
{  
    top: 64px;  
}  
  
.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen  
{  
    top: 64px;  
}

显示效果如图
https://github.com/gs-wenbing/mui-mall/blob/master/img/show/status2.jpg
注意:以上操作后Android沉浸式状态就完成了,但是IOS还需在distribute节点下的apple节点下添加

"UIReserveStatusbarOffset" : false

本以为沉浸式状态栏就完成了,结果老板iPhoneX手机显示有问题,于是又单独适配iPhoneX,具体操作:
在mui.js或者mui.min.js中底部添加如下一段代码

/**  
 * 适配iPhone X 系列手机的导航栏(包括状态栏)  
 */  
mui.plusReady(function(){  
    if(plus.navigator.isImmersedStatusbar() && isIPhoneX()){  
        //.mui-bar-nav  
        var nav = document.querySelector(".mui-bar-nav");  
        if(nav){  
            nav.style.cssText="height:88px; padding-top: 44px;";  
        } else {  
            return;  
        }  
        //.mui-bar-nav ~ .mui-content  
        var content = document.querySelector(".mui-content");  
        if (content) {  
            content.style.paddingTop = "88px";  
        } else {  
            return;  
        }  
        //.mui-bar-nav ~ .mui-content .mui-pull-top-pocket  
        var pullTopPocket_Arr = content.querySelectorAll(".mui-pull-top-pocket");  
        if (pullTopPocket_Arr) {  
            pullTopPocket_Arr.forEach(function(value){  
                value.style.top = "88px";  
            });  
        }  
        //.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical  
        var scrollbarVertical = document.querySelector(".mui-content.mui-scroll-wrapper .mui-scrollbar-vertical");  
        if (scrollbarVertical) {  
            scrollbarVertical.style.top = "88px";  
        }  
        //.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen  
        var slider_fullscreen_Arr = content.querySelectorAll(".mui-content .mui-slider.mui-fullscreen");  
        if (slider_fullscreen_Arr) {  
            slider_fullscreen_Arr.forEach(function(value){  
                value.style.top = "88px";  
            });  
        }  
    }  
});  
  
/**  
 * 判断是否为iPhone X 系列机型  
 */  
function isIPhoneX(){  
    if(plus.device.model.indexOf('iPhone') > -1 && screen.height >= 812){  
        return true;  
    }else{  
        return false;  
    }  
}
  • 标题栏在IOS上存在的问题
    原生标题栏
var styles = { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
	titleNView: { // 窗口的标题栏控件  
		titleText: title, // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
		titleColor: "#FFFFFF", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
		backgroundColor: "#E60012", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
		autoBackButton: true  
	}  
}  
plus.webview.create(url, id, styles, extras);

1.mui原生标题栏,假如titleColor的值为小写(#ffffff)的话,在IOS上不显示标题,必须要大写(#FFFFFF)才显示,亲测<br>
2.非原生标题栏,假如页面中有输入框的话,软键盘弹出,IOS上会把标题栏顶上去,因为ios弹出软键盘的时候,webview的高度没有变化导致超出屏幕范围,
而plus这时候又会自动把header的 position:fixed 属性设置为 position:relative,header就跟着滚动了。在mui社区找到一个的解决方案:

http://ask.dcloud.net.cn/question/10629

plus.webview.currentWebview().setStyle({    
    softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度    
});   
  
html, body {    
    height: 100%;    
    margin: 0px;    
    padding: 0px;    
    overflow: hidden;    
    -webkit-touch-callout: none;    
    -webkit-user-select: none;    
}    
  
.mui-content {    
    height: 100%;    
    overflow: auto;     
}   

这样会解决IOS标题栏顶上去的问题,但是这样处理后,页面打开标题栏会有抖动,虽然很短暂,但是看着不爽,有更好的方案可以联系我(QQ742330561)

具体的demo地址: https://github.com/gs-wenbing/mui-mall
如果对您有帮助,您可以"Star" 支持一下 谢谢! ^^

1 关注 分享
1***@qq.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

6666
2019-12-04 10:43