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


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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
微信小程序 开发之全局配置
May 05 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
JS随机数产生代码分享
Feb 24 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
javascript中this指向详解
2016/04/23 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
校园摄影活动策划方案
2014/02/05 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
服务承诺书
2015/01/19 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis