微信小程序版博客——图片相关处理

在上一篇介绍了小程序版博客整体框架之后,后面就开始细化细节和功能点了,这篇主要记录下图片相关的问题及我的处理方式

图片来源问题

前面提到,小程序服务端的数据是基于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.jsglobalData下,相当于我们后端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

总结

细节问题真的会很多,一步一步慢慢来吧。

作者:玄冰
欢迎关注我的微信公众号和博客小程序
欢迎关注我的公众号 欢迎关注我的公众号