使用Html5 plus + Mui 进行移动App开发，有一段时间了，这几日得空，做个资讯App分享给大家。

今天主要分享主页实现，首先看下效果：

此界面主要分为：标题、内容分类列表、搜索及设置按钮。

标题

<header class="mui-bar mui-bar-nav">

	<h1 class="mui-title">实全科技</h1>

</header>

内容分类列表

<ul id="btnDefault" class="mui-table-view" style="margin-top: -5px;">

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

            财经

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

            科技

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             财经

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             体育

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             军事

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             文化

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             社会

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             娱乐

        </a>

    </li>

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">

             游戏

        </a>

    </li>

</ul>

搜索框

<div class="mui-input-row mui-search" style="margin-top: 10px;">

    <input type="search" id="btnSearch" class="mui-input-clear mui-input" placeholder="搜索">

</div>

设置按钮

<ul class="mui-table-view" style="margin-top: 10px;">

    <li class="mui-table-view-cell">

        <a id="btnSetting" class="mui-navigate-right">

             设置

        </a>

    </li>

</ul>

界面定义完后，接下来进行事件定义，实现交互效果：

mui('#btnDefault').on('tap', 'a', function() {

    console.log(JSON.stringify(this.innerText));

    //打开新窗口

    let keyword = this;

    mui.openWindow({

        url: 'pages/360news.html',

        id: '360news',

        extras: {

            keyword: this.innerText

        }

    });

});

let btnSetting = document.getElementById("btnSetting");

btnSetting.addEventListener("tap",function(){

    mui.openWindow("pages/setting.html","setting");

});

let btnSearch = document.getElementById("btnSearch");

btnSearch.addEventListener("keypress",function(event) {

    if(event.keyCode == "13") {

        document.activeElement.blur();//收起虚拟键盘

        mui.openWindow({

            url: 'pages/360news.html',

            id: '360news',

            extras: {

                keyword: String(btnSearch.value).trim()

            }

        });//TODO 完成搜索事件

        event.preventDefault(); // 阻止默认事件---阻止页面刷新

    }

});

完整代码：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link href="pages/css/mui.min.css" rel="stylesheet" />

</head>

<body>

    <header class="mui-bar mui-bar-nav">

        <h1 class="mui-title">实全科技</h1>

    </header>

    <div class="mui-content">

        <div class="mui-input-row mui-search" style="margin-top: 10px;">

            <input type="search" id="btnSearch" class="mui-input-clear mui-input" placeholder="搜索">

        </div>

        <ul id="btnDefault" class="mui-table-view" style="margin-top: -5px;">

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                    财经

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                    科技

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     财经

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     体育

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     军事

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     文化

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     社会

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     娱乐

                </a>

            </li>

            <li class="mui-table-view-cell">

                <a class="mui-navigate-right">

                     游戏

                </a>

            </li>

        </ul>

        <ul class="mui-table-view" style="margin-top: 10px;">

            <li class="mui-table-view-cell">

                <a id="btnSetting" class="mui-navigate-right">

                     设置

                </a>

            </li>

        </ul>

        <div style="margin-bottom: 10px; text-align: center;"></div>

    </div>

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

    <script type="text/javascript">

        mui.init({

            swipeBack:true //启用右滑关闭功能

        });

        mui.plusReady(function(){

            mui('#btnDefault').on('tap', 'a', function() {

                console.log(JSON.stringify(this.innerText));

                //打开新窗口

                let keyword = this;

                mui.openWindow({

                    url: 'pages/360news.html',

                    id: '360news',

                    extras: {

                        keyword: this.innerText

                    }

                });

            });

            let btnSetting = document.getElementById("btnSetting");

            btnSetting.addEventListener("tap",function(){

                mui.openWindow("pages/setting.html","setting");

            });

            let btnSearch = document.getElementById("btnSearch");

            btnSearch.addEventListener("keypress",function(event) {

                if(event.keyCode == "13") {

                    document.activeElement.blur();//收起虚拟键盘

                    mui.openWindow({

                        url: 'pages/360news.html',

                        id: '360news',

                        extras: {

                            keyword: String(btnSearch.value).trim()

                        }

                    });//TODO 完成搜索事件

                    event.preventDefault(); // 阻止默认事件---阻止页面刷新

                }

            });

        });

    </script>

