微信小程序日记——高仿知乎日报(上)
来源:互联网 发布:ps3网络设定 编辑:程序博客网 时间:2024/05/22 01:34
该小程序的作者是Oopsguy,我也参与小功能的开发和完善,希望大家能支持一下
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP
要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉
我将该教程分为以下三篇
- 微信小程序日记——高仿知乎日报(上)
- 微信小程序日记——高仿知乎日报(中)
- 微信小程序日记——高仿知乎日报(下)
三篇分别讲不同的组件和功能块
这篇要讲
- API分析
- 启动页
- 轮播图
- 日报列表
- 浮动按钮
- 侧滑菜单
API分析
以下是使用到的具体API,更加详细参数和返回结构可参照网上网友分享的 知乎日报-API-分析 ,在此就不做再次分析了。
启动界面图片
http://news-at.zhihu.com/api/4/start-image/{size}
获取刚进入应用时的显示封面,可以根据传递的尺寸参数来获取适配用户屏幕的封面。
获取最新日报
http://news-at.zhihu.com/api/4/news/latest
返回的数据用于日报的首页列表,首页的结构有上下部分,上部分是图片滑动模块,用于展示热门日报,下部分是首页日报列表,以上接口返回的数据有热门日报和首页日报
获取日报详细
http://news-at.zhihu.com/api/4/news/{id}
在点击日报列表也的日报项时,需要跳转到日报详情页展示日报的具体信息,这个接口用来获取日报的展示封面和具体内容。
历史日报
http://news.at.zhihu.com/api/4/news/before/{date}
这个接口也是用与首页列表的日报展示,但是不同的是此接口需要传一个日期参数,如20150804
格式。获取最新日报接口只能获取当天的日报列表,如果需要获取前天或者更久之前的日报,则需要这个接口单独获取。
日报额外信息
http://news-at.zhihu.com/api/4/story-extra/{id}
在日报详情页面中,不仅要展示日报的内容,好需要额外获取此日报的评论数目和推荐人数等额外信息。
日报长评
http://news-at.zhihu.com/api/4/story/{id}/long-comments
日报的评论页面展示长评用到的接口(没有找到分页参数,分页没有做)
日报短评
http://news-at.zhihu.com/api/4/story/{id}/short-comments
日报的评论页面展示段评用到的接口(没有找到分页参数,分页没有做)
主题日报栏目列表
http://news-at.zhihu.com/api/4/themes
主页的侧边栏显示有主题日报的列表,需要通过这个接口获取主题日报栏目列表
主题日报具体内容列表
http://news-at.zhihu.com/api/4/theme/{themeId}
在主页侧栏点击主题日报进入主题日报的内容页,需要展示此主题日报下的日报列表。
启动页
作为一个仿制知乎日报的伪APP,高大上的启动封面是必须的,哈哈。启动页面很简单,请求一个应用启动封面接口,获取封面路径和版权信息。当进入页面,在onLoad
事件中获取屏幕的宽和高来请求适合尺寸的图片,在onReady
中请求加载图片,在请求成果之后,延迟2s进入首页,防止页面一闪而过。
onLoad: function( options ) { var _this = this; wx.getSystemInfo( { success: function( res ) { _this.setData( { screenHeight: res.windowHeight, screenWidth: res.windowWidth, }); } });},onReady: function() { var _this = this; var size = this.data.screenWidth + '*' + this.data.screenHeight; requests.getSplashCover( size, ( data ) => { _this.setData( { splash: data }); }, null, () => { toIndexPage.call(_this); });}/** * 跳转到首页 */function toIndexPage() { setTimeout( function() { wx.redirectTo( { url: '../index/index' }); }, 2000 );}
轮播图
首页顶部需要用到轮播图来展示热门日报,小程序中的Swipe
组件可以实现。
<swiper class="index-swiper" indicator-dots="true" interval="10000"> <block wx:for="{{sliderData}}"> <swiper-item data-id="{{item.id}}" bindtap="toDetailPage"> <image mode="aspectFill" src="{{item.image}}" style="width:100%" /> <view class="mask"></view> <view class="desc"><text>{{item.title}}</text></view> </swiper-item> </block></swiper>
所有的内容都必须要在swiper-item
标签中,因为我们的图片不止有一张,而是有多个热门日报信息,需要用循环来展示数据。这里需要指定的是image
里的属性mode
设置为aspectFill
是为了适应组件的宽度,这需要牺牲他的高度,即有可能裁剪,但这是最好的展示效果。toDetailPage
是点击事件,触发跳转到日报详情页。在跳转到日报详情页需要附带日报的id
过去,我们在循环列表的时候把当前日报的id
存到标签的data
中,用data-id
标识,这有点类似与html5中的data-*
API。当在这个标签上发生点击事件的时候,我们可以通过Event.currentTarget.dataset.id
来获取data-id
的值。
日报列表
列表的布局大同小异,不过这里的列表涉及到分页,我们可以毫不犹豫地使用scroll-view
组件,它的scrolltolower
是非常好用的,当组件滚动到底部就会触发这个事件。上次的小豆瓣图书也是使用了这个组件分页。不过这次的分页动画跟上次不一样,而是用一个附带旋转动画的刷新图标,使用官方的动画api来实现旋转。
<view class="refresh-block" wx:if="{{loadingMore}}"> <image animation="{{refreshAnimation}}" src="../../images/refresh.png"></image></view>
代码中有一个显眼的animation
属性,这个属性就是用来控制动画的。
/** * 旋转上拉加载图标 */function updateRefreshIcon() { var deg = 360; var _this = this; var animation = wx.createAnimation( { duration: 1000 }); var timer = setInterval( function() { if( !_this.data.loadingMore ) clearInterval( timer ); animation.rotateZ( deg ).step(); deg += 360; _this.setData( { refreshAnimation: animation.export() }) }, 1000 );}
当列表加载数据时,给动画设置一个时长duration
,然后按Z轴旋转,即垂直方向旋转rotateZ
,每次旋转360度,周期是1000毫秒。
列表的布局跟上次的小豆瓣图书的结构差不多,用到了循环结构wx:for
和判断语句wx:if
、 wx:else
来控制不同的展示方向。
<view class="common-list"> <block wx:for="{{pageData}}"> <view class="list-item {{item.images[0] ? 'has-img': ''}}" wx:if="{{item.type != 3}}" data-id="{{item.id}}" bindtap="toDetailPage"> <view class="content"> <text>{{item.title}}</text> </view> <image wx:if="{{item.images[0]}}" src="{{item.images[0]}}" class="cover"></image> </view> <view class="list-spliter" wx:else> <text>{{item.title}}</text> </view> </block></view>
class="list-spliter"
这块是用来显示日期,列表中的日报只要不是同一天的记录,就在中间插入一条日期显示块。在列表项中有一个三元运算判断输出具体的class{{item.images[0] ? 'has-img': ''}}
,是因为列表中可能没有图片,因此需要判定当前有没有图片,没有图片就不添加class为has-img
来控制带有图片列表项的布局。
浮动按钮
因为小程序中没有侧栏组件,无法做到侧滑手势显示侧栏(本人发现touchstart事件和tap事件有冲突,无法实现出手势侧滑判断,所以没有用侧滑手势,可能是本人理解太浅了,没有发现解决方法,嘿嘿…),浮动按钮的样式参照了Android中的FloatAction经典按钮。可以浮动在界面上,还可以滑动到任意位置,背景为稍微透明。
<view class="float-action" bindtap="ballClickEvent" style="opacity: {{ballOpacity}};bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent"> </view>
.float-action { position: absolute; bottom: 20px; right: 30px; width: 50px; height: 50px; border-radius: 50%; box-shadow: 2px 2px 10px #AAA; background: #1891D4; z-index: 100;}
按钮的样式随便弄了一下,宽高用了px
是因为后面的移动判断需要获取屏幕的宽高信息,这些信息的单位是px
。wxml绑定了点击事件和移动事件,点击事件是控制侧栏弹出,滑动事件是按钮移动。
//浮动球移动事件ballMoveEvent: function( e ) { var touchs = e.touches[ 0 ]; var pageX = touchs.pageX; var pageY = touchs.pageY; if( pageX < 25 ) return; if( pageX > this.data.screenWidth - 25 ) return; if( this.data.screenHeight - pageY <= 25 ) return; if( pageY <= 25 ) return; var x = this.data.screenWidth - pageX - 25; var y = this.data.screenHeight - pageY - 25; this.setData( { ballBottom: y, ballRight: x });}
touchmove
事件中的会传递一个event
参数,通过这个参数可以获取到当前手势滑动到的具体坐标信息e.touches[ 0 ]
侧滑菜单
侧滑菜单是一个经典APP布局方案,小程序中没有提供这个组件,甚是遗憾。不过实现起来也不是很难,但是总感觉有点别扭…
侧滑菜单的样式采用了固定定位的布局position: fixed
,默认隐藏与左侧,当点击浮动按钮时弹出,点击遮罩或者侧栏上边的关闭按钮时收回。侧栏的弹出和收回动画采用小程序提供的动画API。
<view class="slide-mask" style="display:{{maskDisplay}}" bindtap="slideCloseEvent"></view><view class="slide-menu" style="right: {{slideRight}}px;width: {{slideWidth}}px;height:{{slideHeight}}px;" animation="{{slideAnimation}}"> <icon type="cancel" size="30" class="close-btn" color="#FFF" bindtap="slideCloseEvent" /> <scroll-view scroll-y="true" style="height:100%;width:100%"> <view class="header"> <view class="userinfo"> <image src="../../images/avatar.png" class="avatar"></image> <text>Oopsguy</text> </view> <view class="toolbar"> <view class="item"> <image src="../../images/fav.png"></image> <text>收藏</text> </view> <view class="item" bindtap="toSettingPage"> <image src="../../images/setting.png"></image> <text>设置</text> </view> </view> </view> <view class="menu-item home"> <text>首页</text> </view> <view class="slide-inner"> <block wx:for="{{themeData}}"> <view class="menu-item" data-id="{{item.id}}" bindtap="toThemePage"> <text>{{item.name}}</text> <image src="../../images/plus.png"></image> </view> </block> </view> </scroll-view></view>
/*slide-menu*/.slide-mask { position: fixed; width: 100%; top: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, .3); z-index: 800;}.slide-menu { position: fixed; top: 0; background: #FFF; z-index: 900;}/*.slide-menu .slide-inner { padding: 40rpx;}*/.slide-menu .header { background: #019DD6; height: 200rpx; color: #FFF; padding: 20rpx 40rpx 0 40rpx;}.userinfo { height: 80rpx; line-height: 80rpx; overflow: hidden;}.userinfo .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 40rpx; float: left;}.userinfo text { float: left; font-size: 35rpx;}.toolbar { height: 100rpx; padding-top: 25rpx; line-height: 75rpx;}.toolbar .item { width: 50%; display: inline-block; overflow: hidden; text-align: center}.toolbar .item text { display: inline-block; font-size: 30rpx}.toolbar .item image { display: inline-block; position: relative; top: 10rpx; margin-right: 10rpx; height: 50rpx; width: 50rpx;}.slide-menu .menu-item { position: relative; height: 100rpx; line-height: 100rpx; padding: 0 40rpx; font-size: 35rpx;}.slide-menu .menu-item:active { background: #FAFAFA;}.slide-menu .menu-item image { position: absolute; top: 25rpx; right: 40rpx; width: 50rpx; height: 50rpx;}.slide-menu .home { color: #019DD6}.slide-menu .close-btn { position: absolute; top: 20rpx; right: 40rpx; z-index: 1000}
以上是侧栏的一个简单的布局和样式,包含了侧栏中的用户信息块和主题日报列表。当然这些信息是需要通过js的中网络请求来获取的。侧栏结构上边有一个class为slide-mask
的view,这是一个遮罩元素,当侧栏弹出的时候,侧栏后边就有一层轻微透明的黑色遮罩。侧栏的高度和宽度初始是不定的,需要在进入页面的时候,马上获取设备信息来获取屏幕的高度宽度调整侧栏样式。
//获取设备信息,屏幕的高度宽度onLoad: function() { var _this = this; wx.getSystemInfo( { success: function( res ) { _this.setData( { screenHeight: res.windowHeight, screenWidth: res.windowWidth, slideHeight: res.windowHeight, slideRight: res.windowWidth, slideWidth: res.windowWidth * 0.7 }); } });}
宽度我取了屏幕宽度的70%,高度一致。侧栏的弹出收回动画使用内置动画API
//侧栏展开function slideUp() { var animation = wx.createAnimation( { duration: 600 }); this.setData( { maskDisplay: 'block' }); animation.translateX( '100%' ).step(); this.setData( { slideAnimation: animation.export() });}//侧栏关闭function slideDown() { var animation = wx.createAnimation( { duration: 800 }); animation.translateX( '-100%' ).step(); this.setData( { slideAnimation: animation.export() }); this.setData( { maskDisplay: 'none' });}
侧栏弹出的时候,遮罩的css属性display
设置为block
显示,侧栏通过css动画transform
来想右侧移动了100%的宽度translateX(100%)
,侧栏收回时,动画恰好与弹出的相反,其实这些动画最后都会翻译为css3动画属性,这些API只是css3动画的封装。为了点击遮罩收回侧栏,遮罩的tap
事件也要绑定slideCloseEvent
//浮动球点击 侧栏展开ballClickEvent: function() { slideUp.call( this );},//遮罩点击 侧栏关闭slideCloseEvent: function() { slideDown.call( this );}
效果图
- 微信小程序日记——高仿知乎日报(上)
- 微信小程序日记——高仿知乎日报
- 微信小程序日记——高仿知乎日报(中)
- 微信小程序日记——高仿知乎日报(下)
- 安卓日记——手把手教你做知乎日报
- 安卓日记——MVP重构知乎日报
- 安卓日记——可缓存的知乎日报
- Python日记——用Django做一个简易的知乎日报API
- Pyhton日记——Flask写一个简易的知乎日报API
- CSDN日报20170408 ——《一个屌丝程序猿的人生(连载小说)》
- CSDN日报20170225——《六年程序生涯》
- CSDN日报20170502 ——《程序学徒与导师》
- CSDN日报20170622——《程序 Dog 的大梦想》
- CSDN日报20170713——《程序人生,终究是起承转合》
- CSDN日报20170713——《程序人生,终究是起承转合》
- 微信小程序日记(二)
- 微信小程序-仿知乎主题日报列表
- Java基础日记———IO流(上)
- LeetCode 415. Add Strings
- GsonBuilder导出null值、格式化输出、日期时间
- springmvc定时任务
- Usery用户情景与用例规约
- ADC实验
- 微信小程序日记——高仿知乎日报(上)
- VelocityTracker---速度追踪
- 图像处理入门<1>——matlab数字图像处理基本操作
- 关于使用linux的命令排查服务器的性能问题
- OllyDBG完美教程(超强入门级)
- Yii2.0 探究四 :收发电子邮件
- iOS 浅谈:深.浅拷贝与copy.strong
- Android多分辨率适配框架(2)— 原理剖析
- IFrame实现HTML代码调试效果