uniapp底部图片不清晰

1. 什么是uniapp以及uniapp底部图片问题

Uniapp是一款基于Vue.js开发跨平台应用的框架，使用uniapp可以开发iOS、Android、H5等多个平台的应用，大幅度减轻了开发者的工作量。然而，与其他开发框架一样，uniapp也存在一些问题，比如在开发底部导航栏时，会遇到底部图片不清晰的问题。

2. 解决uniapp底部图片不清晰问题的方法

2.1 方法一：使用SVG图片

SVG（Scalable Vector Graphics）矢量图是一种基于XML语法的图形格式，具有很好的伸缩性和可编辑性，能够适应不同大小的屏幕分辨率。使用SVG图片可以很好地解决uniapp底部图片不清晰的问题。

// 示例代码
<template>
    <view class="container">
        <view class="tabbar">
            <view class="tab" @click="switchTab(0)" :class="{ active: activeTab === 0 }">
                <svg-icon class="tab-icon" icon="home" :active="activeTab === 0" />
                <text>首页</text>
            </view>
            <view class="tab" @click="switchTab(1)" :class="{ active: activeTab === 1 }">
                <svg-icon class="tab-icon" icon="list" :active="activeTab === 1" />
                <text>列表</text>
            </view>
            <view class="tab" @click="switchTab(2)" :class="{ active: activeTab === 2 }">
                <svg-icon class="tab-icon" icon="user" :active="activeTab === 2" />
                <text>我的</text>
            </view>
        </view>
    </view>
</template>

可以看到，在上面的示例代码中，使用了SVG图片来做底部导航栏的图标。SVG图片的使用需要借助第三方库，如vue-svg-icon组件。这个组件可以在Vue中调用svg图片作为图标，使用简单，效果清晰。

2.2 方法二：调整底部图片大小

如果使用了 png 或 jpg 格式的图片作为底部导航栏的图标，可以调整图片大小，使得图片在屏幕上不失真。如果底部图片的大小过大，可能会被缩小，导致出现模糊的情况。调整图片大小的方法有很多种，比如使用CSS样式、使用第三方库、使用图片处理软件等。下面是使用CSS样式调整图片大小的示例代码：

// CSS样式
.tab-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
// HTML代码
<template>
    <view class="container">
        <view class="tabbar">
            <view class="tab" @click="switchTab(0)" :class="{ active: activeTab === 0 }">
                <image class="tab-icon" src="/static/images/home.png" />
                <text>首页</text>
            </view>
            <view class="tab" @click="switchTab(1)" :class="{ active: activeTab === 1 }">
                <image class="tab-icon" src="/static/images/list.png" />
                <text>列表</text>
            </view>
            <view class="tab" @click="switchTab(2)" :class="{ active: activeTab === 2 }">
                <image class="tab-icon" src="/static/images/user.png" />
                <text>我的</text>
            </view>
        </view>
    </view>
</template>

2.3 方法三：使用字体图标

字体图标是一种可以将图标转为文字的技术。字体图标相对于图片图标有很多优点，比如可以任意缩放而不失真、可以改变颜色等。使用字体图标可以很好地解决uniapp底部图片不清晰的问题。下面是使用字体图标的示例代码：

// HTML代码
<template>
    <view class="container">
        <view class="tabbar">
            <view class="tab" @click="switchTab(0)" :class="{ active: activeTab === 0 }">
                <i class="iconfont icon-home tab-icon" :style="{ color: activeTab === 0 ? '#007aff' : '#999999' }"></i>
                <text>首页</text>
            </view>
            <view class="tab" @click="switchTab(1)" :class="{ active: activeTab === 1 }">
                <i class="iconfont icon-list tab-icon" :style="{ color: activeTab === 1 ? '#007aff' : '#999999' }"></i>
                <text>列表</text>
            </view>
            <view class="tab" @click="switchTab(2)" :class="{ active: activeTab === 2 }">
                <i class="iconfont icon-wode tab-icon" :style="{ color: activeTab === 2 ? '#007aff' : '#999999' }"></i>
                <text>我的</text>
            </view>
        </view>
    </view>
</template>
// CSS样式
@font-face {
    font-family: "iconfont";
    src: url("/static/fonts/iconfont.eot"); /* IE9 */
    src: url("/static/fonts/iconfont.eot#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/static/fonts/iconfont.woff") format("woff"), /* chrome、firefox */
    url("/static/fonts/iconfont.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/static/fonts/iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */
}
.iconfont {
    font-family:"iconfont" !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

3. 总结

uniapp是一款十分优秀的，跨平台的Vue框架，但是在使用过程中可能会遇到一些问题，比如底部图片不清晰。解决这个问题的方法有很多种，我们可以使用SVG图片、调整图片大小、使用字体图标等。无论使用哪种方法，都要注意图片的大小、分辨率等因素，以达到最佳效果。