4.微信小程序-B站：先把首頁造出來

(小安娜：失蹤人口已上線，大家快來噴噴噴他！)，sorry++，最近身邊發生太多事情，導致這最關鍵的實戰開篇都未寫，（小安娜-分身1：懶就是懶，不負責任，我之前學的都忘了），(小安娜-分身2：上一篇雙11發完就消失了，不會是兼職送快遞去了吧)，(小安娜-分身3：退訂差評，再也不跟你學了)…，好了好了，有事回了趟老家才回來，不說這個，咋們繼續小程序開發。（小安娜：是回去相親了吧！）

效果圖（也可直接跳過）

效果圖太長，影響閱讀，自行戳開鏈接

開發前熱身

打開B站移動版網站：http://m.bilibili.com/index.html，打開應該是個這樣的畫面，也是我們今天要完成的界面：

（小安娜：不對啊，我打開的是電腦版的），不會吧「我呆住一分鍾」，哦直接打開網站會跳轉到PC版本，要用手機或Chrome開發工具中的Toggle device toolbar打開才可正常訪問，（小安娜：不可能用手機打開調試吧，Toggle device toolbar是什么？），Toggle device toolbar是我們開發移動網頁必備工具，可以模擬各種移動設備，Chrome自帶無需另外安裝，整個調試界面是這樣的：

（小安娜：原來如此，6個箭頭成功吸引了本小姐的注意）

接着來分析下頁面結構，看項目需要怎么創建模板，下圖是首頁和直播頁對比：

發現頂部綠色區域和底部藍色區域每個界面都有並且是一樣的，中間內容區域①和②是一種結構，③和④是一種結構，（小安娜：好意思提1、2、3、4，字寫的丑就打字，還有我發現頂部又是綠色的！很喜歡頂部是綠咩？），所以我會建立3個模板文件：header.wxml、footer.wxml、item.wxml，（小安娜：頭部、底部、1和2、3和4，不是4個文件嗎？），你這樣歸納也可以，但文件太多難管理，我把內容區域歸納為一個item.wxml文件，別忘記了一個wxml文件可以寫多個<template>，所以我建立的目錄結構是這樣的：

（小安娜：resources文件夾是什么，沒見你提過？），用來放靜態資源文件的，（小安娜：靜態資源文件？？？啥意思），目前來說就是放項目所需圖片，（小安娜：裝13，早說放圖片不就行了。）

為了接下來更好學習，建議此時應該打開官方組件文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
由於這是實戰篇，不會太多介紹組件怎么使用，所以當出現不熟悉的組件時，可以去官方文檔查閱。（小安娜：已打開，還添加到書簽了），感動啊，難得一次不噴我還順着我，（小安娜：因為是微信官方的文檔啊），我~風中凌亂.jpg

頭部header.wxml

替換前的HTML代碼：

<!-- 頂部工具欄 --> <nav class="nav-bar"> <div class="nav-wrp"> <a href="http://m.bilibili.com/index.html" class="logo"></a> <a class="cell" href="http://www.bilibili.com/mobile/history.html"><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> <!-- 導航菜單 --> <div class="flex-bar main"> <ul class="flex-bar-in"> <li class="nav-item nav-index on"><a href="http://m.bilibili.com/index.html" title="首頁">首頁</a></li> <li class="nav-item nav-channel"><a href="http://m.bilibili.com/channel.html" title="頻道">頻道</a></li> <li class="nav-item nav-live"><a href="http://live.bilibili.com" title="直播">直播</a></li> <li class="nav-item nav-rank"><a href="http://bilibili.com/mobile/ranking.html" title="排行">排行</a></li> <li class="nav-item nav-space"><a href="http://bilibili.com/mobile/myspace.html" title="我的">我的</a></li> </ul> </div> 

<nav>、<div>、<ui>、<li>、<i>都可替換成容器組件：<view>；<a>可替換成導航組件：<navigator>，保留原標簽的class屬性，（小安娜：那<a>標簽的href屬性呢？），在<navigator>可用url屬性替換，不同的是<navigator>只能跳轉應用內頁面鏈接，url不能隨便寫一個http://ctt.jieerf.com這樣的鏈接跳轉過去，（小安娜：啊···，怎么解決呢？像我們之前做的App中幫助和反饋都是網頁做好，App中跳轉網頁。），我目前還沒發現能跳轉外站點的組件，唯一的解決方法是在微信小程序里重寫頁面，（小安娜：是你學藝不精不知道吧，別教壞我啦，還是得求助現場大神們）（小安娜-求助畫面：求大神留言指點，怎么解決微信跳轉外部鏈接，如解決必當重謝！），你行啊，其實我們轉換下想想，真很少機會用到跳轉外部鏈接，App中用到網頁的地方最大的出發點是為了：跨平台。現在小程序已經做到跨平台了，真沒必要用到內嵌外部網頁了。（小安娜：好像也有道理，但是我還是想知道，如果可以做到，那么你會很丟臉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 --> <!-- 導航菜單-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> <!-- 導航菜單-end --> 

（小安娜：替換前后對比很久，發現你把<a>標簽替換成<navigator>后class屬性值多加了個a，<li>替換成<view>后class屬性值多加了個li，這是有什么特殊意思嗎？還有搜索框原本是<a>標簽但是你替換成了<view>組件，不是說<a>替換<navigator>組件嗎？），不錯不錯，你還蠻細心的，這是因為官方CSS中有元素選擇器：.flex-bar .flex-bar-in a，這樣做wxss文件改動最小：.flex-bar .flex-bar-in .a。至於搜索、觀看歷史兩個按鈕，為什么搜索按鈕用<view>代替，我們去使用一下官方網站就明白了：

