soft

soft

MUI 前端框架体验

        前端框架有很多,在做混合开发APP 时,MUI 的UI 看起来更像原生APP,所以就选择MUI 来体验一下。

        1 首先下载 安装 HBuilder X

        2  创建并选择5+app 项目

           image.png

        3.比较关键的index页面 

<!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>
	<script src="js/jquery.min.js"></script>	
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>	
  <!-- 主页面标题 -->  
	<!-- 主页面内容容器 -->
	
	<div class="mui-content" >

	</div>
	  <!-- 底部导航 -->
	  <nav  class="mui-bar mui-bar-tab">
			  <a href="home.html" class="mui-tab-item mui-active" id="defaultTab">
				  <span class="mui-icon mui-icon-home"></span>
				  <span class="mui-tab-label">首页</span>
			  </a>
			  <a href="subscribe.html" class="mui-tab-item">
			  	<span class="mui-icon mui-icon-star"></span>
			  	<span class="mui-tab-label">订阅</span>
			  </a>
			  <a href="search.html" class="mui-tab-item">
				  <span class="mui-icon mui-icon-search"></span>
				  <span class="mui-tab-label">搜索</span>
			  </a>
			  <a href="calendar.html" class="mui-tab-item">
			  	<span class="mui-icon mui-icon mui-icon mui-icon-pengyouquan"></span>
			  	<span class="mui-tab-label">币历</span>
			  </a>
			  <a href="my.html" class="mui-tab-item">
				  <span class="mui-icon mui-icon-contact"><span style="display: none;" class="mui-badge">0</span></span>
				  <span class="mui-tab-label">我的</span>
			  </a>
		  </nav>
			
	
	<script type="text/javascript">
	
	 mui.init({
	            gestureConfig:{
	                doubletap:true
	            },
	            subpages:[{
	                url:'home.html',
	                id:'MainViwe',
	                styles:{
	                    top: '30px',
	                    bottom: '51px'
	                }
	            }]
	        });
	    
	    mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
	    });
	
	//底部选项卡切换跳转
	(function jumpPage(){
	        //跳转页面
	        var subpages = ['index.html','subscribe.html','search.html','calendar.html', 'my.html'];
	        var subpage_style = {
	            top: '44px',
	            bottom: '51px'
	        };
	        var Index=0;
	        var actTab=subpages[Index],
	            tittle=document.querySelector('.mui-title');
	            
	        var aniShow = {};//动画显示
	        
	        //首次启动切滑效果
	             //当前激活选项
	            var activeTab = subpages[0];         
	             //选项卡点击事件
	            mui('.mui-bar-tab').on('tap', 'a', function(e) {
	                //修改对应分页
	                var targetTab = this.getAttribute('href');
	                $('#MainViwe').attr('src',targetTab);
	                
	                //修改标题              
	                //tittle.innerHTML=this.querySelector('.mui-tab-label').innerHTML;
	            });
	             //自定义事件,模拟点击“首页选项卡”
	            document.addEventListener('gohome', function() {
	                var defaultTab = document.getElementById("defaultTab");
	                //模拟首页点击
	                mui.trigger(defaultTab, 'tap');
	                //切换选项卡高亮
	                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
	                if (defaultTab !== current) {
	                    current.classList.remove('mui-active');
	                    defaultTab.classList.add('mui-active');
	                }
	
	        });
	    })()
	</script>
	
</body>
</html>

        4 其它子页面就大多小异了,做一个例子

<!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.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
	</head>

	<body>
		<div class="mui-input-row mui-search">
			<input type="search"  id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="">
		</div>
		<center><b>热门搜索</b></center>
		<ul>
			<li id="htop1" onclick="htop('htop1')" ><a >比特币</a></li>
			<li id="htop2" onclick="htop('htop2')" ><a >莱特币</a></li>
			<li id="htop3" onclick="htop('htop3')"><a >区块链</a></li>		
		</ul>
		<ul id='infolist' class="mui-table-view">
			
		</ul>
		<script type="text/javascript">
			mui.init()
			
			 // 搜索事件,获取搜索关键词
			function enterSearch(event){
				if(event.keyCode == 13) {//用户点击回车的事件号为13
					var keyword = document.getElementById('searchInput').value;
					//alert(keyword);
					getnews(keyword);
				}
			}
			function htop(index){
				var keyword=document.getElementById(index).innerText;
				getnews(keyword);
			}
					
			function newwindow(detailsid){
				mui.openWindow({
					url:'details.html?newsid='+detailsid,
					id:'newsid',
					})
			}
			
			function getnews(key){
				mui.toast(key);
				var url="server/getnews.php?type=101&key="+key;			
				//console.log(url);
				mui.ajax(url,{
				    dataType:'json',
				    type:'get',
				    timeout:10000,
				    success:function(data){				      
				        if(data.result==1){
				            //成功
							var list_innerhtml="";
							//mui.toast(data.data.length);
							for (let i = 0; i < data.data.length; i++) {
								let logo=data.data[i].source;
								let title=data.data[i].title;
								let describe=data.data[i].details;
								let newsid=data.data[i].id;
								list_innerhtml=list_innerhtml+"\
								<li class='mui-table-view-cell mui-media'>\
									<a href=javascript:newwindow("+newsid+")>\
										<img class='mui-media-object mui-pull-left' src=images/"+logo+".png>\
										<div class='mui-media-body'>\
										    "+title.substring(0,6)+"\
											<p class='mui-ellipsis'>"+title+"</p>\
										</div>\
									</a>\
								</li>\
								";										
							}
							document.getElementById("infolist").innerHTML=list_innerhtml;
							// mui.toast(data.data[0].logo);
						    //var js_obj=JSON.parse(data.data);																	 
							//mui.toast(js_obj);				   
				        }else{
				            //失败			         
							mui.toast("错误,请稍候重试");
				        }
				    },
				    error:function(){
						mui.toast("未知错误,请重试");
				    }
				});
				
			}
		</script>
		
	</body>

