微信小程序应用—SmallReader微阅读的实现

前段时间对微信小程序的wxml,wxss进行了总结,也一直想写一个简单的微信小程序应用。最近利用业余时间,写了一个微阅读的小程序——SmallReader,先简单地看一下效果图:

小程序主要分为日报,电影,微信和其他四个版块,底部的tab,在小程序的app.json中对tabBar进行配置就好,这个很简单,参考文档就行。下面简单的说下各个版块的实现:

一、日报

       日报这个版块,在顶部有三个页签,这里可以利用微信在GitHub上的开源框架weui-wxss中的navbar来实现,地址为:https://github.com/Tencent/weui-wxss,里面提供了很多的微信小程序组件,大家可以根据需要进行使用或按自己需要进行改造。

       至于如何使用这些组件呢?其实很简单,只需要两步即可搞定:第一:将weui-wxss下载下来,将其dist目录下的style文件夹拷贝你的微信小程序根目录下;第二:在weui-wxss/dist/example目录下将相应组件wxml文件中对应代码拷贝到自己的项目中即可,它里面的样式在第一步style文件夹的weui.wxss文件中已经定义好了,因此也可以通过修改这个文件中相应的样式来实现自己效果。

这个版块中,使用weui-wxss的navbar的话,在页面滑动的时候,整个navbar也会向上滑动而看不见,体验不好,因此这里对其进行了修改,对每个tab下面的内容用scroll-view进行包裹,同时对整个页面容器的样式进行修改让其位置固定,这样的话,页签则不会随着下面内容滑动而顶上去了。

在娱乐这个页签中,则使用了weui-wxss的grid,即表格布局,至于一行显示多少个格子,这个是可以在weui.wxss中进行调整的,如下所示,修改其width即可:

.weui-grid {
  margin: 3px;
  position: relative;
  float: left;
  width: 48%;
  box-sizing: border-box;
}

在体育页签中,根据不同的数据,动态显示了两种不同的布局,这里的处理方式很简单,主要通过不同的条件,对hidden属性进行控制,符合第一种类型的则将该item布局显示出来,另一种item布局隐藏,对于第二种类型也采用相同的策略。点击进去的日报详情页面,如果图片大于等于2张的话,则用轮播图进行展示,只有一张的话,则直接用image标签来展示,详情页中一大段的描述信息是写死的,原因是原数据中返回的是url链接地址,而微信小程序中不像android有webView控件可以加载外部链接地址,所以就只好写死数据。

二、电影

对于这个版块,是采用zhongjie-chen在github上开源的一个控件来实现,地址为:https://github.com/zhongjie-chen/wx-scrollable-tab-view,做法其实是通过对控件的触摸、滑动事件进行处理,本项目根据实际需求对其进行了简单的修改,加上相应的布局,点击事件。这里简单提一下,由于没有找到相应的电影请求接口,里面的数据是写死的,为了代码的整洁,单独将电影数据放在data目录下的local_data.js文件中,然后在电影版本的js文件中进行引用,引用方式主要通过:var movieData = require('../../data/local_data.js'),当然,在local_data.js文件中要通过module.exports进行导出,具体实现看代码。

三、微信

这个版块比较简单,主要实现下拉刷新与上拉加载更多的功能,下拉刷新,主要通过在当前页面json文件中配置"enablePullDownRefresh": true即可,然后在js文件onPullDownRefresh函数中进行重新请求网络的操作即可。上拉加载实现相对复杂一点,首先在布局底部加上相应的加载组件,这个组件使用的是weui-wxss中的loadmore组件;然后在js文件onReachBottom函数中对加载控件进行显示隐藏处理,同时请求网络,并对数据集进行处理。

四、其他

这里,主要通过weui-wxss的picker组件,对日期进行选择,并根据不同的日期去访问网络,刷新数据。


整个项目实现起来还是比较简单,今后会对一些控件进行二次封装,以更符合实际的使用需求,整个代码已经提交到github上了,欢迎clone和star,地址如下:

点击打开链接





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值