android+x5+mui,基于html5 plus + Mui 移动App开发（一）

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

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

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

标题123

实全科技

内容分类列表

• 财经        

• 科技        

• 财经        

• 体育        

• 军事        

• 文化        

• 社会        

• 娱乐        

• 游戏        

搜索框

设置按钮

• 设置        

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

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(); // 阻止默认事件---阻止页面刷新    }

});

完整代码：

html>

实全科技

• 财经                

• 科技                

• 财经                

• 体育                

• 军事                

• 文化                

• 社会                

• 娱乐                

• 游戏                

• 设置                

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(); // 阻止默认事件---阻止页面刷新                }

});

});

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

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接