devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

hbuilder案例-仿微信界面_hbuilder编写小程序个人中心页面设计代码

作者：凡人多烦事01 | 2024-03-21 08:12:03

赞

踩

hbuilder编写小程序个人中心页面设计代码

目录

运行效果图： 

index.html

sub1.html:

sub2.html:

sub3.html

sub4.html:

chat.html

fdHeader.html

fdBody.html

运行效果图： 

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title></title>
  7.     <script src="js/mui.min.js"></script>
  8.     <link href="css/mui.min.css" rel="stylesheet"/>
  9. 	<link rel="stylesheet" type="text/css" href="css/Main.css"/>
  10.     <script type="text/javascript" charset="utf-8">
  11.       	mui.init();
  12. 		
  13. 		//mui加载完成事件
  14. 		mui.plusReady(function () {
  15. 		    var subPages=["sub1.html","sub2.html","sub3.html","sub4.html"];
  16. 			
  17. 			var  subPageStyle={
  18. 				top:"44px",
  19. 				bottom:"50px"
  20. 			};
  21. 			var mainView=plus .webview.currentWebview();
  22. 			
  23. 			for(var i=0;i<subPages .length;i++){
  24. 				var url=subPages[i ];
  25. 				
  26. 				var subView=plus.webview.create(url,url ,subPageStyle);
  27. 				subView.hide();
  28. 				mainView.append(subView);
  29. 			}
  30. 			
  31. 			plus.webview.show(subPages[0]);
  32. 			
  33. 			//注册轻击事件
  34. 			mui(".mui-bar-tab").on("tap","a",function(){
  35. 				var id=this.getAttribute("href");
  36. 				plus.webview.show(id)
  37. 			})
  38. 		})
  39. 		
  40.     </script>
  41. </head>
  42. <body>
  43. 	<header class="mui-bar mui-bar-nav">
  44. 		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  45. 		<h1 class="mui-title">微信</h1>
  46. 	</header>
  47. 	
  48. 	
  49. 	
  50. 	<nav class="mui-bar mui-bar-tab">
  51. 		<a class="mui-tab-item mui-active" href="sub1.html">
  52. 			<span class="mui-icon mui-icon-chatbubble"></span>
  53. 			<span class="mui-tab-label">微信</span>
  54. 		</a>
  55. 		<a class="mui-tab-item" href="sub2.html">
  56. 			<span class="mui-icon mui-icon-contact"></span>
  57. 			<span class="mui-tab-label">通讯录</span>
  58. 		</a>
  59. 		<a class="mui-tab-item" href="sub3.html">
  60. 			<span class="mui-icon mui-icon-navigate"></span>
  61. 			<span class="mui-tab-label">发现</span>
  62. 		</a>
  63. 		<a class="mui-tab-item" href="sub4.html">
  64. 			<span class="mui-icon mui-icon-person"></span>
  65. 			<span class="mui-tab-label">我</span>
  66. 		</a>
  67. 	</nav>
  68. 	
  69. </body>
  70. </html>

sub1.html:

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<script src="js/mui.js"></script>
  13. 		<script type="text/javascript">
  14. 			mui.init()
  15.  
  16. 			mui.plusReady(function() {
  17. 				mui(".mui-table-view-cell").on("tap", "a", function() {
  18. 					//获取好友名称
  19. 					var title=this.getAttribute("title");
  20. 					
  21. 					mui.openWindow({
  22. 						url:"chat.html",
  23. 						id: "chat.html",
  24. 						
  25. 						extras: {
  26. 							name:title //自定义扩展参数，可以用来处理页面间传值
  27. 						},
  28. 						show: {
  29. 							autoShow: true, //页面loaded事件发生后自动显示，默认为true
  30. 							aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
  31. 							duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
  32. 						},
  33. 						waiting: {
  34. 							autoShow: true, //自动显示等待框，默认为true
  35. 							title: '正在加载...'//等待对话框上显示的提示内容
  36. 							
  37. 						}
  38. 					})
  39. 				})
  40. 			})
  41. 		</script>
  42.  
  43.  
  44. 		<div class="mui-content">
  45. 			<ul class="mui-table-view">
  46. 				<li class="mui-table-view-cell mui-media">
  47. 					<a href="javascript:;" title="幸福">
  48. 						<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
  49. 						<div class="mui-media-body">
  50. 							幸福
  51. 							<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
  52. 						</div>
  53. 					</a>
  54. 				</li>
  55. 				<li class="mui-table-view-cell mui-media">
  56. 					<a href="javascript:;" title="木屋">
  57. 						<img class="mui-media-object mui-pull-left" src="images/muwu.jpg">
  58. 						<div class="mui-media-body">
  59. 							木屋
  60. 							<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
  61. 						</div>
  62. 					</a>
  63. 				</li>
  64. 				<li class="mui-table-view-cell mui-media">
  65. 					<a href="javascript:;" title=CBD">
  66. 						<img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">
  67. 						<div class="mui-media-body">
  68. 							CBD
  69. 							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
  70. 						</div>
  71. 					</a>
  72. 				</li>
  73. 			</ul>
  74. 		</div>
  75. 	</body>
  76.  
  77. </html>

