阿里图标使用iconfont不起作用_程序猿！uni-app引入阿里矢量图和一个简单的版本更新组件...

uni-app引入阿里矢量图和一个简单的版本更新组件

作者：刘杰

引入阿里矢量图减少包体积：

1. 在阿里巴巴矢量图标库选择需要的Icon图标添加到购物车。点击下载代码。

2. 在uni-app项目下static文件夹下新建fonts文件夹并导入下载好的的矢量图标文件夹内的iconfont.css 、iconfont.eot 、iconfont.svg 、iconfont.ttf 、iconfont.woff 、iconfont.woff2 文件。

3. 修改 iconfont.css 文件的 url路径 在路径前面添加 ~@/static/fonts/

4. 在App.vue 页面引入 icon文件

5. 在uni-app中使用

Uni-app 更新组件：

1. 效果图：

2. 组件代码：

发现新版本，正在为您更新...

{{data.memo}}

( {{Written.Bytes}}MB/{{Written.Expected}}MB )正在下载中...

取消

升级

.APP-DOW {

position: fixed;

left: 0;

right: 0;

top: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.4);

justify-content: center;

align-items: center;

}

.Dow {

width: 600rpx;

border-radius: 24rpx;

background-color: #fff;

&-text {

font-size: 28rpx;

text-align: center;

}

&-title {

background-color: #2CC3D8;

border-top-left-radius: 24rpx;

border-top-right-radius: 24rpx;

padding-left: 50rpx;

padding-right: 50rpx;

padding-top: 10rpx;

flex-wrap: nowrap;

flex-direction: row;

align-items: center;

justify-content: space-around;

&-text{

font-size: 34rpx;

color: #ffffff;

}

&-img {

height: 100rpx;

width: 100rpx;

}

}

}

.Dow-button {

position: absolute;

bottom: 0;

left: 0;

right: 0;

flex-direction: row;

justify-content: space-around;

&-item {

flex: 1;

}

&-left {

background-color: #8F8F8F;

border-bottom-left-radius: 24rpx

}

&-right {

background-color: #2CC3D8;

border-bottom-right-radius: 24rpx

}

&-text {

text-align: center;

line-height: 90rpx;

color: #ffffff;

}

&-hover {

background-color: #E6E6E6;

}

}

.Dow-content {

margin-left: 25rpx;

margin-right: 25rpx;

margin-bottom: 35rpx;

}

.Rate {

&-pro {

padding-left: 35rpx;

padding-right: 35rpx;

margin-top: 20rpx;

}

&-text {

text-align: center;

font-size: 26rpx;

line-height: 50rpx;

}

margin-bottom: 60rpx;

}

.Con {

margin-top: 40rpx;

&-bott {

height: 100rpx;

}

}

.title-image {

position: fixed;

left: 0;

right: 0;

top: 0;

bottom: 0;

justify-content: center;

align-items: flex-end;

&-img {

width: 120rpx;

height: 120rpx;

margin-bottom: 300rpx;

margin-right: 45rpx;

}

}

3. 在pages文件夹下新建文件夹update文件夹导入index.nvue 组件代码。

4. 在pages.json配置文件pages下添加配置

5.调用只需要执行页面跳转传入版本介绍、下载地址即可。