叢九九微信小程序demo實戰(zhàn)教程：Bilibili排行榜
發(fā)布時間：2018-03-29 17:41 所屬欄目：小程序開發(fā)教程
最近微信小程序很火，于是趁機學(xué)了一下。然后做了個小的demo，實現(xiàn)了查看B站排行榜的功能。
項目地址 https://github.com/congjiujiu/bilibiliRank
由于沒有appid，所以沒法在微信里面預(yù)覽。可以clone到本地然后在微信web開發(fā)工具里面看到項目。
- git clone https://github.com/congjiujiu/bilibiliRank.git yourappname
- cd yourappname
- 在微信web開發(fā)工具里面新建項目，地址選到剛clone的地址
即可查看了。
效果gif可以看 github 的演示！
建立項目
先創(chuàng)建初始頁面，也就是兩部分，頂上圖片，以及下方列表。
用你喜愛的編輯器打開 pages/index/index.js，編輯一下
|
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
bili: {
list: [
{
id: 0,
name: '全區(qū)排行榜'
},
{
id: 1,
name: '番劇排行榜'
},
{
id: 2,
name: '原創(chuàng)視頻排行榜'
}
]}
},
onLoad: function () {
console.log('onLoad');
}
})
|
表明有三個列表項，然后就可以在index.wxml里面獲得數(shù)據(jù)了
|
<!--index.wxml-->
<view class="container">
<view class="header"></view>
<view class="content">
<view class="cmds">
<navigator wx:for="{{bili.list}}" url="../ranklist/ranklist?id={{item.id}}">
<view class="cmd-list" data-id="{{item.id}}">{{item.name}}</view>
</navigator>
</view>
</view>
</view>
|
如上，一個header，通過設(shè)置background-image來設(shè)置頭圖，下方通過wx:for方法來循環(huán)生成一個列表。navigator標簽，可以在點擊的時候跳轉(zhuǎn)到url指定的組件內(nèi)。類似于原生的a標簽。
然后設(shè)置一下css，在app.wxss內(nèi)：
|
/**app.wxss**/
.container {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", Monaco;
height: 100%;
}
.header {
height: 140px;
width: 100%;
background-image: url(images/logo.jpg);
background-size:
|
