仿微信开发笔记（第5章）

weixin_52427290

于 2021-11-17 17:08:55 发布

阅读量146

点赞数

文章标签：微信 vue.js 前端

本文链接：https://blog.csdn.net/weixin_52427290/article/details/121342710

版权

MUI,H5 PLUS(JS),Hbuilder开发工具

利用MUI开发APP:MUI-最接近原生APP体验的高性能前端框架

图标iconfont-阿里巴巴矢量图标库

各个程序框架文档 - DCloud问答

mui.plusReady(function () {}) 设备准备就绪后执行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
     <link href="css/header.css" rel="stylesheet" />
	<link rel="stylesheet" href="fontico/iconfont.css">
	<script type="text/javascript" charset="utf-8">
      	mui.init();
		mui.plusReady(function () {
			plus.navigator.setStatusBarStyle("light");
		    plus.navigator.setStatusBarBackground("#C9394A");
			
		});
    </script>
</head>
<body>
   <header class="mui-bar mui-bar-nav title">
	   <h1 class="mui-title title-color" id="weixin_title">微信</h1>
   </header>
   //mui选项卡
   <nav class="mui-bar mui-bar-tab">
	   <a class="mui-tab-item mui-active" tabindex="0">
		  <span class="mui-icon iconfont icon-hot"></span>
		  <span class="mui-tab-label">微信</span>
	   </a>
	   <a class="mui-tab-item" tabindex="1">
		   <span class="mui-icon mui-icon-phone"></span>
		   <span class="mui-tab-label">通讯录</span>
	   </a>
	   <a class="mui-tab-item" tabindex="2">
		    <span class="mui-icon iconfont icon-zhinanzhen"></span>
		    <span class="mui-tab-label">发现</span>
	   </a>
	   <a class="mui-tab-item" tabindex="3">
		     <span class="mui-icon mui-icon-person" ></span>
		      <span class="mui-tab-label">我</span>
	  </a>
    </nav>
	<script type="text/javascript">
	//不同的选项卡作不同的页面展示：感觉页面都被创立好后隐藏，调那个就显示那个
			var weixinArray=[
				{
					pageId:"bmooc-chatlist.html",
					pageUrl:"bmooc-chatlist.html"
					},
				{
					pageId:"bmooc-contact.html",
					pageUrl:"bmooc-contact.html"
					},	
				{
					pageId:"bmooc-discover.html",
					pageUrl:"bmooc-discover.html"
					},
			    {
					pageId:"bmooc-me.html",
					pageUrl:"bmooc-me.html"
					}
					];
			var weixinStyle = {
						top: "44px",
						bottom: "50px"}
				 //创建页面，添加并隐藏		 
			mui.plusReady(function () {
					 //1.获取当前对象; 2.当前主页追加子页的4张webview对象,隐藏,追加每一个子页面到当前主页面
					var indexWebview=plus.webview.currentWebview();
					for (var i = 0 ; i < weixinArray.length ; i ++) {
                              var weixinPage=plus.webview.create(weixinArray[i].pageUrl, 
	                                                             weixinArray[i].pageId,
																 weixinStyle);
					     weixinPage.hide();
					   indexWebview.append(weixinPage);
						}
		                       //默认页面展示
					 plus.webview.show(weixinArray[0].pageId);
	   //批量绑定事件，以展示不同页面：
	   //	1)显示点击的tab选项所对应的页面
	   //   2)隐藏其他的不需要的页面
	   mui(".mui-bar-tab").on("tap","a",function(){
				var tabindex = this.getAttribute("tabindex");
				plus.webview.show(weixinArray[tabindex].pageId,"fade-in",200);
				for (var i = 0 ; i < weixinArray.length ; i ++) {
				if(i!=tabindex){
					plus.webview.hide(weixinArray[i].pageId,"fade-out",200);
					           }
										                    }
				});	 

						});
	</script>
</body>
</html>

css:

.title{
	background-color: #C9394A;
}
.title-color{
	color: white;
}
.mui-bar-tab.mui-tab-item.mui-active{
	color: #C9394A;
}

weixin_52427290

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿微信开发笔记（第5章）

MUI,H5 PLUS(JS),Hbuilder开发工具利用MUI开发APP:MUI-最接近原生APP体验的高性能前端框架
复制链接

扫一扫

仿微信开发笔记（第5章）

“相关推荐”对你有帮助么？