Stream saving: The steps to use the uView component are simple, just follow steps 1 and 4, there are two cases if it is useless, (1) If you want to pop up a window to inform the user that the version update is required, you can see steps 1, 2, 3 (2) If you don’t want to notify, just look at steps 1 and 2. The main content of step 3 is that the uView component is not used, and other components are used.
1. You need to obtain the current app version information first.
Note: plus can only be run on the mobile phone app. To run the following code, real machine debugging is required, and the corresponding value can be printed to the page.
plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {<!-- -->
// appInfo is all the information of the current application
console.log(JSON.stringify(appInfo));
// get version name
console.log(appInfo.version);
// Get the version number
console.log(appInfo.versionCode);
// Get the current application id
console.log(appInfo.appid);
});
2. A version updated interface
axios({<!-- -->
url: 'backend interface',
params: {<!-- -->
// 'Parameters to carry'
}
}).then(res => {<!-- -->
let url = res.url
var dtask = plus.downloader.createDownload(url, {<!-- -->},
function(d, status) {<!-- -->
\t\t\t\t\t// Download completed
if (status == 200) {<!-- -->
plus.runtime.install(plus.io.convertLocalFileSystemURL(
d.filename), {<!-- -->}, {<!-- -->}, function(error) {<!-- -->
uni.showToast({<!-- -->
title: 'Installation failed',
duration: 1500
});
})
} else {<!-- -->
uni.showToast({<!-- -->
title: 'Update failed',
duration: 1500
});
}
});
try {<!-- -->
console.log('start download');
dtask.start(); // Start the download task
var prg = 0;
var showLoading = plus. nativeUI. showWaiting(
"Downloading"); //Create a showWaiting object
dtask.addEventListener('statechanged', function(
task,
status
) {<!-- -->
// Set a monitor for the download task and do operations according to the status
switch (task.state) {<!-- -->
case 1:
showLoading.setTitle("Downloading");
break;
case 2:
showLoading.setTitle("Connected to server");
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task. totalSize)) *
100
);
showLoading.setTitle("Downloading" + prg + "% ");
break;
case 4:
plus.nativeUI.closeWaiting();
\t\t\t\t\t\t\t//Download completed
break;
}
});
} catch (err) {<!-- -->
plus.nativeUI.closeWaiting();
uni.showToast({<!-- -->
title: 'Update failed-03',
mask: false,
duration: 1500
});
}
})
3. There are improvements in the appeal code. Generally, when we update the app, an updated modal box will appear to inform the user that it needs to be updated.
The modal box here uses the uView component to achieve the effect, the detailed address
If you don’t want to use it, just follow the second part above, or use the modal box of some other components. The general process is
- Call the back-end interface to check whether the version number is consistent with the current user’s app version. The method of obtaining the current app version number is in the first step
- If it is inconsistent, it will enter the pop-up window we set in advance to inform the user of the current update content. At this time, there are two events in the pop-up window, confirm event and cancel event. Clicking on the confirm event means that the user confirms the update and gets the function of the button Callback, just execute the download process
- Download process: It is the content that we execute after we get the res after calling the section above. You only need to replace the installation package url to use it. It can also be packaged as a utility function.
4. The following is the implementation of using the uview component. If you don’t want to use uview, just read the process of the above text:
Find the components/u-full-screen/u-full-screen.vue file under the uview-ui file
Modify it to the following content, which means that we can realize the complete download function by passing the url parameter and content parameter like this page, url is the address of the installation package, and content is the content description of the version update
<template>
<u-modal v-model="show" confirm-text="upgrade" title="new version found" @confirm="confirm">
<view class="u-update-content">
<rich-text:nodes="content"></rich-text>
</view>
</u-modal>
</template>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
show: false,
content: ``,
}
},
onLoad(option) {<!-- -->
this. content = decodeURIComponent(option. content)
this.url = option.url
console. log(option)
},
onReady() {<!-- -->
this. show = true;
},
methods: {<!-- -->
confirm() {<!-- -->
this. closeModal();
var downloadApkUrl = this.url
var dtask = plus.downloader.createDownload(downloadApkUrl, {<!-- -->},
function(d, status) {<!-- -->
\t\t\t\t
\t\t\t\t\t\t// Download completed
if (status == 200) {<!-- -->
\t\t\t\t
plus.runtime.install(plus.io.convertLocalFileSystemURL(
d.filename), {<!-- -->}, {<!-- -->}, function(error) {<!-- -->
uni.showToast({<!-- -->
title: 'Installation failed',
duration: 1500
});
})
} else {<!-- -->
uni.showToast({<!-- -->
title: 'Update failed',
duration: 1500
});
}
});
try {<!-- -->
dtask.start(); // Start the download task
var prg = 0;
var showLoading = plus. nativeUI. showWaiting(
"Downloading"); //Create a showWaiting object
dtask.addEventListener('statechanged', function(
task,
status
) {<!-- -->
// Set a monitor for the download task and do operations according to the status
switch (task.state) {<!-- -->
case 1:
showLoading.setTitle("Downloading");
break;
case 2:
showLoading.setTitle("Connected to server");
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task. totalSize)) *
100
);
showLoading.setTitle("Downloading" + prg + "% ");
break;
case 4:
plus.nativeUI.closeWaiting();
\t\t\t\t\t\t\t\t//Download completed
break;
}
});
} catch (err) {<!-- -->
plus.nativeUI.closeWaiting();
uni.showToast({<!-- -->
title: 'Update failed-03',
mask: false,
duration: 1500
});
}
\t\t\t\t
},
closeModal() {<!-- -->
uni. navigateBack();
}
}
}
</script>
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
.u-full-content {<!-- -->
background-color: #00C777;
}
.u-update-content {<!-- -->
font-size: 26rpx;
color: $u-content-color;
line-height: 1.7;
padding: 30rpx;
}
</style>
After the transformation of the appeal component is completed, our second code can become
axios({<!-- -->
url: 'backend interface',
params: {<!-- -->
// 'Parameters to carry'
}
}).then(res => {<!-- -->
//Judge whether the return value of the latest version number given by the backend is consistent with the current one
//judgment......if()
//judgment......{}else
//judge......{}
//Don't be brainless cv, see if it conforms to the following return value form, url new package address, content update description content
let url = res.data.url
let content = res.data.content
//this.$u.route, when uview is introduced, it will be automatically mounted, if not, use the normal page jump
this.$u.route(`/uview-ui/components/u-full-screen/u-full-screen?url=${<!-- -->url} & amp;content=${<!- - -->content}`);
})
Ending: Don’t forget that the app also needs an update about the interface, but this is relatively simple