</html>

        5 前端UI有 了,后端数据也得跟上,我采用无框架PHP 做相关请求的服务程序

<?
$db_username="xxx";
$db_password="xxx";
$db_host="127.0.0.1";
$db_name="xxx";
$conn = new mysqli($db_host, $db_username, $db_password, $db_name);
if ($conn->connect_error) {die("连接失败: " . $conn->connect_error);}

function db_select($sql){
    //$sql = "SELECT id, firstname, lastname FROM MyGuests";
    $result = $conn->query($sql); 
    if ($result->num_rows > 0) {      
        while($row = $result->fetch_assoc()) {
            $rt[]=$row;
        }
    } else {
        $rt=[];
    }
    return $rt;
}
function db_update($sql){
    $result = $conn->query($sql); 
    if($result){
        $rt=true;
    }else{
        $rt=false;
    }
    return $rt;
}   
function db_insert($sql){
    $result = $conn->query($sql); 
    if($result){
        $rt=true;
    }else{
        $rt=false;
    }
    return $rt;
}

?>

        6 做为一个新闻采集的,基本的爬虫样例也来一个

#coding=utf-8
import requests,pymysql,re,os,json,datetime,configparser,time,sys
from bs4 import BeautifulSoup

#pip3 install pymysql
#pip3 install Beautifulsoup4 
class C_myspider:
    cur_count=0
    max_count=10
    ip="127.0.0.1"
    user="xxx"
    passwd="xxx"
    database="xxx"   
    conn=None
    def __init__(self):     
        pass  
        self.conn = pymysql.connect(host=self.ip,database=self.database, charset='utf8',user=self.user, password=self.passwd)  
    def __del__(self):   
        pass
        self.conn.close()
    def checkisexist(self,in_title):
        rt=0
        #self.conn = pymysql.connect(self.ip,self.user,self.passwd)
        self.conn.select_db('vtop_91hu_top')
        cur=self.conn.cursor()#获取游标
        sqlStr="SELECT id from vtop_news WHERE title='"+in_title +"'LIMIT 1;"      
        cur.execute(sqlStr)
        while 1:
            res=cur.fetchone()
            if res is None:
                #表示已经取完结果集
                break
            rt=res
        cur.close()
        self.conn.commit()
        #self.conn.close()
        return rt 
    def insertnews(self,source,title,createtime,details):  
        if self.checkisexist(title):
            print(title+"is exist!")
            return False   
        #con = pymysql.connect(host=self.ip,database=self.database, charset='utf8',user=self.user, password=self.passwd)
        try:
            # 2. 通过连接对象获取游标
            with self.conn.cursor() as cursor:
                # 3. 通过游标执行SQL并获得执行结果
                result = cursor.execute(
                    'INSERT INTO vtop_news (source,title,details,collectionsum,likesum,createtime,visitorsum) VALUES (%s, %s, %s, %s, %s, %s, %s)',
                    (source,title,details,"0","0",createtime,"0")
                )                
            if result == 1:
                print('Details添加成功!')
                self.cur_count+=1
            # 4. 操作成功提交事务
            self.conn.commit()
        finally:
            # 5. 关闭连接释放资源
            #conn.close()
            pass
       
    def bitcoin86(self):          
        url="https://www.bitcoin86.com/news/"
        r=requests.get(url)
        soup=BeautifulSoup(r.text,"html.parser")
        hreflist=soup.find_all("div",class_="m-news-item")
        for item in hreflist:
            href=item.find("a",target="_blank").get("href")
            newsurl="https://www.bitcoin86.com"+href
            #print(newsurl)
            r2=requests.get(newsurl)
            soup2=BeautifulSoup(r2.text,"html.parser")
            source='bitcoin86'
            title=soup2.find("h1").get_text()
            createtime=soup2.find("span",class_="date").get_text()
            details=str(soup2.find("article",class_="article-content"))
            #print(source,title,createtime,details)
            self.insertnews(source,title,createtime,details)
    def jinse(self):
        url="https://www.jinse.com/news/"
        r=requests.get(url)
        soup=BeautifulSoup(r.text,"html.parser")
        hreflist=soup.find_all("div",class_="list clearfix")
        for item in hreflist:
            newsurl=item.find("a",target="_blank").get("href")  
            createtime=soup.find("span",class_="left margin-l16").get_text()      
            #print(newsurl)
            r2=requests.get(newsurl)
            soup2=BeautifulSoup(r2.text,"html.parser")
            source='jinse'
            title=soup2.find("h1").get_text()            
            details=str(soup2.find("div",class_="js-article"))
            #print(source,title,createtime,details)
            self.insertnews(source,title,createtime,details)
if __name__ == "__main__":
    msp=C_myspider()     
    msp.bitcoin86()  
    msp.jinse()

    7.将定时任务加入到自动任务

0 */1 * * * python /www/wwwroot/xxx/spider/spidertask.py

    

源码资源包:

    

vtop.rar


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

联系我 331434376    15629529961