①是觸發搜索按鈕后界面，②是觸發觀看歷史按鈕后界面。注意看箭頭所指紅色框內，①地址沒改變，②地址發生了改變。這就表示搜索界面只是顯示/隱藏狀態切換，而觀看記錄是頁面間的跳轉。（小安娜：哦哦，也就是①可以用組件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 href="http://www.bilibili.com/blackboard/activity-yourname.html" data-index="0" style="width: 375px; left: 0px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);"> <img src="http://i0.hdslb.com/bfs/archive/174612a1f12e8cfd8861f4df7563d9e4b88c052f.jpg" alt="我們請你看電影"> </a><a href="http://blhx.biligame.com/yuyue" data-index="1" style="width: 375px; left: -375px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);"> <img src="http://i0.hdslb.com/bfs/archive/327b936f88b841ace06160b1dab3d494d14a6e1f.jpg" alt="少女海戰預約開啟"> </a><a href="http://www.bilibili.com/blackboard/activity-B14MLBEMe.html" data-index="2" style="width: 375px; left: -750px; transition-duration: 0ms; transform: translate(375px, 0px) translateZ(0px);"> <img src="http://i0.hdslb.com/bfs/archive/c9ee4349981a65626265997283634d8e29422241.jpg" alt="番劇彈幕禁水試行規則"> </a><a href="http://www.bilibili.com/blackboard/activity-Hy8hXpczg.html" data-index="3" style="width: 375px; left: -1125px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);"> <img src="http://i0.hdslb.com/bfs/archive/60044b537519cfe1baa8602b26b79da55c81c00f.jpg" alt="毒毒更健康~"> </a><a href="http://bangumi.bilibili.com/moe/2016/jp/index" data-index="4" style="width: 375px; left: -1500px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);"> <img src="http://i0.hdslb.com/bfs/archive/77e825a2579bc08e78baba9ce28319d2b27c914b.jpg" alt="海選第10天！"> </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 //獲取應用實例 var app = getApp() Page({ data: { /* 滾動廣告配置 */ // 圖片數據集合 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 () {} }) 

（小安娜：我運行代碼，但我發現，官方的底部有5個小圓點表示總共5圖片，當前是第幾張，上面代碼沒這個效果？），你可以把swiper的indicator-dots="{{true}}"改成true，就會顯示指示點了，但我個人覺得比較不好看，所以默認就不顯示了。（小安娜：雖然你沒一點審美，但這次還比較認同你，沒辦法修改嗎？），暫時還沒有，官方文檔也未說明，（小安娜：好吧，只能先這樣了）。

內容Body（←划重點）

官網內容區域包含很多分類，但很多結構是一樣的，這里選3個具有代表性不同結構的分類：

• 熱門推薦
• 正在直播
• 番劇更新

原配方效果圖：

還記得我們一開始創建item.wxml內容模板文件，現在要在里面添加熱門推薦、在線直播、番劇更新模板：

<!-- 熱門推薦、動畫區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}}等這種是什么意思？），之前我們講過使用模板時候可以傳入數據data給模板，定義模板時先規范好模板里面使用數據的格式，其他地方想用name='jiefItem1'模板就必須按照{coverImg: '',title: '',playNum: '',commentNum: ''}這種規范傳入數據。（小安娜：隔這么久早忘了，那要怎么使用呢？），怎么使用這太簡單了，就留給你去完成吧，咋們之前學過的，給你5分鍾思考。（小安娜：切~，你以為這能難住本小姐）「滴答滴答…小安娜剛進入思考模式」，小安娜算了吧，看你的表情感覺要思考很久，直接公布答案吧。

在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"> <!-- 使用熱門推薦模板，傳入當前循環對象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"> <!-- 使用正在直播模板，傳入當前循環對象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"> <!-- 使用正在直播模板，傳入當前循環對象item --> <template is="jiefItem3" data="{{...item}}"/> </block> </view> </view> <!-- 番劇更新 end --> 

index.js中添加數據源：

//index.js //獲取應用實例 var app = getApp() Page({ data: { /* 內容Body數據 */ // 熱門推薦 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: '更新至第 關羽篇話', 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 () {} }) 

中間內容部分到這里就完成了！（小安娜：我怎么感覺我被套路了！）

底部footer.wxml

原配方效果圖：

我們是微信小程序，所以肯定不會有電腦版、客戶端這些鏈接出現。（小安娜：其實是你沒辦法加，因為跳轉不了外部鏈接2333~）

<!-- 底部-begin --> <view class="footer"> <view>嗶哩嗶哩彈幕視頻網 滬ICP備13002172號-3</view> <view>信息網絡傳播視聽節目許可證：0910417</view> <view>【微信小程序】完全模仿B站移動Web端網站</view> <view>made in 傑爾夫CTT（ctt.jieerf.com）</view> </view> <!-- 底部-end --> 

（小安娜：↑↑↑超鄙視上面代碼，又在里面加廣告），噓~你是不是自己人啊，寫了這么多沒功勞也有苦勞，就讓我宣傳宣傳我們自己嘛。（小安娜：我是傑爾夫CTT一員，我喂自己袋鹽！）

小安娜有問題

為什么沒講解把CSS替換成WXSS？

傑爾夫君：因為大部分CSS都可以在WXSS文件中使用，如果講太多CSS替換成WXSS會導致篇幅太長，非常影響閱讀體驗，我會把所有代碼都上傳到Git，詳細代碼請參考：

• Github：https://github.com/jieerf/weapp-jief-bilibili
• git.oschina：https://github.com/jieerf/weapp-jief-bilibili

如有任何閱讀問題或意見反饋，歡迎加QQ群：301926812