上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。 欢迎Star Github开源地址:https://github.com/winterfeel/Wxapp_Toutiao 所以在这一篇中我们进行以下优化:
说明下为什么不做收藏功能,其实是设计到用户登陆功能暂时都不做了,包括发表评论。原因:
微信小程序登陆需要有appid,appid需要公司资质去申请,每个公司申请的数量有限制(好像是30个),每个身份证也只能最多绑定5个。 虽然网上流传着个人即使申请失败也可以获得appid,但是就此失去了一次绑定机会,个人建议还是不要浪费。所以小程序中的登陆、评论、收藏功能此处暂时不做。
微信小程序原生提供了下拉刷新和加载更多事件,这一点还是比较人性化的。 首先需要在配置文件,即页面.json,如index.json添加允许下拉刷新:
{ "enablePullDownRefresh":true }
然后在js代码中添加响应事件:
//下拉刷新 onPullDownRefresh: function(){ this.loadArticles(sectionData[currentSectionIndex]['section_id'],false) }, //加载更多 onReachBottom: function () { this.loadArticles(sectionData[currentSectionIndex]['section_id'],true) }
注意我把加载更多和下拉刷新所用的请求方法写成了一个函数:
loadArticles: function(section_id,ifLoadMore) //分类id、是否是加载更多
这个ifLoadMore起区分的作用,如果是false,则将获得的数据直接替换;如果是true,则将获得的数据追加在原有的数据后面。
if(ifLoadMore){ //加载更多 if(articleData){ sectionData[currentSectionIndex]['articles'] = sectionData[currentSectionIndex]['articles'].concat(articleData)//追加 }else{ wx.showToast({ title: '暂无更多内容', icon: 'loading', duration: 2000 }) } }else{ sectionData[currentSectionIndex]['articles'] = articleData//刷新 }
这样就不需要分开写2种请求代码了。当然我们需要添加一个loading动画,有一点我不明白的是微信把loading动画当初了组件...只能强行用一个hidden参数来改变它的隐藏和展示状态,太坑了。
有同学说不是有showToast吗?是的,showToast最多可以显示10秒,虽然理论上是够了,但是这样总是很蛋疼,并不能真实地去控制显示因此。
虽然不打算做发表评论功能了,但是布局我还是加了上去,效果如图:
评论效果图
评论列表还是用for循环渲染每个item即可,当然这边我添加了一个小细节,当没有评论的时候会显示一个空提示:
暂无评论
只需要一个简单的if判断就可以啦:
<view wx:if="{{commentList}}"> <view class="comment" wx:for="{{commentList}}"> <view class="avatar"> <image src="{{item.avatar}}" mode="scaleToFill"></image> </view> <view class="commentInfo"> <view class="userName">{{item.username}}<view class="time">{{item.time}}</view></view> <view class="commentContent"><text class="reply" wx:if="{{item.parent_username}}">回复@{{item.parent_username}}:</text>{{item.content}}</view> </view> </view> </view> <view class="noComment" wx:else> <text>暂无评论,赶快抢沙发吧!</text> </view> </view>
这边还有一个细节是,可以显示回复XX。当时在设计后台的时候允许回复他人,即评论可以有一个parent_userid字段,代表你所回复的这个用户的id,当然最后服务器返回的时候会返回用户名。
所以判断下wx:if="{{item.parent_username}}" 即可得出该评论是直接评论还是回复他人的评论。 其实发表评论的代码我也写了,很简单就是一个post请求,但是由于无法登陆,并没有真正去调用。
由于微信没有提供元素获取功能,所以想要获取评论框里的内容不好直接get,只能给输入框绑定change事件,然后在事件里把内容复制给一个变量才行。如果有其他方法,欢迎留言指点。
至此,一个小头条就完成了,当然由于缺失了用户系统,功能肯定是不完善的,理论上也是毫无用处的。所以真正的小程序产品肯定不应该是纯粹的内容展示,交互一定是个很重要的环节。 我的代码可能在很多地方都不够严谨、不够细致,大家如果需要参考欢迎访问Github给个star。 Github开源地址:https://github.com/winterfeel/Wxapp_Toutiao 我更享受的是产品的设计过程,所以小程序一定会带给我很多乐趣。后续我会继续制作更多小程序,并且发布一些教程,喜欢的朋友可以继续关注!