在上一篇介绍了小程序版博客整体框架之后,后面就开始细化细节和功能点了,这篇主要记录下图片相关的问题及我的处理方式
前面提到,小程序服务端的数据是基于Ghost的公共API的,在设计首页文章列表时,为了美观加上了头图,但是服务端没有提供对应的字段(头图url)。
并且我在写PC端文章时,也没有维护头图,文章中的图片都放在七牛云上的。于是只能取巧,利用接口的slug
字段(猜测是文章的路由别名),https://www.bug2048.com/wechat20180419/
中的wechat20180419
的部分。利用该字段,我在七牛云上以该名称维护一张图片。当请求服务端时候,将该字段组装成对应的图片url即可。
如果对于七牛云存储不太了解的话可以百度下,建议申请下,认证之后会有免费的10G存储空间,同时绑定下你的二级域名(不绑也可以),文章中的图片都可以放在七牛云上。
截图1
这样图片来源的问题就解决了,在请求完服务数据后,对相应的字段再处理,关键代码如下:
const posts = res.data.posts;
for (var post of posts) {
var time = util.formatTime(post.created_at);
post.created_at = time;
//将slug字段转换成图片url:image.bug2048.com/wechat20180419.jpg
post.slug = getApp().globalData.imageUrl + post.slug + '.jpg';
}
接着碰到的问题就是图片大小了,尤其是我的专题中使用的card
组件,其中的图片是100*100,而写文章时,头图肯定是网上找的,大小不一,小程序加载后再压缩影响必然会牺牲性能。
这里七牛云就体现价值了,七牛云提供图片样式
功能,可以在原图的基础指定裁剪,压缩,加水印等,根据自己的需求,建立规则,只要在图片url后面加上?处理接口
即可,比如下面的图片就是200*200的
http://image.bug2048.com/1524191964503.jpg?imageView2/1/w/200/h/200/q/100
截图2
这样的话,根据不同的页面所要图片大小,返回对应的图片即可,当然,这些你可以配置在app.js
的globalData
下,相当于我们后端config配置文章,便于管理。
globalData: {
userInfo: null,
//默认图片
defaultImageUrl:'http://image.bug2048.com/blogdefault.jpeg?',
imageUrl: 'http://image.bug2048.com/',
imageStyle200To200: 'imageView2/1/w/200/h/200/q/100',
imageStyle600To300:'imageView2/1/w/600/h/300/q/75|watermark/2/text/QnVn55Sf5rS7MjA0OA==/font/5a6L5L2T/fontsize/280/fill/IzAwMDAwMA==/dissolve/100/gravity/SouthEast/dx/10/dy/10'
}
调用时通过getApp().globalData.imageUrl
即可。
随之而来的就是展示问题啦,手机尺寸大小不一,为了美观图片还是需要自适应的。
设置image
标签的宽度为100%,然后添加属性 mode="widthFix"
。
<image mode="widthFix" style="width: 100%;" data-index="{{idx}}" binderror="errorloadImage" src="{{item.slug}}"></image>
最后就是加载失败兼容的问题了,有时候头图忘记维护了或者其他情况,当图片无法加载时可以显示一张默认图片。
小程序里图片提供了binderror
的属性,当图片加载失败时会触发该属性。
另外我们的图片是放在posts这个实体下的,页面循环加载数据的,所以在触发时我们需要回传一个index,以便我们知道哪张图片无法加载。
相关核心代码如下:
//wxml中定义binderror,并定义data-index记录图片index
<image mode="widthFix" style="width: 100%;" data-index="{{idx}}" binderror="errorloadImage" src="{{item.slug}}"></image>
errorloadImage
方法定义如下:
//图片加载失败给到默认图片
errorloadImage: function (e) {
if (e.type == "error") {
var index = e.target.dataset.index
var posts = this.data.posts
posts[index].slug = this.data.defaultImageUrl
this.setData({
posts: posts
})
}
好啦,到这里,基本的图片相关问题解决了,至于更精细化的,比如懒加载之类的,这个后面再说。
优化后的效果截图可以参考下:
截图3
截图4
细节问题真的会很多,一步一步慢慢来吧。