hui框架开发APP
程序员文章站
2024-01-24 20:07:40
...
hui是类似于mui框架的app构建框架，通过一段时间学习，写了个app例子
GitHub地址 等待中..........
hui框架地址：http://www.hcoder.net/hui/docs
先看下效果吧
功能就这么简单
开始吧
入口界面 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
<style type="text/css">
hui-start-banner{width:100%; height:100%; position:fixed; z-index:9998; left:0px; top:0px; background:#FFFFFF; display:none;}
#hui-start-banner-close{width:50px; height:50px; position:fixed; z-index:9999; top:50px; right:20px; background:#F5F6F7; display:none; text-align:center; border-radius:50px; line-height:50px; font-size:14px; color:#666;}
.hui-start-banner .hui-swipe-indicator{width:96%; position:absolute; z-index:3; left:2%; bottom:20px; display:none;}
#hui-footer a{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
</style>
</head>
<body>
<div class="hui-wrap"></div>
<div id="hui-footer">
<a href="javascript:changeSubView(0);" id="nav-home" class="hui-footer-active">
<div class="hui-footer-icons hui-icons-home"></div>
<div class="hui-footer-text">首页</div>
</a>
<a href="javascript:changeSubView(1);" id="nav-news">
<div class="hui-footer-icons hui-icons-news"></div>
<div class="hui-footer-text">新闻</div>
</a>
<a href="javascript:changeSubView(2);" id="nav-forum">
<div class="hui-footer-icons hui-icons-forum"></div>
<div class="hui-footer-text">社区</div>
</a>
<a href="javascript:changeSubView(3);" id="nav-my">
<div class="hui-footer-icons hui-icons-my"></div>
<div class="hui-footer-text">我的</div>
</a>
</div>
<script src="js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
setTimeout(function(){
plus.navigator.closeSplashscreen();
},1500)
// 创建子窗口
var subpages = new Array(
new Array('html/sub1.html', {top:'0px', bottom:"55px", left:"0"}),
new Array('html/sub2.html', {top:'0px', bottom:"55px", left:"100%"}),
new Array('html/sub3.html', {top:'0px', bottom:"55px", left:"200%"}),
new Array('html/cutPicture.html', {top:'0px', bottom:"55px", left:"300%"})
);
hui.plusReady(function(){
hui.subpages(subpages);
});
//点击底部按钮切换窗口
function changeSubView(index){
for(var i = 0; i< subpages.length; i++){
var subpage = hui.getView(subpages[i][0]);
subpage.setStyle({'top':0,'left' : ((index - i) * 100 )+'%'});
}
//选项状态**
hui('#hui-footer a').removeClass('hui-footer-active');
hui('#hui-footer a').eq(index).addClass('hui-footer-active');
}
var height = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function() {
var heightView = document.documentElement.clientHeight || document.body.clientHeight;
if(heightView < height) {
plus.webview.currentWebview().setStyle({
height: height
});
}
}
</script>
</body>
</html>sub1.html 新闻列表页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
<h1>腾讯新闻</h1>
</header>
<div class="hui-wrap">
<div class="hui-swipe" id="swipe2">
<div class="hui-swipe-items"></div>
</div>
</div>
<div class="hui-wrap">
<div class="hui-center-title"><h1>新闻列表</h1></div>
<div style="padding:10px;">
<div id="refreshContainer" class="hui-refresh">
<div class="hui-refresh-icon"></div>
<div class="hui-refresh-content hui-list" id="list">
<ul id="arcicle">
<!--
描述：内容集合
-->
</ul>
</div>
</div>
</div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/hui-swipe.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/hui-refresh-load-more.js"></script>
<script src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
hui.Back = null;
hui.plusReady(function(){
//判断是否支持沉浸式
var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
//获取系统状态栏高度
var StatusbarHeight = plus.navigator.getStatusbarHeight();
console.log(StatusbarHeight);
hui('.hui-header').css({'paddingTop':StatusbarHeight + 'px'});
hui('#hui-back').css({top:StatusbarHeight+'px'});
var indexView = plus.webview.getLaunchWebview();
var nextPage = {
pageId : 'html/sub2.html',
callBack : function(){
indexView.evalJS('hui("#hui-footer").find("a").removeClass("hui-footer-active"); hui("#nav-news").addClass("hui-footer-active")');
}
};
var prevPage = null;
hui.drag(prevPage, nextPage);
});
hui.get(
'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=lunbo',
function(res){
var arr = res.split('--hcSplitor--');
for(var i = 0; i < arr.length; i++){
var div = document.createElement('div')
div.setAttribute('class', 'hui-swipe-item');
div.innerHTML = arr[i];
hui(div).appendTo('#swipe2 .hui-swipe-items');
}
var swipe2 = new huiSwpie('#swipe2');
swipe2.run();
},
function(){
hui.toast('读取远程数据失败');
}
);
</script>
<script>
function showProductInfo(url,titles){
hui.open("createShow.html",{},true,{url:url,titles:titles})
}
hui.refresh('#refreshContainer', refresh);
hui.loadMore(getMore);
//加载更多
function getMore(){
$.ajax({
url:'http://v.juhe.cn/toutiao/index?key=76db99a8de0bb25da0ea78e8747f4971&type=guoji',
type:'GET',
dataType:'json', // 处理Ajax跨域问题
success: function(res){
var data = JSON.stringify(res);
data = JSON.parse(data);
data = data.result.data;
for(var i = 0; i < data.length; i++){
var li = document.createElement('li');
li.style.borderBottom="1px solid gray";
li.style.height="auto";
var pic1 = data[i].thumbnail_pic_s02 ? '<img src='+data[i].thumbnail_pic_s02+'/>':" ";
var pic2 = data[i].thumbnail_pic_s03 ? '<img src='+data[i].thumbnail_pic_s03+'/>':" ";
li.innerHTML ='<div class="hui-media-content" style="width:100%;height:auto">'+
'<p style="width:95%;margin:1em auto;color:red"><a href="javascript:showProductInfo(\''+data[i].url+'\',\''+data[i].author_name+'\');">'+data[i].title +'</a></p>'+
'<img src='+data[i].thumbnail_pic_s+'/>'+pic1+pic2+
'<p>'+
'<span>'+data[i].author_name+'</span>'+
'<span style="float: right;">'+data[i].date+'</span>'+
'</p>'+
'</div>';
hui(li).appendTo('#arcicle');
}
hui.endLoadMore();
}
})
}
function refresh(){
if(hui.refreshNumber < 1){hui.loading('加载中...');}
$.ajax({
url:'http://v.juhe.cn/toutiao/index?key=76db99a8de0bb25da0ea78e8747f4971&type=top',
type:'GET',
dataType:'json', // 处理Ajax跨域问题
success: function(res){
var data = JSON.stringify(res);
data = JSON.parse(data);
data = data.result.data;
console.log(data)
var html = '';
for(var i = 0; i < data.length; i++){
var pic1 = data[i].thumbnail_pic_s02 ? '<img src='+data[i].thumbnail_pic_s02+'/>':" ";
var pic2 = data[i].thumbnail_pic_s03 ? '<img src='+data[i].thumbnail_pic_s03+'/>':" ";
html += '<li style="border-bottom:1px solid gray;height:auto !important">'+
'<div class="hui-media-content" style="width:100%;height:auto">'+
'<p style="width:95%;margin:1em auto;color:red"><a href="javascript:showProductInfo(\''+data[i].url+'\',\''+data[i].author_name+'\');">'+data[i].title +'</a></p>'+
'<img src='+data[i].thumbnail_pic_s+'/>'+pic1+pic2+
'<p>'+
'<span>'+data[i].author_name+'</span>'+
'<span style="float: right;">'+data[i].date+'</span>'+
'</p>'+
'</div>'+
'</li>';
}
hui('#arcicle').html(html);
hui.endRefresh();
//关闭loading
hui.loading('加载中...', true);
},
error:function(){
hui.loading('加载中...', true);
title="无法完成操作"
message="由于你的支付宝账户还未绑定淘宝账户请登请登录www.taobao.com"
hui('#arcicle').html('<div style="text-align: center;margin:50px auto">'+
'<img src="../image/GIyMDJnuqmcqPLpHCSkj.svg">'+
'<h2 style="text-align: center;line-height: 2rem;">无法获取数据</h2>'+
'<p style="text-align: center;color:red;ine-height:2rem;">请检查网络是否正确</p>'+
'</div>');
hui.toast('连接服务器失败！');
hui.endRefresh();
}
});
}
</script>
</body>
</html>
sub2.html 笑话总集
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
<h1>笑话总集</h1>
</header>
<div class="hui-wrap">
<div class="hui-wrap">
<div id="refreshContainer" class="hui-refresh">
<div class="hui-refresh-icon"></div>
<div class="hui-refresh-content hui-list" id="list">
<ul id="arcicle" style="margin-top: 10px;">
<!--
描述：内容集合
-->
</ul>
</div>
</div>
</div>
</div>
<!--
播放笑话
-->
<div id="bdtts_div_id">
<audio id="tts_autio_id" autoplay="autoplay">
<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=" type="audio/mpeg">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/hui-refresh-load-more.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
hui.refresh('#refreshContainer', refresh);
hui.loadMore(getMore);
//加载更多
function getMore(){
$.ajax({
url:"https:\/\/v.juhe.cn\/joke\/content\/text.php?key=e0f404df1a1469811b3ce7239f0462d4&pagesize=10&page="+page,
type:'GET',
dataType:'JSONP', // 处理Ajax跨域问题
success: function(res){
var data = JSON.stringify(res);
data = JSON.parse(data);
data = data.result.data;
for(var i = 0; i < data.length; i++){
var li = document.createElement('li');
li.style.borderBottom="1px solid gray";
li.style.height="auto";
li.innerHTML ='<div class="hui-media-content" style="width:100%;height:auto">'+
'<p style="width:95%;margin:1em auto;color:red" onclick="songs(this.innerText)">'+data[i].content +'</p>'+
'<p>'+
'<span>'+data[i].unixtime+'</span>'+
'<span style="float: right;">'+data[i].updatetime+'</span>'+
'</p>'+
'</div>';
hui(li).appendTo('#arcicle');
}
hui.endLoadMore();
page++;
}
})
}
function refresh(){
if(hui.refreshNumber < 1){hui.loading('加载中...');}
$.ajax({
url:"https:\/\/v.juhe.cn\/joke\/content\/text.php?key=e0f404df1a1469811b3ce7239f0462d4&page=1&pagesize=10",
type:'GET',
dataType:'JSONP', // 处理Ajax跨域问题
success: function(res){
var data = JSON.stringify(res);
data = JSON.parse(data);
data = data.result.data;
var html = '';
for(var i = 0; i < data.length; i++){
html += '<li style="border-bottom:1px solid gray;height:auto !important">'+
'<div class="hui-media-content" style="width:100%;height:auto">'+
'<p style="width:95%;margin:1em auto;color:red" onclick="songs(this.innerText)">'+data[i].content +'</p>'+
'<p>'+
'<span>'+data[i].unixtime+'</span>'+
'<span style="float: right;">'+data[i].updatetime+'</span>'+
'</p>'+
'</div>'+
'</li>';
}
hui('#arcicle').html(html);
hui.endRefresh();
page=2;
//关闭loading
hui.loading('加载中...', true);
},
error:function(){
hui.loading('加载中...', true);
hui('#arcicle').html('<div style="text-align: center;margin:50px auto">'+
'<img src="../image/GIyMDJnuqmcqPLpHCSkj.svg">'+
'<h2 style="text-align: center;line-height: 2rem;">无法获取数据</h2>'+
'<p style="text-align: center;color:red;ine-height:2rem;">请检查网络是否正确</p>'+
'</div>');;
hui.toast('连接服务器失败！');
hui.endRefresh();
}
});
}
function songs(val){
hui.confirm('您确认要播放笑话吗？', ['取消','确定'], function(){
var ttsDiv = document.getElementById('bdtts_div_id');
var ttsAudio = document.getElementById('tts_autio_id');
ttsDiv.removeChild(ttsAudio);
var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text='+val+'" type="audio/mpeg">';
var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
var au2 = '</audio>';
ttsDiv.innerHTML = au1 + sss + eee + au2;
ttsAudio = document.getElementById('tts_autio_id');
ttsAudio.play();
},function(){
console.log('取消后执行...');
});
}
</script>
<script type="text/javascript">
//禁用返回键
hui.Back = null;
hui.plusReady(function(){
//判断是否支持沉浸式
var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
//获取系统状态栏高度
var StatusbarHeight = plus.navigator.getStatusbarHeight();
console.log(StatusbarHeight);
hui('.hui-header').css({'paddingTop':StatusbarHeight + 'px'});
hui('#hui-back').css({top:StatusbarHeight+'px'});
var indexView = plus.webview.getLaunchWebview();
var nextPage = {
pageId : 'html/sub3.html',
callBack : function(){
indexView.evalJS('hui("#hui-footer").find("a").removeClass("hui-footer-active"); hui("#nav-forum").addClass("hui-footer-active")');
}
};
var prevPage = {
pageId : 'html/sub1.html',
callBack : function(){
indexView.evalJS('hui("#hui-footer").find("a").removeClass("hui-footer-active"); hui("#nav-home").addClass("hui-footer-active")');
}
};
hui.drag(prevPage, nextPage);
});
</script>
</body>
</html>
sub3.html 联系我们
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
<h1 style="text-align: left;">反馈信息</h1>
<h1 style="text-align: right;" id="subMitConfig">提交反馈</h1>
</header>
<div class="hui-warp" style="margin-top:55px;">
<textarea name="textareas" rows="20" id="textareas" style="margin:10px 5% 10px;
width:80%;border-radius: 20px;
padding-left:5%;padding-right:5%" placeholder="请留下您宝贵的建议，让我们一同进步吧~~"></textarea>
</div>
<div class="hui-warp" style="position: relative;">
<h2 style="text-align: center;">十分真诚的希望留下您的印记</h2>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui.Back = null;
hui.plusReady(function(){
//判断是否支持沉浸式
var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
//获取系统状态栏高度
var StatusbarHeight = plus.navigator.getStatusbarHeight();
console.log(StatusbarHeight);
hui('.hui-header').css({'paddingTop':StatusbarHeight + 'px'});
hui('#hui-back').css({top:StatusbarHeight+'px'});
var indexView = plus.webview.getLaunchWebview();
var nextPage = {
pageId : 'html/cutPicture.html',
callBack : function(){
indexView.evalJS('hui("#hui-footer").find("a").removeClass("hui-footer-active"); hui("#nav-my").addClass("hui-footer-active")');
}
};
var prevPage = {
pageId : 'html/sub2.html',
callBack : function(){
indexView.evalJS('hui("#hui-footer").find("a").removeClass("hui-footer-active"); hui("#nav-news").addClass("hui-footer-active")');
}
};
hui.drag(prevPage, nextPage);
});
hui("#subMitConfig").click(function(){
hui.toast(hui("#textareas").val());
if(hui("#textareas").val()==""){
hui.toast("请留下您的意见，谢谢");
}else{
hui.toast("感谢您宝贵的意见，我们会尽快完善的，谢谢");
hui("#textareas").val("");
}
})
</script>
</body>
</html>
cutPicture.html 个人中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
<style type="text/css">
#hui-swaper{
position: fixed;bottom:10%;
}
#hui-swaper h2{
text-align: center;
margin-top:2%;
color: grey;
}
</style>
</head>
<body>
<header class="hui-header">
<h1>abuot us</h1>
</header>
<div class="hui-warp" style="margin:0 auto;margin-top: 150px;">
<div style="margin:0 auto; width:120px">
<img src="../image/chrome.png" style="width:120px;height:120px;border-radius: 15%;"/>
</div>
<h2 style="text-align: center;font-size: 24px;color: royalblue;">IReading</h2>
<p style="text-align: center;font-size: 24px;color: red;">让生活更精彩</p>
</div>
<div id="hui-swaper" style="height: 100px;width: 100%;">
<h2>版权所有@ wangweiruning<h2>
<h2>开法者 ：aaa@qq.com</h2>
<h2>如有需求，请发送消息至邮箱wangweiruning163.con</h2>
</div>
<script type="text/javascript" src="../js/hui.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/hui-image-cuter.js" charset="UTF-8"></script>
<script type="text/javascript">
hui.Back = null;
hui.plusReady(function(){
//判断是否支持沉浸式
var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
//获取系统状态栏高度
var StatusbarHeight = plus.navigator.getStatusbarHeight();
console.log(StatusbarHeight);
hui('.hui-header').css({'paddingTop':StatusbarHeight + 'px'});
hui('#hui-back').css({top:StatusbarHeight+'px'});
var indexView = plus.webview.getLaunchWebview();
var nextPage = null;
var prevPage ={
pageId : 'html/sub3.html',
callBack : function(){
indexView.evalJS('hui("#hui-footer").find("a").removeClass("hui-footer-active"); hui("#nav-forum").addClass("hui-footer-active")');
}
};
hui.drag(prevPage, nextPage);
});
</script>
</body>
</html>
createShow.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/hui.css" rel="stylesheet" />
</head>
<body>
<header class="hui-header">
<div id="hui-back"></div>
<h1 id="titles"></h1>
</header>
<script src="../js/hui.js"></script>
<script type="text/javascript">
hui.loading("加载中...");
var _self;
hui.plusReady(function(){
_self = plus.webview.currentWebview();
var urls = _self.url;
var titles = _self.titles;
hui("#titles").html(titles);
var bnv = plus.webview.create(urls,'detail',{top:"60px"},{});
plus.webview.currentWebview().append(bnv);
hui.closeLoading();
})
</script>
</body>
</html>应用打包请使用 hbuilder 开发工具
配置项在manifest.json中设置
写不下去了，具体看代码吧(~_~)~~~~~~~~~~~~~~~~~
欢迎大家一起交流
推荐阅读
-
手机APP开发之MIT Appinventor详细实战教程（十一），地图API的调用与学习，第一部分
-
hui框架开发APP
-
Web APIs——触屏事件，移动端常见特效，classList属性，移动端常用开发插件，移动端常用开发框架，本地存储
-
浅谈使用 PHP 进行手机 APP 开发（API 接口开发）
-
Windows App开发之开发准备
-
最流行的Node.js精简型和全栈型开发框架介绍_node.js
-
用Zend Studio for Eclipse - 6.1.2开发PHP，怎么才能正常使用zend框架
-
Objective-C的MKNetworkKit开发框架解析
-
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
-
对于PHP大型开发框架的看法_PHP教程