uni-app引入阿里矢量图和一个简单的版本更新组件
作者:刘杰
引入阿里矢量图减少包体积:
1. 在阿里巴巴矢量图标库选择需要的Icon图标添加到购物车。点击下载代码。
2. 在uni-app项目下static文件夹下新建fonts文件夹并导入下载好的的矢量图标文件夹内的iconfont.css 、iconfont.eot 、iconfont.svg 、iconfont.ttf 、iconfont.woff 、iconfont.woff2 文件。
![eba97b82d5fa073987515cacaecf606a.png](https://i-blog.csdnimg.cn/blog_migrate/242ac065c96ace44116bcdd64dd8737f.jpeg)
3. 修改 iconfont.css 文件的 url路径 在路径前面添加 ~@/static/fonts/
![f30fbe98459330ad9f7786b45df8fb84.png](https://i-blog.csdnimg.cn/blog_migrate/bf01e6b0712dec22a90bce63efa548d1.jpeg)
4. 在App.vue 页面引入 icon文件
![06d2946249cd6b87df984fb55a3941ff.png](https://i-blog.csdnimg.cn/blog_migrate/f32252f519930c0e3a227c98887d559a.jpeg)
5. 在uni-app中使用
![ab87fb1fbb871d5772a223e2947404b6.png](https://i-blog.csdnimg.cn/blog_migrate/2b13f136ef5990ad8439c466f1c54ce9.jpeg)
Uni-app 更新组件:
1. 效果图:
![cf717084108ad261112fa008a51b010e.png](https://i-blog.csdnimg.cn/blog_migrate/da8ba3854372c7da4ded20ef03d5457f.jpeg)
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下添加配置
![20d17b401a92e2499b3dfff60aaa5623.png](https://i-blog.csdnimg.cn/blog_migrate/0808bf5ba66b638def494e55e178adeb.jpeg)
5.调用只需要执行页面跳转传入版本介绍、下载地址即可。
![50e90eff8a77b6ffa32f95783aa6682f.png](https://i-blog.csdnimg.cn/blog_migrate/7e940dbd6b5ffd7c27760485335a9259.jpeg)