MUI框架-10-MUI 数据交互-跳转详情页面

我就是我 2022-05-10 08:26 376阅读 0赞

## MUI框架-10-MUI 数据交互-跳转详情页面 ##

*  上一篇介绍了如何实现数据交互，给别人的 API 发送 ajax 请求，我们得到数据，再使用 art-template 模板引擎拼接 HTML，最终实现实现数据交互，如果还没有接触，请先学习：[MUI框架-09-MUI 与后台数据交互][MUI_-09-MUI]
 *  本篇介绍 MUI 事件管理，实现点击新闻列表跳转详情页的效果
 *  放上一张图：  
    ![70][]
 *  官方文档：[MUI 事件管理][MUI]

### MUI 事件管理 ###

*  事件绑定：MUI 的事件绑定，除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定
 *  我们先看一下官方文档实例：
    
     *  点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面
     *  这里 mui，前面是一个 id 选择器，下面一个 on 事件函数

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
      //获取id
      var id = this.getAttribute("id");
      //传值给详情页面，通知加载新数据
      mui.fire(detail,'getDetail',{id:id});
      //打开新闻详情
      mui.openWindow({
        id:'detail',
        url:'detail.html'
      });
    })

### 项目搭建 ###

*  因为我们这个最好是跟着我的 文章从开始看，因为后面的文章 需要前面的基础
 *  请先查看：[ MUI框架-09-MUI 与后台数据交互][MUI_-09-MUI]
 *  先按照下面目录，建好项目：  
    ![在这里插入图片描述][70 1]

### 源代码文件： ###

