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

作者：黎燃

2022 年 7 月 17 日
本文字数：1332 字
阅读完需：约 4 分钟

应用自定义 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); 已经下载的数据长度，单位 Bytesconsole.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>