hui框架开发APP

悠悠 2021-09-15 19:54 919阅读 0赞

hui是类似于mui框架的app构建框架，通过一段时间学习，写了个app例子

GitHub地址   等待中..........

[数据来源--------聚合数据][--------]

hui框架地址：[http://www.hcoder.net/hui/docs][http_www.hcoder.net_hui_docs]

先看下效果吧

![70][]

![70 1][]![70 2][]![70 3][]

![70 4][]![70 5][]

功能就这么简单

开始吧

入口界面  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  联系我们

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>开法者 ：wangweiruning@163.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中设置

写不下去了，具体看代码吧(~\_~)~~~~~~~~~~~~~~~~~

欢迎大家一起交流

[--------]: https://www.juhe.cn/
[http_www.hcoder.net_hui_docs]: http://www.hcoder.net/hui/docs
[70]: /images/20210908/b1857696661a40f98c802ecd86b87e14.png
[70 1]: https://img-blog.csdn.net/201807201052219?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180720105305999?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20210908/5803fdcf24814e69a07a183f35f88619.png
[70 4]: https://img-blog.csdn.net/20180720104741293?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: /images/20210908/da94933d9e77405ab691ec98d0850866.png