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. 组件代码：<template>

<view class="APP-DOW">

<view class="title-image">

<image class="Dow-title-img title-image-img" src="../../static/dow.png" mode=""></image>

</view>

<view class="Dow">

<view class="Dow-title">

<view><text class="Dow-title-text">发现新版本，正在为您更新...</text></view>

<view class="Dow-title-img"></view>

</view>

<view class="Con">

<view class="Dow-content">

<view><text class="Dow-text">{{data.memo}}</text></view>

<!-- <view><text>2.这是升级说明...</text></view>

<view><text>3.这是升级说明...</text></view> -->

</view>

<view class="Rate" v-if="state">

<view class="Rate-pro">

<progress :percent="percent" activeColor="#ffec43" stroke-width="10" @activeend="onAct" />

</view>

<view><text class="Rate-text">( {{Written.Bytes}}MB/{{Written.Expected}}MB )正在下载中...</text></view>

</view>

<view v-else class="Con-bott"></view>

</view>

<view class="Dow-button" v-if="!state">

<view @click="onCancel" class="Dow-button-left Dow-button-item" hover-class="Dow-button-hover">

<text class="Dow-button-text" hover-class="Dow-button-hover">取消</text>

</view>

<view @click="onDownload" class="Dow-button-right Dow-button-item" hover-class="Dow-button-hover">

<text class="Dow-button-text" hover-class="Dow-button-hover">升级</text>

</view>

</view>

</view>

</view>

</template>

<script>

const ast = require("@/components/request/nvue.js")

export default {

data() {

return {

state: false,

data: "",

percent: 0,

Written: {

Bytes: 0,

Expected: 0,

}

}

},

onBackPress(event) {

//下面是可返回

if (plus.device.isWakelock()) {

plus.device.setWakelock(false);

};

if (event.from == 'navigateBack') { //navigateBack 方法返回

return false;

};

if (this.state) {

ast.toast("正在更新，请勿操作")

return true;

}

},

onLoad(options) {

if (options.data) {

this.data = JSON.parse(options.data);

}

},

methods: {

onCancel() {

uni.setStorageSync("Update","2")

uni.navigateBack();

uni.$emit('Cancel')

},

onDownload() {

this.state = true;

plus.device.setWakelock(true);

var Down = uni.downloadFile({

url: this.data.url,

success: (res) => {

plus.device.setWakelock(false);

plus.runtime.install(res.tempFilePath, {}, (res) => {

//安装成功

plus.runtime.quit();

}, (res) => {

//安装失败

})

},

fail: (res) => {

plus.device.setWakelock(false);

ast.toast("更新失败，请在网络环境良好的环境更新。");

}

});

Down.onProgressUpdate((res) => {

this.percent = res.progress;

this.Written.Bytes = (res.totalBytesWritten / 1024 / 1024).toFixed(2);

this.Written.Expected = (res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2);

});

},

}

}

</script>

<style lang="scss" scoped>

.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;

}

}

</style>

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

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

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