Weex导入图片

sweet说好的幸福

发布于 2020-12-23 10:52:00

8930

发布于 2020-12-23 10:52:00

文章被收录于专栏：sweet_iOS

在Weex开发中不可避免的需要导入图片，在此介绍几种通用方法。

Weex图片资源存在形式？

1、每个客户端保存一份图片资源，统一命名。 2、图片资源保存在服务器上，在渲染Weex页面过程中异步下载图片。 3、保存在weex工程中。这样只需要一份保存，多端使用。

如何选择？

首先看公司氛围，如果客户端够统一，那么可以考虑第一种方式。当然，我推荐第2+第3种方式结合使用，对于图片资源小的图片保存在Weex工程中，方便多端统一，但是只限于较小图片资源，因为图片资源将会以base64的形式保存在打包后的bundlejs中，图片资源过大影响下载速度和解析，并且每次下载bundlejs都需要下载对应图片资源。大的图片资源保存在服务器上，需要的时候异步下载，一般都会有cache。

如何实现？

各端保存

在Vue中以file:///的形式添加，当然获取xcasset文件里面的资源需要麻烦点，网上很多介绍，自问度娘。

<image src="file:///filename">

服务器

在Vue中直接加载图片的地址

<image src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg">

Weex工程

1、创建weex工程

weex init WeexImageDemo

2、拷贝图片到Weex工程中，Demo放在了./src下面，文件夹命名为resources 3、修改webpack，在loaders中添加image的模块

{
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 300000,
              name: '[name].[ext]'
            }
 },

其中loader: 'url'，表示模块命名， limit: 300000,表示图片资源的最大限制。都是可以自己修改。添加后的代码为：

loaders: [
        {
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/
        }, {
          test: /\.vue(\?[^?]+)?$/,
          loaders: []
        },{
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 300000,
              name: '[name].[ext]'
            }
          },
      ]

4、修改package，在devDependencies中添加"url-loader"，版本号自己设置，修改后如下：

"devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "ip": "^1.1.4",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5",
    "url-loader": "^0.5.7"
  }

环境配置完成，下一步就是在Weex中使用，为了方便各个页面调用，将调用方式抽取出来，命名为config.js。 5、在config.js定义加载Weex工程图片方法

const SERVER = "YOUR SERVER IP";
module.exports = {
    // 加载工程中的image
    loadImage(imgName) {
        var image = require('./resources/'+imgName);
        return image;
    },
    // 加载服务器上的image
    image(imgURL) {
        return SERVER + imgURL;
    }
}

6、在foo的script导入config.js方法

import image from './config';

7、在foo中使用

<image class="airport-name-image" :src="imageLoader.loadImage('arrows_right@2x.png')"> </image>
        <image class="airport-name-image" :src="imageLoader.loadImage('ticket_order_notice@2x.png')"></image>