首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序版博客——图片相关处理

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

作者头像
Bug生活2048
发布2018-08-31 16:00:48
1.2K0
发布2018-08-31 16:00:48
举报
文章被收录于专栏:Bug生活2048Bug生活2048

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

图片来源问题

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

总结

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Bug生活2048 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 图片来源问题
  • 图片大小问题
  • 图片自适应问题
  • 图片加载失败兼容问题
  • 总结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档