微信小程序 服务器图片处理,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

本地图片 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'),

]

}

}

场景2

在wxml中使用图片

解决方案

import wepy from 'wepy';

import MPImageFilter from '../../core/filters/MPImageFilter.wxs';

export default class HomeFooter extends wepy.component

{

wxs = {

MPImageFilter: MPImageFilter

}

}

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