TabBar圖標(biāo)修改
接著上篇文章份氧，今天的內(nèi)容是TabBar圖標(biāo)的修改，和頁(yè)面跳轉(zhuǎn)
MUI中雖然提供了很多圖標(biāo)但是不能滿足我們所有項(xiàng)目需求了罪，那這個(gè)時(shí)候需要我們自己定義圖標(biāo)蜜托，我這里面推薦的是阿里巴巴圖片矢量圖http://iconfont.cn/
阿里巴巴矢量圖
可以在這里面搜索想要的圖標(biāo)，例如：網(wǎng)易新聞第一個(gè)圖標(biāo)是‘新聞’泳猬，就可以在里面搜索新聞兩個(gè)字批钠，下面就會(huì)出現(xiàn)非常多的圖標(biāo)供你選擇宇植，總會(huì)有你喜歡的一張得封。
第一步：選擇你喜歡的圖標(biāo)加入購(gòu)物車(chē)?yán)锩妫ㄟ@里是免費(fèi)的）
第二步：存儲(chǔ)
WeChat_1457402510.jpeg
第三步：下載到本地
下載到本地解壓之后，會(huì)將合并后的字體文件及自動(dòng)生成的css全部下載
第四步：修改css
默認(rèn)的CSS代碼：
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-yuedu:before { content: "\\e600"; }
.icon-wode:before { content: "\\e601"; }
.icon-huati:before { content: "\\e602"; }
.icon-shipin:before { content: "\\e603"; }
.icon-xinwen:before { content: "\\e604"; }
注意：
1：為保證和mui目錄結(jié)構(gòu)統(tǒng)一指郁，建議將字體文件放在fonts目錄下忙上，這樣我們需要修改@font-face下得url屬性， src: url('../fonts/iconfont.ttf')
2：只兼容iOS和Android版本的話闲坎，我們僅需要ttf格式的字體即可疫粥，其它字體可以刪除；同時(shí)腰懂，我們也僅需保留-webkit前綴語(yǔ)法梗逮，-moz前綴部分可以刪除；
修改之后绣溜，代碼如下：
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.ttf') format('truetype'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-yuedu:before { content: "\\e600"; }
.icon-wode:before { content: "\\e601"; }
.icon-huati:before { content: "\\e602"; }
.icon-shipin:before { content: "\\e603"; }
.icon-xinwen:before { content: "\\e604"; }
第五步：集成mui
將iconfont.css及iconfont.ttf兩個(gè)文件分別拷貝到mui工程css及fonts目錄下慷彤，
然后即可在mui中引用剛生成的字體圖標(biāo)代碼如下：
引入:
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
修改后代：
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-yuedu"></span>
<span class="mui-tab-label">閱讀</span>
</a>
主要代碼：將mui默認(rèn)的icon（如mui-icon-home）替換成 iconfont icon-yuedu，修改后預(yù)覽效果如下：
圖標(biāo)修改完成怖喻，接下來(lái)我們來(lái)看下頁(yè)面跳轉(zhuǎn)
頁(yè)面跳轉(zhuǎn)
有的小伙伴問(wèn)我數(shù)據(jù)是怎么來(lái)的底哗，我這里是通過(guò)工具抓包過(guò)來(lái)的，如果不會(huì)呢可以看下http://www.reibang.com/p/ae1c6f878a63
我們第一步首先是從新聞列表點(diǎn)擊之后進(jìn)入詳情頁(yè)面首先來(lái)分析一下接口锚沸，新聞列表接口如下跋选，
http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore
數(shù)據(jù)結(jié)構(gòu)：
{
"T1348647853363": [
{
"boardid": "news_shehui7_bbs",
"clkNum": 0,
"digest": "她覺(jué)得頭痛，眼睛脹痛后以為是疲勞哗蜈，未料是青光眼發(fā)作前标。",
"docid": "BHK5A78O00011229",
"downTimes": 0,
"id": "BHK5A78O00011229",
"img": "http://img3.cache.netease.com/3g/2016/3/8/201603080554302b80d.jpg",
"imgsrc": "http://img3.cache.netease.com/3g/2016/3/8/201603080554302b80d.jpg",
"imgType": 0,
"interest": "A",
"lmodify": "2016-03-08 05:51:32",
"picCount": 0,
"program": "HY",
"prompt": "成功為您推薦10條新內(nèi)容",
"ptime": "2016-03-08 05:49:59",
"recReason": "熱門(mén)文章（養(yǎng)生）",
"recType": 0,
"replyCount": 1105,
"replyid": "BHK5A78O00011229",
"source": "現(xiàn)代快報(bào)",
"template": "manual",
"title": "女子連看18集韓劇患病險(xiǎn)失明",
"unlikeReason": [
"養(yǎng)生/1",
"標(biāo)題黨/6",
"來(lái)源:現(xiàn)代快報(bào)/4",
"內(nèi)容重復(fù)/6"
],
"upTimes": 0
},
]
}
詳情頁(yè)面接口：
http://c.m.163.com/nc/article/BHK5A78O00011229/full.html
詳情頁(yè)面的接口是要通過(guò)新聞列表數(shù)據(jù)中的id坠韩，這個(gè)時(shí)候我們需要在點(diǎn)擊新聞列表的時(shí)候跳轉(zhuǎn)詳情頁(yè)面，并且把ID傳過(guò)去炼列。
這里面有幾種做法同眯，最簡(jiǎn)單的做法就是點(diǎn)擊a標(biāo)簽的時(shí)候傳遞過(guò)去
以下代碼是上篇文章寫(xiě)的：
//用來(lái)處理列表數(shù)據(jù)的函數(shù)
function listDataAnalyze(data){
var arrayObj = data.T1348647853363;
for(var i = 0; i<arrayObj.length;i++){
finalList = '<li class="mui-table-view-cell mui-media" id="list-cell"><a href="#javascript;"><img class="mui-media-object mui-pull-left" src='+arrayObj[i].img+'><div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
$("#tableView-List").append(finalList);
}
}
先創(chuàng)建一個(gè)詳情頁(yè)面detail.html
創(chuàng)建詳情頁(yè)面
我們要對(duì)上面的這些代碼進(jìn)行稍微修改,在a標(biāo)簽中點(diǎn)擊，并且把id傳過(guò)去
//用來(lái)處理列表數(shù)據(jù)的函數(shù)
function listDataAnalyze(data){
var arrayObj = data.T1348647853363;
for(var i = 0; i<arrayObj.length;i++){
finalList = '<li class="mui-table-view-cell mui-media" id="list-cell"><a href="detail.html?'+arrayObj[i].id+'"><img class="mui-media-object mui-pull-left" src='+arrayObj[i].img+'><div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
$("#tableView-List").append(finalList);
}
}
在detail.html詳情頁(yè)面中唯鸭，首先要獲取ID须蜗，然后進(jìn)行網(wǎng)絡(luò)請(qǐng)求
第一步：獲取ID
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var url_id = plus.webview.currentWebview().getURL().split('?')[1];
})
</script>
第二步：拼接詳情頁(yè)面接口
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var url_id = plus.webview.currentWebview().getURL().split('?')[1];
var url = 'http://c.m.163.com/nc/article/'+url_id+'/full.html';
console.log(url);
})
</script>
第三步：網(wǎng)絡(luò)請(qǐng)求，從網(wǎng)絡(luò)獲取數(shù)據(jù)并且解析
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var url_id = plus.webview.currentWebview().getURL().split('?')[1];
var url = 'http://c.m.163.com/nc/article/'+url_id+'/full.html';
console.log(url);
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
dataAnalyze(data,url_id);
},
error:function(){
console.log("返回?cái)?shù)據(jù)失敗");
}
})
})
//數(shù)據(jù)解析的函數(shù)
function dataAnalyze(data,url_id){
console.log(data[url_id]);
}
</script>
看詳情頁(yè)面的數(shù)據(jù)結(jié)構(gòu)：
{
"BHI2PG0K00031H2L": {
"apps": [
],
"boboList": [
],
"body": "<!--IMG#0--><!--IMG#1--><p> <strong>網(wǎng)易娛樂(lè)3月7日?qǐng)?bào)道</strong>據(jù)“關(guān)愛(ài)八卦協(xié)會(huì)”近日爆料目溉，許久未對(duì)公眾露面的張藝謀現(xiàn)身北京某餐廳明肮，探班其女兒張末新電影拍攝，而同在現(xiàn)場(chǎng)的還有該電影的女主角缭付、及剛剛曝光新戀情的倪妮柿估。</p><p> 網(wǎng)友當(dāng)日爆料稱(chēng)，自己是在北京某餐廳打工陷猫，前段時(shí)間正巧遇見(jiàn)倪妮來(lái)餐廳取景秫舌，并驚喜看到張藝謀前來(lái)探班，聽(tīng)現(xiàn)場(chǎng)工作人員說(shuō)該戲的導(dǎo)演正是張藝謀的女兒绣檬。爆料照片雖不清晰足陨，但依然能分辨出確實(shí)是張藝謀和倪妮。</p>",
"digest": "",
"dkeys": "張藝謀",
"docid": "BHI2PG0K00031H2L",
"ec": "金舒_NK4322",
"hasNext": false,
"img": [
{
"alt": "張藝謀",
"pixel": "550*412",
"ref": "<!--IMG#0-->",
"src": "http://img5.cache.netease.com/ent/2016/3/7/20160307102654078a5.jpg"
},
{
"alt": "倪妮",
"pixel": "550*733",
"ref": "<!--IMG#1-->",
"src": "http://img2.cache.netease.com/ent/2016/3/7/201603071026525bb4e.jpg"
}
],
"keyword_search": [
{
"word": "倪妮"
},
{
"word": "張藝謀"
},
{
"word": "探班"
}
],
"link": [
],
"picnews": true,
"ptime": "2016-03-07 10:27:25",
"relative_sys": [
{
"href": "",
"id": "BG17ENH4000300B1",
"imgsrc": "http://img1.cache.netease.com/ent/2016/2/17/20160217110639e126e.png",
"ptime": "2016-02-17 11:06:08",
"source": "網(wǎng)易娛樂(lè)",
"title": "倪妮霍建華演張藝謀女兒處女作 未見(jiàn)老謀子身影",
"type": "doc"
},
{
"href": "",
"id": "BEO0QE2U9001QE2V",
"imgsrc": "http://easyread.ph.126.net/kmj1_0qBmDqrvzaQrRHYiw==/7916499113153184879.jpg",
"ptime": "2016-02-01 09:59:31",
"source": "粉絲網(wǎng)",
"title": "“謀女郎”首證傳承 倪妮接演28歲未成年",
"type": "doc"
},
{
"href": "",
"id": "BHH4MDM99001MDMA",
"imgsrc": "http://easyread.ph.126.net/_8C5XqGQ0eGvK50mlulTuw==/7916603566757890979.jpg",
"ptime": "2016-03-07 00:31:00",
"source": "新民網(wǎng)",
"title": "曝倪妮井柏然同居 兩人曾合作電影《等風(fēng)來(lái)》",
"type": "doc"
}
],
"replyBoard": "ent2_bbs",
"replyCount": 227,
"source": "網(wǎng)易娛樂(lè)",
"template": "normal1",
"threadAgainst": 0,
"threadVote": 1,
"tid": "",
"title": "張藝謀現(xiàn)身片場(chǎng)探班女兒新作",
"topiclist": [
{
"alias": "尖峰娛論娇未、八卦聚焦",
"cid": "C1378977941637",
"ename": "mingxing",
"hasCover": false,
"subnum": "超過(guò)1000萬(wàn)",
"tid": "T1348648624173",
"tname": "網(wǎng)易明星"
},
{
"alias": "每日給你推薦好看的電影",
"cid": "C1378977941637",
"ename": "dianyingtuijian",
"hasCover": false,
"subnum": "57.4萬(wàn)",
"tid": "T1401265158369",
"tname": "網(wǎng)易電影"
}
],
"topiclist_news": [
{
"alias": "MOVIE",
"cid": "C1348648351901",
"ename": "dianying",
"hasCover": false,
"subnum": "258萬(wàn)",
"tid": "T1348648650048",
"tname": "影視"
},
{
"alias": "Entertainment",
"cid": "C1348648351901",
"ename": "yule",
"hasCover": false,
"subnum": "超過(guò)1000萬(wàn)",
"tid": "T1348648517839",
"tname": "娛樂(lè)"
}
],
"users": [
],
"voicecomment": "off",
"votes": [
],
"ydbaike": [
]
}
}
為了方便大家查看代碼墨缘，我這里面不會(huì)寫(xiě)復(fù)雜的代碼布局，在這里就做簡(jiǎn)單的布局進(jìn)行展示零抬，在這里面要注意的就是數(shù)據(jù)中有一個(gè)字段body它里面的標(biāo)簽是后臺(tái)直接寫(xiě)好返回過(guò)來(lái)的镊讼，所以說(shuō)你只需要?jiǎng)討B(tài)插入到對(duì)應(yīng)的容器（ <div class="mui-content" id="container">
</div>）里面就可以了。
HTML代碼
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<span id="replyCount">0跟帖</span>
</header>
<div class="mui-content" id="container">
</div>
</body>
在數(shù)據(jù)解析中動(dòng)態(tài)添加的標(biāo)簽和內(nèi)容
//數(shù)據(jù)解析
function dataAnalyze(data,url_id){
//跟帖數(shù)量
console.log(data[url_id].replyCount);
$("#replyCount").html(data[url_id].replyCount+"跟帖");
//抬頭
$("#container").append('<h3>'+data[url_id].title+'</h3>');
//新聞事件data[url_id].ptime
$("#container").append('<span id="ptime">'+data[url_id].ptime+'</span>');
//圖片平夜，判斷是否有圖片蝶棋，有的話就添加
if(data[url_id].img.length != 0)
{
var arr = data[url_id].img;
for(var i = 0;i<arr.length;i++){
$("#container").append('<img src="'+data[url_id].img[i].src+'" alt="'+data[url_id].img[0].alt+'" />');
}
}
//主題內(nèi)容
$("#container").append(data[url_id].body);
}
設(shè)置CSS樣式
<style type="text/css">
#replyCount{
background-color: red;
color: white;
border-radius: 15px;
margin-top:10px;
padding: 5px;
float: right;
margin-right: 10px;
}
.mui-content{
top: 45px;
bottom: 0px;
}
body,#container,.mui-bar{
background-color: white;
}
#container p{
padding: 0 10px;
font-size: 14px;
}
#container img{
width: 90%;
display: block;
margin: 15px auto;
}
#container h3{
margin: 10px 0px 10px 10px;;
}
#ptime{
margin: 10px 10px;
}
</style>
效果如下：
效果
