uni-ui 版本升级提示做个记录

appUpdate.js

var _maskView, _contentView, _downloadTask, _loadingProgress, _screenHeight, _screenWidth, _config = {
 forceUpgrade: false,
 titleText: "版本更新",
 content: "",
 contentAlign: "left",
 loadingColor: "#329EEE",
 cancelText: "暂不升级",
 cancelColor: "#666",
 confirmText: "立即升级",
 confirmColor: "#329EEE",
 windowHeight: 380,
 packageUrl: "",
 browser: false,
 maskColor: "rgba(0,0,0,0.3)"
 },
 _calculatePosition = function() {
 return {
 top: (_screenHeight - _config.windowHeight) / 2,
 left: _screenWidth * .05,
 width: _screenWidth * .9,
 right: _screenWidth * .05,
 height: _config.windowHeight
 }
 },
 _createMask = function() {
 _maskView = new plus.nativeObj.View("maskView", {
 top: "0px",
 left: "0px",
 width: "100%",
 height: "100%",
 backgroundColor: _config.maskColor
 })
 },
 _createContentView = function() {
 var calculatePosition = _calculatePosition();
 _contentView = new plus.nativeObj.View("contentView", {
 top: calculatePosition.top + "px",
 left: calculatePosition.left + "px",
 height: _config.windowHeight + "px",
 width: calculatePosition.width + "px",
 overflow: "auto"
 });
 _contentView.drawRect({
 color: "#ffffff",
 radius: "20px"
 }, {
 width: "100%",
 height: "100%"
 }, "roundedRect");
 _contentView.drawText(_config.titleText, {
 top: "20px",
 height: "20px",
 }, {
 size: "16px",
 color: "#333",
 align: "center",
 }, "titleText");
 _contentView.drawText(_config.content, {
 top: "60px",
 left: "20px",
 right: "20px",
 height: _config.windowHeight - 120 + "px",
 }, {
 size: "16px",
 color: "#666",
 align: _config.contentAlign,
 verticalAlign: "top",
 whiteSpace: "normal",
 overflow: "ellipsis"
 }, "UpdaterContent");
 _createLoading(-2);
 var top = _config.windowHeight - 60 + 15;
 var fontSize = '16px';
 if (!_config.forceUpgrade) {
 _contentView.drawRichText("" + _config
 .cancelText + "", {
 width: "50%",
 top: top + "px",
 left: "0px"
 }, {
 align: "center",
 onClick: function() {
 close()
 }
 }, "cancel");
 _contentView.drawRichText("" +
 _config.confirmText + "", {
 width: "50%",
 right: "0px",
 top: top + "px"
 }, {
 align: "center",
 onClick: function() {
 _config.packageUrl ? "android" === plus.os.name.toLowerCase() ? _config.browser ? (plus
 .runtime.openURL(_config.packageUrl)) : _createTask() : plus.runtime.openURL(
 _config.packageUrl) : uni.showToast({
 title: "安装包地址为空",
 icon: "none"
 })
 }
 }, "submit")
 } else {
 _contentView.drawRichText("" +
 _config.confirmText + "", {
 width: "100%",
 right: "0px",
 top: top + "px"
 }, {
 align: "center",
 onClick: function() {
 _config.packageUrl ? "android" === plus.os.name.toLowerCase() ? _config.browser ? (plus
 .runtime.openURL(_config.packageUrl)) : _createTask() : plus.runtime.openURL(
 _config.packageUrl) : uni.showToast({
 title: "安装包地址为空",
 icon: "none"
 })
 }
 }, "submit")
 }
 },
 _createLoading = function(progress) {
 var calculatePosition = _calculatePosition();
 var top = _config.windowHeight - 65;
 var width = 0 <= progress ? (calculatePosition.width - 100) / 100 * progress : 0;
 width = parseInt(width);
 var text = 100 <= progress ? "下载完成" : "下载中...";
 var loadingText = "";
 loadingText = -1 == progress ? "资源加载中..." : 0 <= progress ? text + "(" + progress + "%)" : "";
 _contentView.drawRect({
 color: _config.loadingColor
 }, {
 width: width + "px",
 height: "3px",
 left: "20px",
 top: top + "px"
 }, "loading");
 _contentView.drawRichText("" + loadingText + "", {
 width: "100px",
 top: top + "px",
 left: width + "px"
 }, {
 align: "center"
 }, "loadingText")
 },
 _createTask = function() {
 return _downloadTask ? void console.log("正在下载中") : void(_createLoading(-1),
 _downloadTask =
 uni.downloadFile({
 url: _config.packageUrl,
 success: function(res) {
 if (200 === res.statusCode) {
 var tempFilePath = res.tempFilePath;
 uni.saveFile({
 tempFilePath: tempFilePath,
 success: function(res) {
 plus.runtime.install(res.savedFilePath, {
 force: true
 }, function(res) {
 console.log('安装包信息' + JSON.stringify(res))
 }, function(res) {
 uni.showToast({
 title: '安装失败，请检查下载链接',
 icon: 'none',
 duration: 3000
 });
 });
 close();
 }
 })
 }
 }
 }), _downloadTask.onProgressUpdate(function(res) {
 _loadingProgress != res.progress && (_loadingProgress = res.progress, _createLoading(res
 .progress));
 }))
 },
 init = function(option) {
 _screenHeight = plus.screen.resolutionHeight;
 _screenWidth = plus.screen.resolutionWidth;
 _downloadTask = null;
 option.titleText && (_config.titleText = option.titleText);
 option.windowHeight && (_config.windowHeight = option.windowHeight);
 option.forceUpgrade && (_config.forceUpgrade = option.forceUpgrade);
 option.content && (_config.content = option.content);
 option.contentAlign && (_config.contentAlign = option.contentAlign);
 option.loadingColor && (_config.loadingColor = option.loadingColor);
 option.cancelText && (_config.cancelText = option.cancelText);
 option.cancelColor && (_config.cancelColor = option.cancelColor);
 option.confirmText && (_config.confirmText = option.confirmText);
 option.confirmColor && (_config.confirmColor = option.confirmColor);
 option.packageUrl && (_config.packageUrl = option.packageUrl);
 option.browser && (_config.browser = option.browser);
 option.maskColor && (_config.maskColor = option.maskColor);
 _createMask();
 _createContentView();
 },
 show = function() {
 _maskView && _maskView.show();
 _contentView && _contentView.show();
 },
 close = function() {
 _downloadTask && (_downloadTask.abort(), _downloadTask = null, _createLoading(-2));
 _maskView && _maskView.hide();
 _contentView && _contentView.hide();
 };
export default {
 init: init,
 show: show,
 close: close
}

app.vue

引入

import appUpgrade from '@/common/appUpgrade.js';

使用

//升级检测
           uni.getSystemInfo({
               success: (res)=> {
                   uni.setStorageSync('device', res.platform);
                   plus.runtime.getProperty(plus.runtime.appid, (widgetInfo)=> {
                       uni.setStorageSync('version', widgetInfo.version);
                       this.$http.request({
                           url: '/common/getVersion',
                           success: (res) => {
                               if(res.data.data.upgrade=='Y'){
                                   appUpgrade.init({
                                       titleText: '版本更新'+res.data.data.version,
                                       packageUrl:res.data.data.url,
                                       content: res.data.data.content,
                                       forceUpgrade:res.data.data.forceUpgrade=='Y' ? true : false
                                   });
                                   appUpgrade.show();
                               }
                           }
                       });
                   });
               }
           });
           uni.onNetworkStatusChange( (res)=> {
               if(res.isConnected){
                   this.$store.dispatch('get_UserInfo')
               }
           });
           // #endif