微信小程序图片详解

发布时间：2023-05-20

微信小程序作为一种轻量级应用程序，已经受到越来越多开发者的青睐。图片作为小程序开发中不可或缺的一部分，也有它独特的使用方法和技巧。本文将从多个方面对微信小程序图片进行详细的阐述，帮助开发者更好地使用小程序图片功能。

一、本地图片

本地图片指的是小程序项目内的图片资源。在小程序开发中，我们可以使用<image>标签来显示本地图片。下面是一个简单的例子：

<image src="/images/avatar.jpg"></image>

其中，/images/avatar.jpg为本地图片资源的相对路径。在小程序中，本地图片路径中不需要包含主机名或协议名。如果需要在小程序中使用本地图片，需要先在app.json中的pages字段列表中添加图片路径，如下所示：

"pages": [
  "pages/index/index",
  "pages/logs/logs",
  "pages/about/about",
  "pages/img/img"
],
"subPackages":[{
  "root":"pages/sub",
  "pages":[
    "index/index"
  ]
}],
"window": {
  "navigationBarTitleText": "Demo"
},
"tabBar": {
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页"
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }, {
    "pagePath": "pages/about/about",
    "text": "关于"
  }, {
    "pagePath": "pages/img/img",
    "text": "图片"
  }]
},
"usingComponents": {}

在上述代码中，pages/img/img表示图片页面的路径。我们在这个页面中使用<image>标签来展示图片，如下所示：

<image src="/images/avatar.jpg"></image>

本地图片可以随着小程序一同打包，省去了请求远程图片的时间和流量。但是，如果图片过多或比较大，会对小程序的加载速度产生影响。

二、远程图片

远程图片指的是从服务器上请求的图片资源。在小程序开发中，我们同样可以使用<image>标签来显示远程图片。如下所示：

<image src="https://example.com/avatar.jpg"></image>

在上述代码中，https://example.com/avatar.jpg为远程图片的URL。需要注意的是，在小程序中，使用远程图片需要在app.json文件中声明允许跨域请求的白名单。

三、预览图片

在小程序中，可以通过自定义事件和微信API来实现预览图片的功能。我们可以先为图片绑定一个tap事件：

<image src="{{imgUrl}}" mode="aspectFit" bind:tap="previewImage"></image>

在bind:tap="previewImage"中，previewImage为我们自定义的事件名称。接下来，在我们的page.js文件中编写相应的事件处理函数：

Page({
  data: {
    imgUrl: "https://example.com/avatar.jpg"
  },
  previewImage: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current,
      urls: [this.data.imgUrl]
    })
  }
})

在上述代码中，我们通过wx.previewImage函数来实现图片预览功能。其中，current表示当前预览的图片URL，urls表示预览图片的URL数组。

四、优化图片加载

为了提高小程序的加载速度，我们可以对小程序图片进行优化。常见的图片优化方式有以下几种：

  1. 图片压缩：可使用在线工具或本地压缩工具对图片进行压缩，减小图片体积。
  2. 图片懒加载：在小程序中，我们可以通过wx.createIntersectionObserver和observer.relativeToViewport().observe('selector', (res) => {})函数来实现图片懒加载。在用户滚动时，将未出现在视图中的图片设为不可见，当图片出现在视图中时再将其设为可见。
  3. 使用WebP格式：WebP格式是一种新型的图片格式，相比于JPEG等传统格式，WebP格式的图片体积更小，在保证图片质量的情况下，能大幅减少图片的加载时间。

五、图片上传

小程序中的用户上传功能建立在微信开放能力之上，需要先获取用户授权。在用户上传图片后，我们可以通过wx.chooseImage函数来获取用户选择的图片，并通过wx.uploadFile函数来将图片上传至服务器。具体实现可以参考以下代码：

// 获取用户授权
wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.record']) {
      wx.authorize({
        scope: 'scope.record',
        success() {
          console.log('用户已授权')
        }
      })
    }
  }
})
// 选择图片
wx.chooseImage({
  success(res) {
    const tempImagePath = res.tempFilePaths[0]
    // 上传图片
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: tempImagePath,
      name: 'image',
      success(res) {
        console.log('上传成功')
        console.log(res.data)
      }
    })
  }
})

可以通过scope.record来获取用户授权，授权成功后就可以调用wx.chooseImage函数来选择要上传的图片。然后使用wx.uploadFile函数来将图片上传至服务器。

总结

本文从多个方面对微信小程序图片进行了详细的阐述，介绍了本地图片、远程图片、预览图片、优化图片加载和图片上传等功能。对于初学者来说，这些知识点都是非常重要的，相信通过本文的学习，大家已经有了更深入的了解和掌握。

推荐文章