前端框架有很多,在做混合开发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) {//用户点击回车的事件号为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 做相关请求的服务程序
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=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.将定时任务加入到自动任务
Bash
0 */1 * * * python /www/wwwroot/xxx/spider/spidertask.py
源码资源包: