这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战
书接上文。我们继续开发：
大家可以先看看效果：
热搜hot页面
开发热搜页面
首先我们在colorUI中找到合适的模板，这里我们使用了timeliness的样式，这样通过时间轴的样式体现了“当前最火”这个概念。看一下我们怎么使用colorUI这个组件的，下面是我们hot.wxml文件，里面有三个大的view，第一个用到了“背景”这个组件，第二个和第三个就是“时间轴组件”
<!-- 背景background组件 -->
<view class="bg-img bg-mask padding-tb-xl a" style="background-image: url('https://6f6e-online-yu1be-1304563260.tcb.qcloud.la/image/hug.jpg?sign=32d703591d7385c907ca97e3fc5c3628&t=1632045487');height: 414rpx;">
<view class="padding-xl text-white">
<view class="padding-xs">
我不创造梗，我只是梗的搬运工
</view>
</view>
</view>
<!-- 时间轴组件 -->
<view class="cu-timeline">
<view class="cu-time">当前最火</view>
</view>
<view class="cu-timeline">
<view class="cu-item" wx:for= "{{issues}}" wx:key="key">
<view class="content">
<view class="cu-capsule radius">
<view class="cu-tag bg-cyan">{{item.keyWord}}</view>
</view>
<view class="margin-top">{{item.description}}</view>
</view>
</view>
</view>
这里有几个点，第一背景组件使用的图片不能是本地图片，后面我们会讲怎么时候云存储保存一张图片，然后这里用到。第二个“时间轴”组件我们用到了wx:for属性，他其实就是个循环遍历，issues这个数组，把这个数组中的“梗”循环加载到我们页面上，形成一个一个的“时间轴”行，可以看一下效果：
开发热搜页面逻辑
可以想象，在hot.js文件中，我们要实现的逻辑就是获取当前最火的梗，去哪里拿呢？去云数据库上拿！我们把最火的梗都保存在云数据库上。我们来讲一下怎么使用云数据。
-
点击左上角云开发---->点击数据库\
-
点击新建一个名为punchline的集合
- 点击添加记录，创建一个下图一样的记录，注意“字段”不要填错。否则后面获取不到该记录
- 点击数据权限，使得用户可以查询到我们刚刚新建的数据
ok！我们的数据创建完毕了，现在开始读取这条记录。我们会在hot.js文件中覆盖复制下面的内容。我们来介绍一下下面的内容。data这里设置了一个issues变量，也就是我们刚刚说到的页面用来循环遍历展示的数组。
var db = wx.cloud.database() 初始化一个数据库连接实例，db.collection('punchline') 表示选择刚刚我们创建的punchline集合，orderBy('createTime', 'desc').get()表示根据createTime倒序获取全部数据（默认一次20条）。后面的代码就是解析数据，放在issues这个变量上，用来在页面上展示。
// pages/hot/hot.js
Component({
options: {
addGlobalClass: true,
},
data: {
issues :[],
},
attached() {
var db = wx.cloud.database() // 初始化db链接
db.collection('punchline').orderBy('createTime', 'desc').get().then(res => {
console.log("success")
var _collections = new Array()
for (var i = 0; i < res.data.length; i++) {
_collections.push(JSON.parse(JSON.stringify(res.data[i])))
}
this.setData({
issues: _collections,
})
}).catch(res=>{
console.log("fail")
})
},
})
这样我们就能在页面上看到效果了。所以理论上，只要我们数据库里有所有当前最火的梗，就能在我们页面上进行展示。
