前端框架有很多,在做混合开发APP 时,MUI 的UI 看起来更像原生APP,所以就选择MUI 来体验一下。
1 首先下载 安装 HBuilder X
2 创建并选择5+app 项目
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
源码资源包: