uni-app进阶之自定义【day13】

应用自定义showtoast更新版本时，当检测到应用程序的新版本时，需要更新和下载新版本，并显示下载进度条。状态管理模块的实现如下：

开始下载任务

const downloadTask = uni.downloadFile({
		url: data.url,
		// 接口调用成功
		success: (downloadResult) => {
			uni.hideLoading();
			if (downloadResult.statusCode === 200) {
				plus.runtime.install(downloadResult.tempFilePath, {
						force: false
				}, function() {
					plus.runtime.restart();
				}, function(e) {
					console.error('install fail...');
					});
					}
				},
		// 接口调用失败
		fail: (err) => {
			uni.showToast({
				icon:'none',
				mask:true,
				title: '安装失败，请重新下载',
			});
		},
		// 接口调用结束
		complete: () => {
			downloadTask.offProgressUpdate(); //取消监听加载进度
		}
	});

	//监听下载进度
	downloadTask.onProgressUpdate(res => {
		state.percent = res.progress;

	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

console.log(‘下载进度百分比:’ + res.progress); 下载进度百分比
console.log(‘已经下载的数据长度:’ + res.totalBytesWritten); 已经下载的数据长度，单位 Bytes
console.log(‘预期需要下载的数据总长度:’ + res.totalBytesExpectedToWrite); /预期需要下载的数据总长度，单位 Bytes
使用自定义指令结合自定义组件实现视图渲染和控制逻辑，使用vuex实现状态管理。
首先，在main JS中定义全局组件，并在inittoast中向中的Vue原型注册$showtoos。JS以促进全局调用。

// main.js
import initToast from "@/components/bocft-toast/initToast.js"
import showToast from "@/components/bocft-toast/bocft-toast.vue"

initToast(Vue);
Vue.component('show-toast',showToast);

1
2
3
4
5
6
7

注意：
一个方法不应该有太多的代码，应该及时解耦。对于fro循环，在判断大量流量时，建议使用map foreach REDUCT而不是switch
公共方法的封装需要注释及其参数和参数注释。单一方法具有单一功能和低耦合。常用的方法写在单独的文件中。那些经常使用的可以附加到原型上。不建议将经常使用的部件连接到原型上
接口的使用应单独封装，以保存代码。请求头及其令牌应统一保存，以尽可能保持接口参数的可控性
在uni app中使用异步/等待
当uni app fallback显示时，它将显示网络并不可怕。单击“重试”更改主页文件的响应时间

只要组件安装在project\umodules目录的components目录或Uni中，并且符合components/component name/component name Vue目录结构。它可以直接在页面中使用，无需参考和注册。
示例：组件目录下有一个组件uni Zujian。目录结构为/components/uni zujian/uni zujian Vue，无需注册即可直接在模板中使用

<template>
        <view>
            <uni-zujian></uni-zujian><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
        </view>
    </template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15