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


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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
解决python报错MemoryError的问题
2018/06/26 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
pygame实现非图片按钮效果
2019/10/29 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
Delphi CS笔试题
2014/01/04 面试题
水务局局长岗位职责
2013/11/28 职场文书
酒吧创业计划书
2014/01/18 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
Element实现动态表格的示例代码
2021/08/02 Javascript
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js