丛九九微信小程序demo实战教程：Bilibili排行榜
发布时间：2018-03-29 17:41 所属栏目：小程序开发教程
最近微信小程序很火，于是趁机学了一下。然后做了个小的demo，实现了查看B站排行榜的功能。
项目地址 https://github.com/congjiujiu/bilibiliRank
由于没有appid，所以没法在微信里面预览。可以clone到本地然后在微信web开发工具里面看到项目。
- git clone https://github.com/congjiujiu/bilibiliRank.git yourappname
- cd yourappname
- 在微信web开发工具里面新建项目，地址选到刚clone的地址
即可查看了。
效果gif可以看 github 的演示！
建立项目
先创建初始页面，也就是两部分，顶上图片，以及下方列表。
用你喜爱的编辑器打开 pages/index/index.js，编辑一下
|
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
bili: {
list: [
{
id: 0,
name: '全区排行榜'
},
{
id: 1,
name: '番剧排行榜'
},
{
id: 2,
name: '原创视频排行榜'
}
]}
},
onLoad: function () {
console.log('onLoad');
}
})
|
表明有三个列表项，然后就可以在index.wxml里面获得数据了
|
<!--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，通过设置background-image来设置头图，下方通过wx:for方法来循环生成一个列表。navigator标签，可以在点击的时候跳转到url指定的组件内。类似于原生的a标签。
然后设置一下css，在app.wxss内：
|
/**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:
|
