当前位置：网站首页>uni-app进阶之自定义【day13】

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

2022-07-18 00:33:00 【InfoQ】

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

null
开始下载任务

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

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

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://xie.infoq.cn/article/35c14b149a03856fba92a6d2a

边栏推荐

猜你喜欢

随机推荐