*  因为代码比较复杂，分开讲太乱，大家可以拷贝，详解写在注释，
 *  1.首先需要自己下载只有 template-web.js 文件，获取方法：
    
     *  1.官网下载：[http://aui.github.io/art-template/zh-cn/index.html][http_aui.github.io_art-template_zh-cn_index.html]
     *  2.csdn下载：[https://download.csdn.net/download/qq\_40147863/10689407][https_download.csdn.net_download_qq_40147863_10689407]
     *  3.如果你会用 npm 包管理器，那么建议新建一个文件夹，因为我们只需要一个 template -web.js 文件，我们有很多都不需要，使用如下代码：
    
    > **npm install art-template --save**
    
     *  然后按下面路径找到 template-web.js ：  
        ![在这里插入图片描述][70 2]
 *  2.拷贝 index.html 代码：

<!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 rel="stylesheet" type="text/css" href="css/index.css" />
    
    	</head>
    
    	<body>
    		
    		<header class="mui-bar mui-bar-nav title">
    			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    			<h1 class="mui-title">知乎日报</h1>
    		</header>
    
    		<script type="text/javascript" charset="utf-8">
    			mui.init({
    				subpages: [{
    					url: 'html/content.html',
    					id: 'content.html',
    					styles: {
    						top: '45px', //mui标题栏默认高度为45px；
    						bottom: '0px' //默认为0px，可不定义；
    					}
    				}]
    			});
    		</script>
    
    		<nav class="mui-bar mui-bar-tab">
    			<a class="mui-tab-item mui-active">
    				<span class="mui-icon mui-icon-home"></span>
    				<span class="mui-tab-label">首页</span>
    			</a>
    			<a class="mui-tab-item">
    				<span class="mui-icon mui-icon-phone"></span>
    				<span class="mui-tab-label">电话</span>
    			</a>
    			<a class="mui-tab-item">
    				<span class="mui-icon mui-icon-email"></span>
    				<span class="mui-tab-label">邮件</span>
    			</a>
    			<a class="mui-tab-item">
    				<span class="mui-icon mui-icon-gear"></span>
    				<span class="mui-tab-label">设置</span>
    			</a>
    		</nav>
    	</body>
    
    </html>

*  3.拷贝 content.html 代码：

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link href="../css/mui.min.css" rel="stylesheet" />
    		
    	</head>
    
    	<body>
    
    		<div class="mui-content">
    			<div class="mui-slider">
    				<div class="mui-slider-group">
    					
    					<div class="mui-slider-item">
    						
    						<img src="../img/1D52F569E73F611465E9BB3656E9628B.png" />
    					</div>
    					
    					<div class="mui-slider-item">
    						
    						<img src="../img/8CF9B879550CD10AA9B7B58777367C7F.png" />
    					</div>
    				</div>
    			</div>
    			<ul class="mui-table-view" id="zhihu">
    			    
    			</ul>	
    			
    			
    			
    			
    
    		</div>
    
    		<script src="../js/mui.min.js"></script>
    		
    		
    		<script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
    		
    		<script id="list" type="text/html">
    			    
    			    {
       {each stories as list}}
    				<li class="mui-table-view-cell mui-media" id="{
       {list.id}}">
    					<a href="javascript:;">
    						<img class="mui-media-object mui-pull-left" src="{
       {list.images[0]}}">
    						<div class="mui-media-body">
    							
    							{
       {list.title}}
    						</div>
    					</a>
    				</li>
    				{
       {/each}}
    			</script>
    			
    		<script type="text/javascript">
    			
    			  
    			//plusReady，用来定义加载dom后的操作
    			mui.plusReady(function() {
    				
    				//发起 ajax请求，地址使用知乎日报 api 
    				mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
    					/* data 是参数，我们这里不需要，我们只是从 api获取数据
    					data: {
    						username: 'username',
    						password: 'password'
    					},
    					*/
    					dataType: 'json', //服务器返回json格式数据
    					type: 'get', //HTTP请求类型
    					timeout: 10000, //超时时间设置为10秒；
    					headers: {
    						'Content-Type': 'application/json'
    					},
    					success: function(data) {
    						//服务器返回响应，根据响应结果，分析是否登录成功；
    						
    						//我们现在控制台打印一下请求结果
    				        //console.log(data)
    				        
    						//然后获取json数据中的具体值
    				        //console.log(data.stories[0].title)
    				        
    				        //list 对应上面的 id，就是得到 拼接的 html
    				        var html = template('list', data);
    				        //把得到的 html 放到id为 zhihu 的 ul 标签里
    				        document.getElementById("zhihu").innerHTML = html;
    				        //console.log(html);
    
    					},
    					error: function(xhr, type, errorThrown) {
    						//异常处理；
    						console.log(type);
    					}
    				});
    
    			});
    			//网页预加载
    			mui.init({
    			  preloadPages:[{
    			    id:'info',
    			    url:'info.html'           
    			  }
    			  ]
    			});
    			
    			var detailPage = null;
    			//添加列表项的点击事件
    			mui('.mui-table-view').on('tap', 'li', function(e) {
    			  var id = this.getAttribute('id');
    			  //获得详情页面
    			  if(!detailPage){
    			    detailPage = plus.webview.getWebviewById('info');
    			  }
    			  //触发详情页面的newsId事件
    			  mui.fire(detailPage,'id',{
    			    id:id
    			  });
    			//打开详情页面          
    			  mui.openWindow({
    			    id:'info'
    			  });
    			});
    		</script>
    	</body>
    
    </html>

*  4.拷贝详情页 info.html 代码：

### 项目运行 ###

*  注意：只能在真机运行，或者安卓模拟器运行
 *  如果没有安卓手机，请配置模拟器，我这里使用的是夜神安卓模拟器，配置方法：
 *  请参考：[MUI框架-07-HBuilder+夜神安卓模拟器 配置][MUI_-07-HBuilder_]

### 更多文章链接：[MUI 框架][MUI 1] ###

--------------------

\- 本笔记不允许任何个人和组织转载

[MUI_-09-MUI]: https://blog.csdn.net/qq_40147863/article/details/82857401
[70]: /images/20220510/5bc6802f76284a24a328ba1786f12f28.png
[MUI]: http://dev.dcloud.net.cn/mui/event/
[70 1]: /images/20220510/e3324cbec7674f3c8756117b7931e2b3.png
[http_aui.github.io_art-template_zh-cn_index.html]: http://aui.github.io/art-template/zh-cn/index.html
[https_download.csdn.net_download_qq_40147863_10689407]: https://download.csdn.net/download/qq_40147863/10689407
[70 2]: /images/20220510/ba0e809cdbaa47f1b3d58823ca9da89d.png
[MUI_-07-HBuilder_]: https://blog.csdn.net/qq_40147863/article/details/82842959
[MUI 1]: https://blog.csdn.net/qq_40147863/article/category/8079041