微信小程序入门与实战之构建阅读详情页面

构建文章详情页面

由于通常我们的后端人员可能没办法先给我们提供数据，所以我们要采用先静后动的开发方式。
我们所要实现的效果，如图所示：

基础代码：

<view class="container">
  <image ></image>
  <view>
    <image></image>  
    <text></text>
    <text>发表于</text>
    <text></text>
  </view>
  <text></text>
  <view>
    <image></image>
    <image></image>
  </view>
  <text></text>
</view>

完善内容的填充：

<view class="container">
  <image src="/images/bestplayers.jpg"></image>
  <view>
    <image src="/images/avatar/1.png"></image>  
    <text>微信</text>
    <text>发表于</text>
    <text>16小时前</text>
  </view>
  <text>LPL夏季赛最佳阵容</text>
  <view>
    <image src="/images/collection (2).png"></image>
    <image src="/images/share.png"></image>
  </view>
  <text>8月9号，LPL常规赛收官之战结束，在事</text>
</view>

完成的效果：

接下来我们编写样式，使文章符合我们预期的效果，使用行的flex布局，设置顶部图片布满宽度，设置头像、作者、发表日期等的样式：

.container{
  display: flex;
  flex-direction: column;
}
.head-image{
  width: 100%;
  height: 460rpx;
}
.author-date{
  display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 20rpx;
   margin-left: 32rpx;
}
.avatar{
  width: 64rpx;
  height: 64rpx;
}
.author{
  font-size: 30rpx;
  font-weight: 300;
  margin-left: 20rpx;
  color: #666;
}
.const-text{
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}
.date{
  font-size: 24rpx;
  margin-left: 30rpx;
  color: #999;
}

实现效果：

Flex的高级应用

如果我们想实现下面的效果，我们该怎么做？

横线没有必要再用一张图片来实现，我们可以通过css样式来实现，这里我们通过View来实现。该View是有长和宽的，同时再添加一下背景色，这样一条横线就实现了。align-items: center设置主轴， justify-content: center;设置交叉轴。为了实现图标往右靠，我们要设置图标容器的宽度，再设置justify-content: flex-end，通过设置z-index来实现横线被图标压在上面：

.tool{
.horizon{
  width: 660rpx;
  height: 1px;
  background-color: #e5e5e5;
  position: absolute;
  z-index: -99;

}
.circle-img{
  height: 90rpx;
  width: 90rpx;
}
.circle{
  display: flex;
  width: 660rpx;
  flex-direction: row;
  justify-content: flex-end;
  
}
.tool{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

}

  <view class="tool">
  <view class="circle">
    <image class="circle-img"src="/images/collection (2).png"></image>
    <image class="circle-img" src="/images/share.png"></image>
  </view>
    <view class="horizon"></view>
  </view>

我们也可以不用设置图标的样式，直接设置circle容器下的image标签的属性也可以实现图标样式：

.circle image{
  height: 90rpx;
  width: 90rpx;
}

设置文章样式：

.detail{
  color: #666;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
}

最终总体实现效果：

组件的自定义属性data

由于我们文章详情页是可以由不同文章点击进来的，所以我们需要有文章的唯一ID号，当用户点击一篇文章后，我们获取到文章的id号，然后传入文章详情页。

那我们怎么在文章详情页获取到文章的id号呢？我们通过点击事件对象拿到id:

dataset
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：
data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

在界面onload函数中获取查询参数

页面与页面之间通信通过url来传递：

我们在页面加载的onload的函数中的options参数就可以拿到传过来的参数：

加载详情数据并填充页面

同样我们要导入数据的js文件
我们通过对应的id号来从List中获取数据：

接着我们再在页面的wxml绑定对应的动态数据，这样我们就能实现点击文章跳转到对应的文章详情页：