sub2.html:

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<script src="js/mui.js"></script>
  13. 		<script type="text/javascript">
  14. 			mui.init()
  15. 		</script>
  16. 		<header class="mui-bar mui-bar-nav">
  17. 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  18. 			<h1 class="mui-title">通讯录</h1>
  19. 		</header>
  20. 	</body>
  21.  
  22. </html>

sub3.html

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<script src="js/mui.js"></script>
  13. 		<script type="text/javascript">
  14. 			mui.init()
  15. 			
  16. 			mui.plusReady(function () {
  17. 			    var friends=document.getElementById("friends"); 
  18. 				friends.addEventListener("tap",function(){
  19. 					mui.openWindow({
  20. 						url:"fdHeader.html",
  21. 						id: "fdHeader.html"
  22.  
  23. 					})
  24. 				})
  25. 			})
  26. 		</script>
  27. 		<header class="mui-bar mui-bar-nav">
  28. 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  29. 			<h1 class="mui-title">发现</h1>
  30. 		</header>
  31. 		<div class="mui-content">
  32.  
  33. 			<ul class="mui-table-view">
  34. 				<li class="mui-table-view-cell  mui-left" id="friends">
  35. 					<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" />&nbsp;&nbsp;朋友圈
  36. 				</li>
  37. 			</ul>
  38. 			<br>
  39. 			<ul class="mui-table-view">
  40. 				<li class="mui-table-view-cell  mui-left">
  41. 					<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" />&nbsp;&nbsp;朋友圈
  42. 				</li>
  43. 				<li class="mui-table-view-cell  mui-left">
  44. 					<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" />&nbsp;&nbsp;朋友圈
  45. 				</li>
  46. 			</ul>
  47. 			<br>
  48. 			<ul class="mui-table-view">
  49. 				<li class="mui-table-view-cell  mui-left">
  50. 					<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" />&nbsp;&nbsp;朋友圈
  51. 				</li>
  52. 				<li class="mui-table-view-cell  mui-left">
  53. 					<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" />&nbsp;&nbsp;朋友圈
  54. 				</li>
  55. 			</ul>
  56. 		</div>
  57. 	</body>
  58.  
  59. </html>

sub4.html:

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 		<style type="text/css">
  10. 			.mui-table-view-cell {
  11. 				font-size: 18px;
  12. 				line-height: 20px;
  13. 			}
  14. 		</style>
  15. 	</head>
  16.  
  17. 	<body>
  18. 		<script src="js/mui.js"></script>
  19. 		<script type="text/javascript">
  20. 			mui.init()
  21. 		</script>
  22. 		<header class="mui-bar mui-bar-nav">
  23. 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  24. 			<h1 class="mui-title">个人中心</h1>
  25. 		</header>
  26. 		
  27. 	</body>
  28.  
  29. </html>

chat.html

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<script src="js/mui.js"></script>
  13. 		<script type="text/javascript">
  14. 			mui.init()
  15. 		</script>
  16. 		<header class="mui-bar mui-bar-nav">
  17. 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  18. 			<h1 class="mui-title">聊天界面</h1>
  19. 		</header>
  20. 	</body>
  21.  
  22. </html>

fdHeader.html

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<script src="js/mui.js"></script>
  13. 		<script type="text/javascript">
  14. 			mui.init({
  15. 				subpages:[{
  16. 					url:"fdBody.html",
  17. 					id:"fdBody.html",
  18. 					styles:{
  19. 						top:'44px'
  20. 					}
  21. 				}]
  22. 			})
  23. 		</script>
  24. 		
  25. 		<header class="mui-bar mui-bar-nav">
  26. 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  27. 			<h1 class="mui-title">朋友圈</h1>
  28. 		</header>
  29. 	</body>
  30.  
  31. </html>

 

fdBody.html

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="css/mui.css" rel="stylesheet" />
  9. 	</head>
  10.  
  11. 	<body>
  12. 		<script src="js/mui.js"></script>
  13. 		<script type="text/javascript">
  14. 			mui.init()
  15. 		</script>
  16. 		<div class="mui-content">
  17. 			adasdfsaf
  18. 		</div>
  19. 	</body>
  20.  
  21. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/279633
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号