微信小程序文章详情页面实现代码


Posted in Javascript onSeptember 10, 2018

先自己绘制了一个丑陋的原型图,然后开始在小程序上绘制页面,然后设计样式,一路过来总结就是哪里不懂查哪里之旅~

原型设计和分析

原型图效果

微信小程序文章详情页面实现代码

文章详情.png

为什么要这么设计?

正常情况下是设计先出设计图,然后服务器和我们一同讨论接口如何设计,然后根据服务器返回的结果,我们再去界面上显示。但是这里我们使用的是第三方的接口,所以只能他有什么我们显示什么了。

服务器接口返回的数据如下如:

微信小程序文章详情页面实现代码

小程序-服务器返回结果.png

分析 json 结果,我们这里为了简单,也就只显示几个元素分别是 时间,标题,类型,作者,图片

整体是垂直排列,然后图片是根据是否有返回来动态显示,最后的心形图标是为了收藏使用(目前还未实现收藏功能)

原型实现

在实现的过程中一步步思考,首先是页面如何实现,然后是数据如何获取,最后是如何动态显示数据

页面实现

从原型图分析,我们的根布局需要能够整体垂直滑动,然后图片水平显示三行(后来实现的时候发现水平显示图片,图片太小不美观,故改成图片整体垂直摆放)

详情页面的整体布局 reading-detail.wxml

<view>
 <view class='top-text'>
 <text>web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。</text>
 </view>
 <view class="divLine"></view>
 <view>
 <view class='content-text'>
  <text>{{content}}</text>
 </view>
 <view class='image-container'>
  <block wx:for="{{images}}" wx:for-item="item" wx:for-index="idx">
  <view class='image-container' catchtap='onImageClick' data-imageUrl="{{item.imageUrl}}">
   <image wx:if="{{hadImage}}" class='image-item' src="{{item.imageUrl}}" mode='widthFix'></image>
  </view>
  </block>
 </view>
 <view>
  <text class='type-text'>类型:{{postType}}</text>
  <text class='type-author'>作者:{{who}}</text>
 </view>
 <view><text class='type-date'>发布时间:{{date}}</text></view>
 <view><text class='url-text'>网页链接:{{url}}</text></view>
 <view class='view-like' catchtap='onLikeClick'>
  <image class='icon-like' src='/images/detail/icon_like.png'></image>
 </view>
 </view>
</view>

布局还算好做的,难点就在于页面的样式如何去调整(难也是相对新手,比如我这种小白吧)

详情页面的样式文件 wxss

.scroller-container{
 height: 1300rpx;
}
.top-text{
 font-size: 24rpx;
 color: #999;
 margin-left: 20rpx;
 margin-right: 20rpx;
}

.divLine{
 background: #D1D1D6;
 width: 100%;
 height: 2px;
 margin: 20rpx;
}

.content-text{
 margin: 20rpx;
 font-size: 40rpx;
 font-weight: 600rpx;
 color: #333;
}
.image-container{
 display: flex;
 flex-direction: column;
 width: 100%;
 height: auto;
 margin: 20rpx;
}

.image-item{
 width: 100%;
 height: 600rpx;
 padding-bottom: 20rpx;
}
.view-like{
 display: flex;
 flex-direction: row;
 width: 100%;
 align-items: center;
 justify-content: center;
}
.icon-like{
 width: 128rpx;
 height: 128rpx;
 margin-top: 20rpx;
}
.type-text{
 margin-left: 10rpx;
 font-size: 30rpx;
}
.url-text{
 margin-left: 10rpx;
 font-size: 24rpx;
}
.type-author{
 margin-left: 10rpx;
 font-size: 30rpx;
}
.type-date{
 margin-left: 10rpx;
 font-size: 30rpx;
}

在实现心形图标居中过程中 align-items: center;(交叉轴上的对齐方式) 没居中显示,查了下是需要设置显示为水平摆放,然后还需要设置 justify-content: center;(表示在主轴上的对齐方式) 这里有一篇文章介绍微信小程序布局挺好的微信小程序布局基础

数据获取

通过上一个页面传递过来,目前是用最简单的 url 传值的形式传递

在 reading.js 文件中的点击事件传递数据

/**
 * item 的点击事件
 */
 onGankTap:function(event){
 var url = event.currentTarget.dataset.posturl;
 var desc = event.currentTarget.dataset.postdesc;
 var postType = event.currentTarget.dataset.posttype;
 var who = event.currentTarget.dataset.postwho;
 var date = event.currentTarget.dataset.postdate;
 var images = event.currentTarget.dataset.postimages;

 wx.navigateTo({
  url: "reading-detail/reading-detail?url=" + url + "&content=" + desc + "&type=" + postType + "&who=" + who + "&date=" + date +"&images="+images 
 })
 },

在 reading-detail.js 文件中接受传递过来的数据,并对数据处理

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var url = options.url;
 var content = options.content;
 var postType = options.type;
 var who = options.who;
 var date = options.date;
 var images = options.images.split(',');
 var imageArray = [];
 var hadImage = false ;
 
 for (var i = 0; i < images.length; i++) {
  // 图片不为空则存到数组中
  if (images[i] != "undefined"){
  var obj = {
   imageUrl: images[i],
  }
  imageArray.push(obj);
  }
 }
 // 是否有图片
 if (imageArray.length > 0) {
  hadImage = true;
 } else {
  hadImage = false;
 }
 // 传递数据给ui显示
 this.setData({
  url: url,
  content: content,
  date: date,
  postType: postType,
  who: who,
  images: imageArray,
  hadImage: hadImage
 })
 // 标题
 wx.setNavigationBarTitle({
  title: "文章详情"
 })
 },

数据动态填充

通过判断语句动态判断控制图片显示的变量是否有值,有则显示图片组件,没有则不显示图片组件。

在 reading-detail.wxml 中通过判断语句判断是否显示图片组件, hadImage 是 js 中传递过来的值

<image wx:if="{{hadImage}}" class='image-item' src="{{item.imageUrl}}" mode='widthFix'></image>

ok,查看文章详情功能到这里了(详情页最好是直接用 web-view 展示,但是个人开发不支持 web-view 组件)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
js获取页面description的方法
May 21 Javascript
vue之数据交互实例代码
Jun 20 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 #Javascript
JavaScript读写二进制数据的方法详解
Sep 09 #Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 #Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 #Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 #Javascript
原生JS实现前端本地文件上传
Sep 08 #Javascript
JS实现可视化文件上传
Sep 08 #Javascript
You might like
php类常量用法实例分析
2015/07/09 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python对wav文件的重采样实例
2020/02/25 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
pandas按条件筛选数据的实现
2021/02/20 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
培训研修方案
2014/06/06 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
以权谋私检举信范文
2015/03/02 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS