(小安娜：失蹤人口已上線，大家快來噴噴噴他！)，sorry++，最近身邊發(fā)生太多事情，導(dǎo)致這最關(guān)鍵的實戰(zhàn)開篇都未寫，（小安娜-分身1：懶就是懶，不負(fù)責(zé)任，我之前學(xué)的都忘了），(小安娜-分身2：上一篇雙11發(fā)完就消失了，不會是兼職送快遞去了吧)，(小安娜-分身3：退訂差評，再也不跟你學(xué)了)...，好了好了，有事回了趟老家才回來，不說這個，咋們繼續(xù)小程序開發(fā)。（小安娜：是回去相親了吧！）
效果圖（也可直接跳過）
開發(fā)前熱身
打開B站移動版網(wǎng)站：http://m.bilibili.com/index.html，打開應(yīng)該是個這樣的畫面，也是我們今天要完成的界面：
（小安娜：不對啊，我打開的是電腦版的），不會吧「我呆住一分鐘」，哦直接打開網(wǎng)站會跳轉(zhuǎn)到PC版本，要用手機或Chrome開發(fā)工具中的Toggle device toolbar打開才可正常訪問，（小安娜：不可能用手機打開調(diào)試吧，Toggle device toolbar是什么？），Toggle device toolbar是我們開發(fā)移動網(wǎng)頁必備工具，可以模擬各種移動設(shè)備，Chrome自帶無需另外安裝，整個調(diào)試界面是這樣的：
（小安娜：原來如此，6個箭頭成功吸引了本小姐的注意）
接著來分析下頁面結(jié)構(gòu)，看項目需要怎么創(chuàng)建模板，下圖是首頁和直播頁對比：
發(fā)現(xiàn)頂部綠色區(qū)域和底部藍(lán)色區(qū)域每個界面都有并且是一樣的，中間內(nèi)容區(qū)域①和②是一種結(jié)構(gòu)，③和④是一種結(jié)構(gòu)，（小安娜：好意思提1、2、3、4，字寫的丑就打字，還有我發(fā)現(xiàn)頂部又是綠色的！很喜歡頂部是綠咩？），所以我會建立3個模板文件：header.wxml、footer.wxml、item.wxml，（小安娜：頭部、底部、1和2、3和4，不是4個文件嗎？），你這樣歸納也可以，但文件太多難管理，我把內(nèi)容區(qū)域歸納為一個item.wxml文件，別忘記了一個wxml文件可以寫多個<template>，所以我建立的目錄結(jié)構(gòu)是這樣的：
（小安娜：resources文件夾是什么，沒見你提過？），用來放靜態(tài)資源文件的，（小安娜：靜態(tài)資源文件？？？啥意思），目前來說就是放項目所需圖片，（小安娜：裝13，早說放圖片不就行了。）
為了接下來更好學(xué)習(xí)，建議此時應(yīng)該打開官方組件文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
由于這是實戰(zhàn)篇，不會太多介紹組件怎么使用，所以當(dāng)出現(xiàn)不熟悉的組件時，可以去官方文檔查閱。（小安娜：已打開，還添加到書簽了），感動啊，難得一次不噴我還順著我，（小安娜：因為是微信官方的文檔啊），我~風(fēng)中凌亂.jpg
頭部header.wxml
替換前的HTML代碼：
<!-- 頂部工具欄 -->
<nav class="nav-bar">
<div class="nav-wrp">
<a class="logo"></a>
<a class="cell" ><i class="nav-icon bili-icon-history"></i></a>
<a class="cell" toggle-switch=".search" href="javascript: void(0);"><i class="nav-icon bili-icon-search"></i></a>
</div>
</nav>
<!-- 導(dǎo)航菜單 -->
<div class="flex-bar main">
<ul class="flex-bar-in">
<li class="nav-item nav-index on"><a title="首頁">首頁</a></li>
<li class="nav-item nav-channel"><a title="頻道">頻道</a></li>
<li class="nav-item nav-live"><a title="直播">直播</a></li>
<li class="nav-item nav-rank"><a title="排行">排行</a></li>
<li class="nav-item nav-space"><a title="我的">我的</a></li>
</ul>
</div>
<nav>、<div>、<ui>、<li>、<i>都可替換成容器組件：<view>；<a>可替換成導(dǎo)航組件：<navigator>，保留原標(biāo)簽的class屬性，（小安娜：那<a>標(biāo)簽的href屬性呢？），在<navigator>可用url屬性替換，不同的是<navigator>只能跳轉(zhuǎn)應(yīng)用內(nèi)頁面鏈接，url不能隨便寫一個http://ctt.jieerf.com這樣的鏈接跳轉(zhuǎn)過去，（小安娜：啊···，怎么解決呢？像我們之前做的App中幫助和反饋都是網(wǎng)頁做好，App中跳轉(zhuǎn)網(wǎng)頁。），我目前還沒發(fā)現(xiàn)能跳轉(zhuǎn)外站點的組件，唯一的解決方法是在微信小程序里重寫頁面，（小安娜：是你學(xué)藝不精不知道吧，別教壞我啦，還是得求助現(xiàn)場大神們）（小安娜-求助畫面：求大神留言指點，怎么解決微信跳轉(zhuǎn)外部鏈接，如解決必當(dāng)重謝！），你行啊，其實我們轉(zhuǎn)換下想想，真很少機會用到跳轉(zhuǎn)外部鏈接，App中用到網(wǎng)頁的地方最大的出發(fā)點是為了：跨平臺。現(xiàn)在小程序已經(jīng)做到跨平臺了，真沒必要用到內(nèi)嵌外部網(wǎng)頁了。（小安娜：好像也有道理，但是我還是想知道，如果可以做到，那么你會很丟臉2333333~）
替換后的wxml代碼：
<!-- 頂部工具條-begin -->
<view class="nav-bar">
<view class="nav-wrp">
<!-- LOGO -->
<navigator class="a logo"></navigator>
<!-- 觀看歷史 -->
<navigator class="a cell">
<view class="nav-icon bili-icon-history"></view>
</navigator>
<!-- 搜索框 -->
<view class="a cell">
<view class="nav-icon bili-icon-search"></view>
</view>
</view>
</view>
<!-- 頂部工具條-end -->
<!-- 導(dǎo)航菜單-begin -->
<view class="flex-bar main">
<view class="flex-bar-in">
<view class="li nav-item on">
<navigator url="" class="a">首頁</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">頻道</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">直播</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">排行</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">我的</navigator>
</view>
</view>
</view>
<!-- 導(dǎo)航菜單-end -->
（小安娜：替換前后對比很久，發(fā)現(xiàn)你把<a>標(biāo)簽替換成<navigator>后class屬性值多加了個a，<li>替換成<view>后class屬性值多加了個li，這是有什么特殊意思嗎？還有搜索框原本是<a>標(biāo)簽但是你替換成了<view>組件，不是說<a>替換<navigator>組件嗎？），不錯不錯，你還蠻細(xì)心的，這是因為官方CSS中有元素選擇器：.flex-bar .flex-bar-in a，這樣做wxss文件改動最小：.flex-bar .flex-bar-in .a。至于搜索、觀看歷史兩個按鈕，為什么搜索按鈕用<view>代替，我們?nèi)ナ褂靡幌鹿俜骄W(wǎng)站就明白了：
①是觸發(fā)搜索按鈕后界面，②是觸發(fā)觀看歷史按鈕后界面。注意看箭頭所指紅色框內(nèi)，①地址沒改變，②地址發(fā)生了改變。這就表示搜索界面只是顯示/隱藏狀態(tài)切換，而觀看記錄是頁面間的跳轉(zhuǎn)。（小安娜：哦哦，也就是①可以用組件hidden屬性，②用<navigator>組件對吧？），沒錯了，給你個贊。（小安娜：哎~沒辦法，智商這東西你能跟得上嗎！）
滾動廣告Swiper
原配方效果圖：
替換前的HTML代碼：
<div id="sliderWrapper" class="slider-wrapper">
<div class="slider-bg"></div>
<div>
<div id="slider" class="swipe" style="visibility: visible;">
<div class="swipe-wrap" style="width: 1875px;">
<a data-index="0" style="width: 375px; left: 0px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
</a><a data-index="1" style="width: 375px; left: -375px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
</a><a data-index="2" style="width: 375px; left: -750px; transition-duration: 0ms; transform: translate(375px, 0px) translateZ(0px);">
</a><a data-index="3" style="width: 375px; left: -1125px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
</a><a data-index="4" style="width: 375px; left: -1500px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
</a>
</div>
</div>
<div class="swipe-btn-wrapper">
<div class="swipe-btn-list">
<a></a><a class="on"></a><a></a><a></a><a></a>
</div>
</div>
</div>
</div>
由于微信官方提供一個滑動組件：swiper，這里會用官方組件重新寫此功能。
重寫后的wxml代碼：
<!-- 滾動廣告 begin -->
<view class="slider-wrapper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 滾動廣告 end -->
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
/* 滾動廣告配置 */
// 圖片數(shù)據(jù)集合
imgUrls: [
'http://i0.hdslb.com/bfs/archive/9bab17a99758cc7a72531d15d2d5a85d73b78ded.jpg',
'http://i0.hdslb.com/bfs/archive/57d8001838ff81c64bef2682070e53efbe2736b7.jpg',
'http://i0.hdslb.com/bfs/archive/499730dbcd76823664c48e661726a37164158795.jpg',
'http://i0.hdslb.com/bfs/archive/c9682eac8f46fd2b261b739c5c88e21adaffab53.jpg',
'http://i0.hdslb.com/bfs/archive/414cf391f88bb098ded766b1d7effd9216be34ef.jpg'
],
// 是否顯示面板指示點
indicatorDots: false,
// 是否自動切換
autoplay: true,
// 自動切換時間間隔
interval: 5000,
// 滑動動畫時長
duration: 1000
},
onLoad: function () {}
})
（小安娜：我運行代碼，但我發(fā)現(xiàn)，官方的底部有5個小圓點表示總共5圖片，當(dāng)前是第幾張，上面代碼沒這個效果？），你可以把swiper的indicator-dots="{{true}}"改成true，就會顯示指示點了，但我個人覺得比較不好看，所以默認(rèn)就不顯示了。（小安娜：雖然你沒一點審美，但這次還比較認(rèn)同你，沒辦法修改嗎？），暫時還沒有，官方文檔也未說明，（小安娜：好吧，只能先這樣了）。
內(nèi)容Body（←劃重點）
官網(wǎng)內(nèi)容區(qū)域包含很多分類，但很多結(jié)構(gòu)是一樣的，這里選3個具有代表性不同結(jié)構(gòu)的分類：
- 熱門推薦
- 正在直播
- 番劇更新
原配方效果圖：
還記得我們一開始創(chuàng)建item.wxml內(nèi)容模板文件，現(xiàn)在要在里面添加熱門推薦、在線直播、番劇更新模板：
<!-- 熱門推薦、動畫區(qū)Item -->
<template name="jiefItem1">
<!-- List Item begin -->
<view class="content-list">
<navigator class="item">
<view class="top">
<view class="cover-img"
style="opacity: 1; background-image: url({{coverImg}});">
</view>
</view>
<view class="info">
<view class="title">{{title}}</view>
<view class="meta clearfix">
<view class="cell left">
<view class="bilibili-index-sprite bilibili-index-play"></view>
<text>{{playNum}}</text>
</view>
<view class="cell left">
<view class="bilibili-index-sprite bilibili-index-danmu"></view>
<text>{{commentNum}}</text>
</view>
</view>
</view>
</navigator>
</view>
<!-- List Item end -->
</template>
<!-- 直播Item -->
<template name="jiefItem2">
<!-- List Item begin -->
<view class="content-list">
<navigator class="item">
<view class="top">
<view class="cover-img"
style="opacity: 1; background-image: url({{coverImg}});">
</view>
</view>
<view class="info">
<view class="avatar">
<image mode="scaleToFill" src="{{avatarImg}}"></image>
</view>
<view class="user">
<view class="name text-overflow">{{name}}</view>
<view class="desp text-overflow">{{desp}}</view>
</view>
<view class="online text-overflow">{{online}}</view>
</view>
</navigator>
</view>
<!-- List Item end -->
</template>
<!-- 番劇更新Item -->
<template name="jiefItem3">
<!-- List Item begin -->
<view class="content-list bangumi-list">
<navigator class="item">
<view class="top">
<view class="cover-img"
style="opacity: 1; background-image: url({{coverImg}});">
</view>
</view>
<view class="info">
<view class="bangumi-title text-overflow">{{bangumiTitle}}</view>
<view class="bangumi-page text-overflow">{{bangumiPage}}</view>
</view>
</navigator>
</view>
<!-- List Item end -->
</template>
（小安娜：{{coverImg}}、{{title}}等這種是什么意思？），之前我們講過使用模板時候可以傳入數(shù)據(jù)data給模板，定義模板時先規(guī)范好模板里面使用數(shù)據(jù)的格式，其他地方想用name='jiefItem1'模板就必須按照{coverImg: '',title: '',playNum: '',commentNum: ''}這種規(guī)范傳入數(shù)據(jù)。（小安娜：隔這么久早忘了，那要怎么使用呢？），怎么使用這太簡單了，就留給你去完成吧，咋們之前學(xué)過的，給你5分鐘思考。（小安娜：切~，你以為這能難住本小姐）「滴答滴答...小安娜剛進(jìn)入思考模式」，小安娜算了吧，看你的表情感覺要思考很久，直接公布答案吧。
在index.wxml接著添加代碼：
<!-- 熱門推薦 begin -->
<view class="row-container">
<navigator class="header">
<view class="left">
<view class="bilibili-index-sprite bilibili-index-hot"></view>
<text>熱門推薦</text>
</view>
<view class="right hot">
<view class="bilibili-index-sprite bilibili-index-ranking"></view>
<text>排行榜</text>
</view>
</navigator>
<view class="content-wrapper">
<block wx:for="{{hotList}}" wx:key="avid">
<!-- 使用熱門推薦模板，傳入當(dāng)前循環(huán)對象item -->
<template is="jiefItem1" data="{{...item}}"/>
</block>
</view>
</view>
<!-- 熱門推薦 end -->
<!-- 正在直播 begin -->
<view class="row-container">
<navigator class="header">
<view class="left">
<view class="bilibili-index-sprite bilibili-index-live"></view>
<text>正在直播</text>
</view>
<view class="right">
<text>查看更多直播</text>
<view class="bilibili-index-sprite bilibili-index-arrow"></view>
</view>
</navigator>
<view class="content-wrapper">
<block wx:for="{{liveList}}" wx:key="avid">
<!-- 使用正在直播模板，傳入當(dāng)前循環(huán)對象item -->
<template is="jiefItem2" data="{{...item}}"/>
</block>
</view>
</view>
<!-- 正在直播 end -->
<!-- 番劇更新 begin -->
<view class="row-container">
<navigator class="header">
<view class="left">
<view class="bilibili-index-sprite bilibili-index-bangumi"></view>
<text>番劇更新</text>
</view>
<view class="right">
<text>查看更多番劇</text>
<view class="bilibili-index-sprite bilibili-index-arrow"></view>
</view>
</navigator>
<view class="content-wrapper">
<block wx:for="{{bangumiList}}" wx:key="avid">
<!-- 使用正在直播模板，傳入當(dāng)前循環(huán)對象item -->
<template is="jiefItem3" data="{{...item}}"/>
</block>
</view>
</view>
<!-- 番劇更新 end -->
index.js中添加數(shù)據(jù)源：
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
/* 內(nèi)容Body數(shù)據(jù) */
// 熱門推薦
hotList: [
{
coverImg: 'http://i2.hdslb.com/bfs/archive/1239539a2f262d933bca7c2c1e290139420ba76a.jpg_320x200.jpg',
title: '【樂正綾】《華夏之章》【小旭PRO】【絳舞亂丸】',
playNum: '4.7萬',
commentNum: '977',
avid: 'av1'
},
{
coverImg: 'http://i1.hdslb.com/bfs/archive/ecce95b426faf188e6c28f9d3a0bdc63c5a72bb3.jpg_320x200.jpg',
title: '【斗圖歌】裝逼不如斗圖',
playNum: '4.7萬',
commentNum: '977',
avid: 'av2'
},
{
coverImg: 'http://i0.hdslb.com/bfs/archive/11bf8d41fffcad31976317760e301e2db64be8c8.png_320x200.png',
title: '【胖胖球】【雙子星】【獒龍】荒島 - El transcurrir de las horas',
playNum: '4.7萬',
commentNum: '977',
avid: 'av3'
},
{
coverImg: 'http://i0.hdslb.com/bfs/archive/e73a92b0ed615b4d6568888906d09f84d0835674.jpg_320x200.jpg',
title: '撩人凈土系列【紅菱歌舞伎初音】極樂凈土【大神犬PV付】MME配布',
playNum: '4.7萬',
commentNum: '977',
avid: 'av4'
}
],
// 正在直播
liveList: [
{
coverImg: 'http://i0.hdslb.com/bfs/live/96025d17ed05961230a7d1401ca1fe3b79cc12db.jpg',
avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
name: '尤櫻',
desp: '你女朋友在直播你不來看看嗎？',
online: '877',
avid: 'av5'
},
{
coverImg: 'http://i0.hdslb.com/bfs/live/a1678768dd9c7023af7ab0f3de2a2df2c525e741.jpg',
avatarImg: 'http://i0.hdslb.com/bfs/face/d1bec5ec111987537ecf3e7f43a8b3678ed3c5c3.jpg',
name: '我是小麥伊哦哦',
desp: '告別:我愛你們',
online: '877',
avid: 'av6'
},
{
coverImg: 'http://i0.hdslb.com/bfs/live/89047f3faee35d0cb095d7dfb01ec4d3a8ec4434.jpg',
avatarImg: 'http://i0.hdslb.com/bfs/face/1e31ac069058528e26b9be60b26d86c9c9a99f62.jpg',
name: '坂本叔',
desp: '【坂本】非洲黑客',
online: '877',
avid: 'av7'
},
{
coverImg: 'http://i0.hdslb.com/bfs/live/24dbcc68325ff5fb3d235af97ad075dc5087733a.jpg',
avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
name: 'miriちゃん',
desp: '日語點歌姬',
online: '877',
avid: 'av8'
}
],
// 番劇更新
bangumiList: [
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/4d06e660b8da9cb5335552f4ebde89bbcb2e9d4f.jpg',
bangumiTitle: '雙星之陰陽師',
bangumiPage: '更新至第34話',
avid: 'av9'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/0e6bce5d018796dda7782aa5c97bfdd14691348a.jpg',
bangumiTitle: '口水三國',
bangumiPage: '更新至第 關(guān)羽篇話',
avid: 'av10'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/367387d69ac43c160a453d14cb34256abaca3b4a.jpg',
bangumiTitle: '雙星之陰陽師',
bangumiPage: '更新至第34話',
avid: 'av11'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/4937bf71a4a5a6a426d09e9a78d27696b4746507.jpg',
bangumiTitle: '雙星之陰陽師',
bangumiPage: '更新至第34話',
avid: 'av12'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/2ed6be9050dfa4afe6e2651741d81843a0e81c67.jpg',
bangumiTitle: '黑白來看守所',
bangumiPage: '更新至第9話',
avid: 'av13'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/2673ac643b48eb5bda64c960a2ca850fbebb839d.jpg',
bangumiTitle: '夏目友人帳 伍',
bangumiPage: '更新至第8話',
avid: 'av14'
}
]
},
onLoad: function () {}
})
中間內(nèi)容部分到這里就完成了！（小安娜：我怎么感覺我被套路了！）
底部footer.wxml
原配方效果圖：
我們是微信小程序，所以肯定不會有電腦版、客戶端這些鏈接出現(xiàn)。（小安娜：其實是你沒辦法加，因為跳轉(zhuǎn)不了外部鏈接2333~）
<!-- 底部-begin -->
<view class="footer">
<view>嗶哩嗶哩彈幕視頻網(wǎng) 滬ICP備13002172號-3</view>
<view>信息網(wǎng)絡(luò)傳播視聽節(jié)目許可證：0910417</view>
<view>【微信小程序】完全模仿B站移動Web端網(wǎng)站</view>
<view>made in 杰爾夫CTT</view>
</view>
<!-- 底部-end -->
（小安娜：↑↑↑超鄙視上面代碼，又在里面加廣告），噓~你是不是自己人啊，寫了這么多沒功勞也有苦勞，就讓我宣傳宣傳我們自己嘛。（小安娜：我是杰爾夫CTT一員，我喂自己袋鹽！）
小安娜有問題
為什么沒講解把CSS替換成WXSS？
杰爾夫君：因為大部分CSS都可以在WXSS文件中使用，如果講太多CSS替換成WXSS會導(dǎo)致篇幅太長，非常影響閱讀體驗，我會把所有代碼都上傳到Git，詳細(xì)代碼請參考：
如有任何閱讀問題或意見反饋，歡迎加QQ群：301926812
