【小程序开发之文章详情页面的设计】文章详情页面如何布局

本篇博客是小程序开发系列的第四篇，在上一篇博客中介绍的是首页的制作，除了展示轮播图图片，食谱的封面、名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面。

除了在首页的js里面编写跳转函数之外（函数用来获取轮播图/食谱/文章的id，并携带id进行页面跳转）我们还需要创建page，制作详情页面。

页面效果

在我的小程序中，文章详情页顶部的图片是一张固定的图片（也就是每篇文章的详情页顶部都使用同一张图片作为装饰）大家可以根据需要自行修改图片。

然后顶部图片下面展示的是文章标题，标题下面展示的是文章内容（文章标题、文章内容都是存放在数据库的数据，文章内容是富文本类型，因此该字段里面既有文字也有图片）

跳转到文章详情页，跳转到轮播图详情页，跳转到食谱详情页都是一样的办法，下面就用跳转到文章详情页来作例子来讲解吧。

步骤1 完成页面的布局

我参考了其他人制作的详情页，删除了一些我用不到的部分，然后拿来展示我的文章。附上原文博客（里面有详细的WXML、WXSS代码） 在这里就不具体展示我的代码了

(42条消息) 微信小程序新闻详情页面效果实现_傅晨明的博客-CSDN博客_微信小程序新闻页面

步骤2 编写函数获取数据库里面的文章数据

js的完整代码如下

// pages/article/article.js
Page({