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

上一篇介绍了如何实现数据交互，给别人的 API 发送 ajax 请求，我们得到数据，再使用 art-template 模板引擎拼接 HTML，最终实现实现数据交互，如果还没有接触，请先学习：MUI框架-09-MUI 与后台数据交互
本篇介绍 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 与后台数据交互
先按照下面目录，建好项目：

源代码文件：

因为代码比较复杂，分开讲太乱，大家可以拷贝，详解写在注释，
1.首先需要自己下载只有 template-web.js 文件，获取方法：
- 1.官网下载：http://aui.github.io/art-template/zh-cn/index.html
- 2.csdn下载：https://download.csdn.net/download/qq_40147863/10689407
- 3.如果你会用 npm 包管理器，那么建议新建一个文件夹，因为我们只需要一个 template -web.js 文件，我们有很多都不需要，使用如下代码：
  
  npm install art-template --save
- 然后按下面路径找到 template-web.js ：
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>
        
        <!-- 导入 template-web.js
            官网下载：http://aui.github.io/art-template/
            csdn下载：https://download.csdn.net/download/qq_40147863/10689407
        -->
        <script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 使用<script id="list" type="text/html"> 拼接 html -->
        <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">
                            <!-- 获取 title -->
                            {{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 代码：

<!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">
            <ul class="mui-table-view" id="newsinfo"></ul>
<script id="lists" type="text/html">
              {{body}}
            </script>
        </div>

        <script src="../js/mui.min.js"></script>

        <!-- 导入 template-web.js
            官网下载：http://aui.github.io/art-template/
            csdn下载：https://download.csdn.net/download/qq_40147863/10689407
        -->
        <script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>

        <script type="text/javascript">
            mui.init();

            //添加newId自定义事件监听
            window.addEventListener('id', function(event) {
                //获得事件参数
                var id = event.detail.id;
                //根据id向服务器请求新闻详情
                
                
            //plusReady，用来定义加载dom后的操作
            mui.plusReady(function() {
                
                //发起 ajax请求，地址使用知乎日报 api 
                mui.ajax('https://news-at.zhihu.com/api/4/news/'+ id, {
                    /* 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("666");
                        console.log(data);
                        
                        //然后获取json数据中的具体值
                        //console.log(data.stories[0].title)
                        
                        //list 对应上面的 id，就是得到 拼接的 html
                        var html = template('lists', data);
                        //把得到的 html 放到id为 zhihu 的 ul 标签里
                        document.getElementById("newsinfo").innerHTML = data.body;
                        //console.log(html);

                    },
                    error: function(xhr, type, errorThrown) {
                        //异常处理；
                        console.log(type);
                    }
                });
            });
            });
                    
        </script>
    </body>

</html>

项目运行

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

更多文章链接：MUI 框架

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

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

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

MUI 事件管理

项目搭建

源代码文件：

项目运行

更多文章链接：MUI 框架

猜你喜欢