【小程序开发之文章详情页面的设计】文章详情页面如何布局
本篇博客是小程序开发系列的第四篇，在上一篇博客中介绍的是首页的制作，除了展示轮播图图片，食谱的封面、名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面。
除了在首页的js里面编写跳转函数之外（函数用来获取轮播图/食谱/文章的id，并携带id进行页面跳转）我们还需要创建page，制作详情页面。
页面效果
在我的小程序中，文章详情页顶部的图片是一张固定的图片（也就是每篇文章的详情页顶部都使用同一张图片作为装饰）大家可以根据需要自行修改图片。
然后顶部图片下面展示的是文章标题，标题下面展示的是文章内容（文章标题、文章内容都是存放在数据库的数据，文章内容是富文本类型，因此该字段里面既有文字也有图片）
跳转到文章详情页，跳转到轮播图详情页，跳转到食谱详情页都是一样的办法，下面就用跳转到文章详情页来作例子来讲解吧。
步骤1 完成页面的布局
我参考了其他人制作的详情页，删除了一些我用不到的部分，然后拿来展示我的文章。附上原文博客（里面有详细的WXML、WXSS代码） 在这里就不具体展示我的代码了
(42条消息) 微信小程序新闻详情页面效果实现_傅晨明的博客-CSDN博客_微信小程序新闻页面
步骤2 编写函数获取数据库里面的文章数据
js的完整代码如下
// pages/article/article.js
Page({data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that=this;console.log(options.id) //options.id:首页js代码里那个跳转函数携带过来的参数（也就是存在数据库里面的文章的id)//根据文章的id查找对应的数据库文章表里面的记录 获取到这篇文章的标题图片等信息然后展示在页面上 wx.cloud.database().collection('article-list').doc(options.id).get().then(res=>{ console.log(res)that.setData({ article:res.data //res.data就是存储在数据库里的这篇文章的所有信息（文章标题图片之类）})})},})TIP：
这些功能的实现也是学习了b站 华神说编程 的视频 不懂的同学可以去看一下视频，视频更加详细更加易懂，可以直接跟着视频做 （本篇博客讲的内容对应系列视频里的2-4、2-5小节）
电商小程序、商城小程序、超市小程序，带你开发一款微信商城小程序_哔哩哔哩_bilibili
需要这部分源代码的同学 可以联系QQ772258460
【小程序开发之文章详情页面的设计】文章详情页面如何布局相关推荐
- 微信小程序开发一个小型商城（五、商品详情）
上一篇文章:微信小程序开发一个小型商城(四.商品列表) 在从上一个界面跳转过来,会看到商品详情这个界面goods_detail :如下图所示: 页面分析:从上到下:一个轮播图+一个view标签存储商品 ...
- 校友会小程序开发笔记四：UI基本元素设计
基于微信小程序轻快的特点, 旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同校友需求,实现校友与小程序服务方的共赢. 为了避免下游在微信中使用小程序服务时,注意力被周围复 ...
- 校友卡小程序开发笔记一： 总体架构设计
一 校友卡小程序的现实意义 于秋高气爽时邂逅重大 再到似锦繁花扬帆远航 母校的一草一木,一人一物 因为与你们走过的朝朝暮暮 而被赋予了新的意义. 人走天涯,心系母校 一隅一角,满载思念 二 功能规划 ...
- 微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
- 微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
- 微信小程序开发之路（一）
今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点.在开始之前先了解下微信小程序是个什么东西吧. 微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mi ...
- 微信小程序开发学习—Day1
文章目录 1.小程序简介 1.1.什么是小程序 1.2.发展背景 1.3.小程序与普通网页开发的区别 1.4.主要优势 2.第一个小程序 2.1.注册小程序开发账号 2.2.了解微信开发者工具 3.小 ...
- android应用程序开发_抚顺小程序开发定制找谁,吉林小程序定制
湖南庚午网络科技有限公司为您详细解读kpuZae抚顺小程序开发定制找谁的相关知识与详情,微信小法式,简称小法式,缩写XCX,英文名Mini Program,是一种不需要#安拆即可使用的应用,它实现了应 ...
- 微信小程序开发工具有哪些？哪个工具好用
现在的我们日常使用微信小程序的频率几乎跟使用微信的频率差不多了,因为小程序"轻量.方便.快捷",能满足大部分日常使用场景,也可以帮助商家卖货引流营销.不过在进行微信小程序开发时,我 ...
- 微信小程序开发：简单列表界面的实现
最近,想了解下微信小程序的开发. 看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序. 先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据). 底部的 ...
最新文章
- 如何利用python的newspaper包快速爬取网页数据
- 手把手教你EMD算法原理与Python实现(更新)
- 无需任何标记数据，几张照片就能还原出3D物体结构，自监督学习还能这样用...
- 开源大数据周刊-第76期
- python os模块方法_python os模块的常用方法
- 会议交流 | IJCKG 2021:Keynotes released!欢迎注册参会
- 电大计算机一级b考试试题,电大计算机考试本科试题
- mac python运行按哪个键_#mac python如何使用教程#怎么在mac终端运行python程序
- BZOJ 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛( 二分答案 )
- 英伟达有魔力，Uber小心翼翼 | 跟着开复去硅谷Day1
- 跨平台开源集成开发环境Eclipse
- PB如何配置数据源及自带的PB系统
- VEP视频文件怎么转换成普通视频文件mp4
- hadoop容错性（详解版）
- 系统性谈谈软件可靠性——第1讲：软件可靠性基础概念
- 抖音一姐直播笑唱国歌被封，网友：早就该封了！
- 计算机课代表专业演讲稿,语文课代表发言稿(精选多篇)
- 关于在控制面板上软件卸载失败的问题
- 英语中的商务电子邮件：5点实用技巧
- jemeter压测中所遇报错-connect