wepy框架下微信小程序图片处理

因腾讯限制微信小程序安装包不能超过2m，故我们可以将本地图片放在远程图片CDN服务器上。此篇文章介绍将图片上传至七牛云服务器、以及代码/模板中如何处理以同时兼容本地/远程图片路径。

项目目录结构

├── src
│   ├── app.wpy
│   ├── assets
│   │   └── images                   # 项目图片目录
│   │       ├── eye.png
│   │       ├── home
│   │       │   └── banner-1.jpg
│   │       ├── time.png
│   │       └── weather
│   │           └──0.png
│   ├── components
│   │   ├── home
│   │   │   ├── HomeBanner.wpy
│   │   │   └── HomeFooter.wpy
│   ├── core
│   │   ├── filters
│   │   │   └── MPImageFilter.wxs    # 处理template模板中的图片路径
│   │   └── utils
│   │       └── MPImageUtil.js       # 处理javascript代码中的图片路径
│   ├── pages
│   │   └── home.wpy
├── upload-image.js
└── package.json

图片上传七牛云服务器

# 安装七牛云js库
$ npm install qiniu --save-dev

# 执行上传本地图片至七牛云（请先修改upload-image.js中配置参数）
$ node upload-image.js

upload-image.js源码

本地图片 src/assets/images/eye.png，对应远程图片：http://******.clouddn.com/mp-travel/assets/images/eye.png。

代码调整

从代码的角度来看，小程序中图片的使用分为2种场景：

场景1

在javascript代码中定义的图片路径变量，如：

export default class HomeBanner extends wepy.component {
    data = {
        imgUrls: [
            '../assets/images/home/banner-1.jpg',
        ]
    }
}

解决方案

import MPImageUtil from '../../core/utils/MPImageUtil';
export default class HomeBanner extends wepy.component {
    data = {
        imgUrls: [
            MPImageUtil.getImagePath('../assets/images/home/banner-1.jpg'),
        ]
    }
}

MPImageUtil.js源码

场景2

在wxml中使用图片

解决方案

MPImageFilter.wxs源码

WXS是小程序的一套脚本语言，跟javascript不完全一致。