uniapp圖片自適應

一、uniapp自適應布局

uniapp框架自帶的flex布局可以很方便地實現圖片自適應，即使在不同大小的屏幕上也能保持良好的比例。

首先，在布局容器的樣式中添加display:flex;justify-content:center;align-items:center;可以使圖片在容器中水平和垂直居中。

<template>
  <view class="container">
    <image src="../assets/image.png" class="img-item" />
  </view>
</template>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  .img-item {
    width: 50%;
    height: auto;
  }
</style>

上面的代碼中，將容器的寬度設置為100vw和高度為100vh，確保容器始終為整個屏幕的大小。同時，圖片的寬度為50％，高度自適應，以確保在不同大小的屏幕上圖片的比例始終保持不變。

二、uniapp自適應配置

1. viewport配置

uniapp框架提供了viewport配置，可以讓我們在不同屏幕解析度上獲得一致的顯示效果。在HTML文件的head部分添加下面的代碼即可：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 

其中，width=device-width表示將Viewport的寬度設為設備的等寬視口（也就是視口寬度等於設備寬度），initial-scale=1、minimum-scale=1、maximum-scale=1、user-scalable=no表示禁止用戶縮放網頁。

2. rem適配配置

rem是相對於根元素（即html元素）字體大小的單位，使用rem可以解決手機屏幕解析度不同的問題，保證頁面的自適應，uniapp框架提供rem適配，只需要在項目初始化的時候設置你的設計稿寬度即可，比如我的設計稿是375px，那麼就需要設置下面的代碼：

uni.setMatchedSize({
    width: 375,
    height: 667
}) 

注意，這裡的寬度和高度需要和設計稿保持一致，這樣，uniapp框架就可以根據設計稿的尺寸自適應。

3. 圖片懶載入

圖片懶載入可以減少頁面載入時間，提高用戶的體驗，uniapp框架提供了lazy-load屬性，只需要在image標籤中添加lazy-load即可實現圖片的懶載入，如下所示：

<image src="../assets/image.png" class="img-item" lazy-load />

4. 使用阿里巴巴矢量圖標庫

在移動端應用中，使用矢量圖標庫可以提高應用的性能並減小應用體積，uniapp框架提供了方便的安裝和使用方法。首先需要安裝阿里巴巴矢量圖標庫，安裝方法可以通過命令行運行下面的代碼：

npm install uni-icons -S

然後在需要使用圖標的頁面中引入css文件，如下所示：

import 'uni-icons/css/uni-icons.css';

之後即可在頁面中使用矢量圖標庫中的圖標了，如下所示：

<uni-icons type="icon-back">

5. 使用圖片CDN加速

如果我們的應用中使用了大量的圖片資源，為了讓用戶載入速度更快，可以考慮使用CDN加速技術，uniapp框架提供了易於使用的CDN加速方法。

首先需要在項目根目錄下的vue.config.js文件中添加對應的url，如下所示：

module.exports = {
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].cdn = {
        css: [
        ],
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
          'https://cdn.bootcss.com/axios/0.18.0/axios.min.js'
        ]
      };
      return args;
    });
  }
};

在以上的例子中，我們可以將vue js框架和axios js庫的url地址設置為CDN引用，這樣就可以加速我們的應用載入速度。

三、總結

本文介紹了uniapp框架中圖片自適應的方法，包括使用flex布局、viewport配置、rem適配等相關技術，同時還介紹了使用阿里巴巴矢量圖標庫、圖片懶載入、使用CDN加速等技術。通過以上的方法，可以讓我們的應用在不同屏幕上都能夠保持良好的顯示效果，並提升應用的性能和用戶的體驗。