这篇文章主要讲解了微信小程序文章详情功能的代码实例解析，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

list.js 首先获取文章的id，因为我们的数据是假数据所以用key值作为文章id

onPostTap: function (event) { var article_id = event.currentTarget.dataset.aid; wx.navigateTo({ url: '../article-detail/detail?aid=' + article_id, }) },

detail.wxml

<!--pages/article-detail/detail.wxml--><view> <image src="/images/post/sls.jpg" class="detail-img"></image></view><view class="avatar"> <image src="/images/avatar/2.png"></image> <text>{{detail.avatar}}</text> <text>发表于 {{detail.date}}</text> <image src="/images/icon/collection-anti.png"></image> <image src="/images/icon/share.png"></image></view><view class="title"> <text>{{detail.title}}</text></view><view class="content">{{detail.content}}</view><view class="pre-next"><text class="pre">上一篇：啊啊啊啊啊啊啊</text><text class="next">下一篇：哈哈哈哈哈</text></view>

detail.wxss

/* pages/article-detail/detail.wxss */ .detail-img { width: 100%; height: 400rpx;} .avatar { overflow: hidden;} .avatar image { float: left; width: 100rpx; height: 100rpx; margin-left: 20rpx;} .avatar image:nth-child(4) { float: right; width: 60rpx; height: 60rpx; margin-right: 20rpx;} .avatar image:nth-child(5) { float: right; width: 60rpx; height: 60rpx; vertical-align: middle;} .avatar text { float: left; font-size: 30rpx; height: 100rpx; line-height: 100rpx; padding-left: 15rpx;} .avatar text:nth-child(3) { font-size: 25rpx; color: gainsboro;} .title { width: 100%; clear: both;} .title text { display: flex; justify-content: center; align-items: center; color: rgb(171, 211, 224); font-size: 50rpx;}.content{ color:#666; letter-spacing: 2rpx; margin-top:20rpx; padding-left:20rpx; padding-right:20rpx; line-height:40rpx; font-size:25rpx; text-indent:50rpx;} .pre-next{ margin-top:20rpx;}.pre{ float:left; margin-left:20rpx; font-size: 25rpx; color:rgb(171, 211, 224); padding-bottom: 20rpx;} .next{ float: right; margin-right:20rpx; font-size: 25rpx; color:rgb(171, 211, 224); padding-bottom: 20rpx;}

detail.js

// pages/article-detail/detail.jsvar articleData = require("/../../data/article-data.js");Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //获取文章的id var aid = options.aid; var article = articleData.data[aid]; this.setData({detail:article}); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})

看完上述内容，是不是对微信小程序文章详情功能的代码实例解析有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。