</body>

</html>

至此整个界面分享完毕，后续将分享，数据列表展示界面：

App下载地址：http://m3w.cn/shiquan 欢迎提供宝贵意见！

基于html5 plus + Mui 移动App开发（一）的更多相关文章

  1. 基于html5 plus + Mui 移动App开发（三）-食全库

    食全库-食品安全知识库. 食品安全(food safety)指食品无毒.无害,符合应当有的营养要求,对人体健康不造成任何急性.亚急性或者慢性危害.根据倍诺食品安全定义,食品安全是“食物中有毒.有害物质 ...

  2. 基于Html5 Plus + Vue + Mui 移动App 开发（二）

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  3. 基于Html5的移动端APP开发框架

    快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP ...

  4. 基于Html5 Plus + Vue + Mui 移动App开发（三）-文件操作（读取、保存、更新数据）

      随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...

  5. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

  6. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发

    经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...

  7. MUI之App开发

    一般开发APP分为两种:1.原生ios和android语言开发.2.混合开发,里边穿插h5的东西. 3.第三种:现在因为前端用hbuilder工具开发的情况越来越多,这家公司又提供了更多的选择,所以近 ...

  8. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  9. 跨平台移动APP开发进阶(三)hbuilder+mui mobile app 开发心酸路

    注:请点击此处进行充电! 1.问题描述:在实现图片轮转时,若将 <script type="text/javascript"> mui("#slider&qu ...

随机推荐

  1. python中的shutil模块

    目录 python中的shutil模块 目录和文件操作 归档操作 python中的shutil模块 shutil模块对文件和文件集合提供了许多高级操作,特别是提供了支持文件复制和删除的函数. 目录和文 ...

  2. TensorFlow从1到2（五）图片内容识别和自然语言语义识别

    Keras内置的预定义模型 上一节我们讲过了完整的保存模型及其训练完成的参数. Keras中使用这种方式,预置了多个著名的成熟神经网络模型.当然,这实际是Keras的功劳,并不适合算在TensorFl ...

  3. Kubernetes集群部署史上最详细（一）Kubernetes集群安装

    适用部署结构以及版本 本系列中涉及的部署方式和脚本适用于1.13.x和1.14,而且采取的是二进制程序部署方式. 脚本支持的部署模式 最小部署模式 3台主机,1台为k8s的master角色,其余2台为 ...

  4. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  5. NumPy 超详细教程（2）：数据类型

    系列文章地址 NumPy 最详细教程(1):NumPy 数组 NumPy 超详细教程(2):数据类型 NumPy 超详细教程(3):ndarray 的内部机理及高级迭代 文章目录 NumPy 数据类型 ...

  6. AI繁荣下的隐忧——Google Tensorflow安全风险剖析

    本文由云+社区发表 作者:[ Tencent Blade Team ] Cradmin 我们身处一个巨变的时代,各种新技术层出不穷,人工智能作为一个诞生于上世纪50年代的概念,近两年出现井喷式发展,得 ...

  7. Docker进阶之六:网络管理

    一.默认网络 安装Docker时会自动创建三个网络:docker network ls 列出网络: # docker network ls NETWORK ID NAME DRIVER SCOPE 5 ...

  8. C#操作符??，?，?:功能解析

    ??操作符:叫做空合并操作符,它会对左右两个操作数进行判断,如果左边的数不为空,就返回左边的数,否则返回右边的数. ?操作符:语法糖,表示可空类型,可空类型也是值类型,它是包含null值的值类型,可通 ...

  9. 软件开发架构介绍||OSI七层协议之物理层、数据链路层、网络层、传输层（mac地址、ip协议、断开协议、tcp协议之三次握手四次挥手）

    一.网络编程 软件开发架构 C/S架构 C:客户端 想体验服务的时候才会去找服务端体验服务 S:服务端   24小时不间断的提供服务,即时监听,随时待命 B/S架构 B:浏览器    想体验服务的时候 ...

  10. ajax请求window.open()被拦截

    项目使用ajax post后根据返回的success,需要打开一个新页面,使用window.open发现谷歌浏览器直接被拦截. 后来了解发现该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了, ...