前端框架有很多，在做混合开发APP 时，MUI 的UI 看起来更像原生APP，所以就选择MUI 来体验一下。
1 首先下载 安装 HBuilder X
2 创建并选择5+app 项目
3.比较关键的index页面
Markup
<!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 其它子页面就大多小异了，做一个例子
Markup
<!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) {//用户点击回车的事件号为13var 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 做相关请求的服务程序
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 做为一个新闻采集的，基本的爬虫样例也来一个
Python
#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=0max_count=10ip="127.0.0.1"user="xxx"passwd="xxx"database="xxx" conn=Nonedef __init__(self): pass self.conn = pymysql.connect(host=self.ip,database=self.database, charset='utf8',user=self.user, password=self.passwd) def __del__(self): passself.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:#表示已经取完结果集breakrt=rescur.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()passdef 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.将定时任务加入到自动任务
Bash
0 */1 * * * python /www/wwwroot/xxx/spider/spidertask.py
源码资源包：
vtop.rar
原文链接：http://91hu.top/post/13.html
