YuLinNewsDemo: A JavaScript repository from zhupeiye

MUI尝过的坑和重要知识点总结

1：自带的各种标签的样式权重过高，重写不方便（和BootStrap比较来说，BootStrap更加灵活）
2：链接跳转。常规的a标签加href是无法跳转的，浏览器有效，但是在手机上运行是无效的需要添加mui的定义的点击事件。
分两种 (1)：页面已存在的跳转标签

   <script>
			document.getElementById('user-guide').addEventListener('tap', function() {
				//打开关于页面
				var newsid=$(this).find(".news-id").html();
				mui.openWindow({
					url: 'use-guide.html',
					id: 'use-guide'
				});
			});
		</script>

(2):页面不存在的跳转标签（还可以在链接跳转过程中添加传递的参数）

<script>
			mui("body").on('tap',"#detail-news", function() {
				//打开关于页面
				var newsid=$(this).find(".news-id").html();
				console.log("newsid");
				mui.openWindow({
					url: 'detail-news.html?'+newsid,
					id: 'detail-news'
				});
			});
		</script>

接受页面的处理：

var newsid = window.location.href.split('?')[1];

3：页面过长，滑动没有效果关键类：mui-scroll-wrapper 添加一个js就可以实现页面滑动

mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

4：第三方分享实现

在HBuilder中新创建新webapp项目勾选带登陆和设置的模板

里面包含第三方登陆
分享
图案锁屏
5：关于模态框模态框尽量放在根节点的子目录下（不要放在嵌套层），防止最外层的遮罩层的级别过高，覆盖模态框，导致点击事件无法触发响应
6:MUI修改手机物理back的方法首页的退出修改：

<script> 
		     document.addEventListener("plusready", function() { 
		         // 注册返回按键事件 
		         plus.key.addEventListener('backbutton', function() { 
		         // 事件处理 
		             plus.nativeUI.confirm("退出程序？", function(event) { 
		                 if (event.index) { 
		                     plus.runtime.quit(); 
		                 } 
		             }, null, ["取消", "确定"]); 
		         }, false); 
		     }); 
		 </script> 
		 
		 //方法二
		 <script>
			var back_first = null;
			mui.back = function() {
				if(!back_first) {
					back_first = new Date().getTime();
					mui.toast('再按一次退出应用');
					setTimeout(function() {
						back_first = null;
					}, 2000);
				} else {
					if(new Date().getTime() - back_first < 2000) {
						plus.runtime.quit();
					}
				}
				return false;
			}
		</script>

首页进入子页面后返回上一层的返回按钮注册

 <script> 
	     document.addEventListener("plusready", function() { 
	         // 注册返回按键事件 
	         plus.key.addEventListener('backbutton', function() { 
	             // 事件处理 
	             window.history.back(); 
	         }, false); 
	     }); 
	 </script>

屏蔽返回按钮

			var old_back = mui.back;
		    mui.back = function(){
		        return false;
		    }

7:实现原生APP里的进入导航实现，还可以，对进入的次数做监听首次进入显示导航，以后进入都不需要导航首页需要添加的事件

		// 设置启动时的轮播页
	function launchScreen() {
		//读取本地存储，检查是否为首次启动
		var showGuide = plus.storage.getItem("lauchFlag");
		
//		if(showGuide){ 
//			//有值，说明已经显示过了，无需显示；
//			//关闭splash页面；
//			plus.navigator.closeSplashscreen();
//			plus.navigator.setFullscreen(false);
//		}else{
//			//显示启动导航
//			mui.openWindow({
//				id:'guide',
//				url:'guide.html',
//				show:{
//					aniShow:'none'
//				},
//				waiting:{
//					autoShow:false
//				}
//			});
//		}
//测试期间，为了让导航页每次显示，就不做以上判断
//显示启动导航
			mui.openWindow({
				id:'guide',
				url:'guide.html',
				show:{
					aniShow:'none'
				},
				waiting:{
					autoShow:false
				}
			});
	}
		</script>

调用方法

<script type="text/javascript">
//只要是MUI都会有初始化的过程
			mui.init()
			 //创建子页面 初始化导航
			mui.plusReady(function() {
				launchScreen();
			});
		</script>

guide.html页面的实现

<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">
				
				<!-- 第1张 -->
				<div class="mui-slider-item">
					<img src="img/leader1.jpg">
				</div>
				<!-- 第2张 -->
				<div class="mui-slider-item">
					<img src="img/leader2.jpg">
				</div>
				<!-- 第3张 -->
				<div class="mui-slider-item">
					<img src="img/leader3.jpg">
					<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined"></button>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script>
			mui.back = function() {};
			mui.plusReady(function() {
				plus.navigator.setFullscreen(true);
				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("lauchFlag", "true"); 
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
			}, false);
			
			
		</script>
	</body>

MUI版扫码下载

原生版下载二维码

 APP下载地址

zhupeiye/YuLinNewsDemo