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

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

图片来源问题

前面提到,小程序服务端的数据是基于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

总结

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

原文发布于微信公众号 - Bug生活2048(BugLife2048)

原文发表时间:2018-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

用WijmoJS搭建您的前端Web应用 —— React

在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。

943
来自专栏Android机动车

使用Fiddler抓取bilibili安卓客户端口数据并分析http、https

经过了一个多星期的时间(自2017/10/16开始),到目前(2017/10/24)为止,项目框架的搭建已基本完成、还完成了首页中「直播」与「推荐」Fragme...

2101
来自专栏较真的前端

使用神器eruda 进行移动端调试

3023
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

2705
来自专栏weixuqin 的专栏

sublime下让代码居中

37513
来自专栏WindCoder

Ubuntu14.04下使用fcitx安装搜狗及双拼输入法

之前Ubuntu打不开了,重新装了一遍,顺便把一些东西直接记录下来,省得日后再四处爪哇。。。

3293
来自专栏Timhbw博客

Xcode神器-Alcatraz

2016-08-1300:07:53 发表评论 566℃热度 相关地址 安装方法 使用方法 我的插件 目录 Alcatraz,Xcode上的神器!一个...

2968
来自专栏PHP技术大全

使用PHP辅助 快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

1473
来自专栏PHP技术大全

使用PHP辅助快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

1513
来自专栏阮一峰的网络日志

文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 ? 网...

3646

扫码关注云+社区