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


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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
原生js实现照片墙效果
Oct 13 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
JS模拟多线程
2007/02/07 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python3 批量扫描端口的例子
2019/07/25 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
班组长工作职责
2013/12/25 职场文书
初中音乐教学反思
2014/01/12 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
实习生求职自荐信
2014/02/07 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
同意转租证明
2015/06/24 职场文书
施工安全责任协议书
2016/03/23 职场文书
Python基础详解之邮件处理
2021/04/28 Python
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python