叢九九微信小程序demo實(shí)戰(zhàn)教程：Bilibili排行榜
發(fā)布時(shí)間：2018-03-29 17:41 所屬欄目：小程序開(kāi)發(fā)教程
最近微信小程序很火，于是趁機(jī)學(xué)了一下。然后做了個(gè)小的demo，實(shí)現(xiàn)了查看B站排行榜的功能。
項(xiàng)目地址 https://github.com/congjiujiu/bilibiliRank
由于沒(méi)有appid，所以沒(méi)法在微信里面預(yù)覽。可以clone到本地然后在微信web開(kāi)發(fā)工具里面看到項(xiàng)目。
- git clone https://github.com/congjiujiu/bilibiliRank.git yourappname
- cd yourappname
- 在微信web開(kāi)發(fā)工具里面新建項(xiàng)目，地址選到剛clone的地址
即可查看了。
效果gif可以看 github 的演示！
建立項(xiàng)目
先創(chuàng)建初始頁(yè)面，也就是兩部分，頂上圖片，以及下方列表。
用你喜愛(ài)的編輯器打開(kāi) pages/index/index.js，編輯一下
|
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
bili: {
list: [
{
id: 0,
name: '全區(qū)排行榜'
},
{
id: 1,
name: '番劇排行榜'
},
{
id: 2,
name: '原創(chuàng)視頻排行榜'
}
]}
},
onLoad: function () {
console.log('onLoad');
}
})
|
表明有三個(gè)列表項(xiàng)，然后就可以在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>
|
如上，一個(gè)header，通過(guò)設(shè)置background-image來(lái)設(shè)置頭圖，下方通過(guò)wx:for方法來(lái)循環(huán)生成一個(gè)列表。navigator標(biāo)簽，可以在點(diǎn)擊的時(shí)候跳轉(zhuǎn)到url指定的組件內(nèi)。類似于原生的a標(biāo)簽。
然后設(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:
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://www.szcjxy.com/wxmini/doc/course/22941.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
