Advanced customization of uni app [day13]

Apply custom showtoast When updating the version , When a new version of the application is detected , Need to update and download new version , And display the download progress bar . The implementation of the state management module is as follows ：

Start downloading tasks

const downloadTask = uni.downloadFile({		url: data.url,		//  Interface call successful 		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...');					});					}				},		//  Interface call failed 		fail: (err) => {			uni.showToast({				icon:'none',				mask:true,				title: ' Installation failed , Please download again ',			});		},		//  End of interface call 		complete: () => {			downloadTask.offProgressUpdate(); // Cancel listening to loading progress 		}	});	// Monitor download progress 	downloadTask.onProgressUpdate(res => {		state.percent = res.progress;	});

console.log(‘ Download progress percentage :’ + res.progress); Download progress percentage
console.log(‘ The length of downloaded data :’ + res.totalBytesWritten); The length of downloaded data , Company Bytes
console.log(‘ The total length of data that is expected to be downloaded :’ + res.totalBytesExpectedToWrite); / The total length of data that is expected to be downloaded , Company Bytes
The view rendering and control logic are realized by using custom instructions and custom components , Use vuex Realize state management .
First , stay main JS Define global components in , And in inittoast Middle to middle Vue Prototype registration $showtoos.JS To facilitate global invocation .

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

Be careful ：
A method should not have too much code , It should be decoupled in time . about fro loop , When judging a large amount of traffic , It is recommended to use map foreach REDUCT instead of switch
The encapsulation of public methods requires annotations and their parameters and parameter annotations . A single method has a single function and low coupling . Common methods are written in separate files . Those that are often used can be attached to the prototype . It is not recommended to connect frequently used parts to prototypes
The use of interfaces shall be encapsulated separately , To save the code . The request header and its token should be saved uniformly , To maintain the controllability of interface parameters as much as possible
stay uni app Use asynchronous in / wait for
When uni app fallback Display time , It will show that the Internet is not terrible . single click “ retry ” Change the response time of the home page file

As long as the components are installed in project\umodules The directory components Directory or Uni in , And in accordance with components/component name/component name Vue Directory structure . It can be used directly in the page , No reference and registration required .
Example ： There is a component in the component directory uni Zujian. The directory structure is /components/uni zujian/uni zujian Vue, You can use it directly in the template without registration

<template>        <view>            <uni-zujian></uni-zujian><!--  A five pointed star will be displayed here , And the star will automatically light up after clicking  -->        </view>    </template><script>    //  Here there is no import introduce , It doesn't need to be in components Internal registration uni-list Components .template You can use it directly in the library     export default {        data() {            return {            }        }    }</script>