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;	});

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

// main.jsimport initToast from "@/components/bocft-toast/initToast.js"import showToast from "@/components/bocft-toast/bocft-toast.vue"initToast(Vue);Vue.component('show-toast',showToast);

注意：
一个方法不应该有太多的代码，应该及时解耦。对于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>