微信小程序（十五）- 图片处理本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第十五篇

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第十五篇：关于图片处理。因为本次开发进行到首页的代码编写阶段，但是首页中，涉及到关于图片的处理和轮播图展示情况，先在此记录总结如下。

iphone手机对于webp格式图片

实际上，webp格式的图片,占空间小,质量比较高,但是在微信小程序中，iphone手机暂时不支持。那么如果在开发过程中，接口会获取到webp格式的图片，那么我们该如何处理呢？

其实最好的解决方式就是后台统一处理。但是如果后台暂时没空等，我们前端可以暂时先处理：

即使用替换字符串的方式来把.webp格式统一修改为.jpg的格式。当然这个的前提是后台已经存有webp和jpg等不同格式的图片才行。

实现点击轮播图，放大预览效果

在首页中，需要循环播放轮播图，同时也有一个需求就是点击此图片可以实现放大预览的功能。这个如何实现呢。以下为具体的实现方法和代码示例：

首先给每张图片绑定点击事件
接着调用微信内置api：[wx.previewimage]即可轻松实现(developers.weixin.qq.com/miniprogram…)

其中比较重要且常用的参数为url和current。

具体的demo代码如下：

wxml

<!--轮播图开始-->
<view class="detail_swiper">
  <swpier autoplay circular indicator-dots>
    <swiper-item wx:for="{{goodsInfo.pics}}" wx:key="pics_id" bindtap="handlePreviewImage">
    <image mode="widthFix" src="{{item.pics_mid}}"></image>
    </swiper-item>
   </swiper>
<view>

handlePreviewImage(e){
  const {index} = e.currentTarget.dataset;
  const urls = this.data.goodsInfo.pics.map(v=>v.pics_big);
  const current = urls[0];
  wx.previewImage ({
    current,
    urls
  });
}