经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
web app升级—带进度条的App自动更新
来源:cnblogs  作者:邹琼俊  时间:2019/9/19 9:11:26  对本文有异议

  带进度条的App自动更新,效果如下图所示:

    技术:vue、vant-ui、5+

  封装独立组件AppProgress.vue:

  1. <template>
  2. <div>
  3. <van-dialog v-model="show" confirm-button-text="后台下载" class="app-update">
  4. <img src="../../assets/imgs/progress-bar.png" />
  5. <van-progress :percentage="percentageVal" />
  6. <div class="msg">版本更新中,请稍后...</div>
  7. </van-dialog>
  8. </div>
  9. </template>
  10.  
  11. <script>
  12. // app下载进度组件
  13. export default {
  14. props: {
  15. // 进度值
  16. percentageVal: {
  17. type: Number,
  18. default: 0
  19. },
  20. // 是否显示弹窗
  21. show: {
  22. type: Boolean,
  23. default: false
  24. }
  25. },
  26. data() {
  27. return {}
  28. }
  29. }
  30. </script>
  31.  
  32. <style lang="scss" scoped>
  33. img {
  34. width: 270px;
  35. height: 163px;
  36. position: fixed;
  37. top: -35px;
  38. z-index: 2200;
  39. }
  40. </style>
  41. <style lang="scss">
  42. .app-update.van-dialog {
  43. overflow: visible;
  44. width: 270px;
  45. border-radius: 12px;
  46. .van-progress {
  47. margin-top: 124px;
  48. z-index: 2300;
  49. }
  50. .msg {
  51. font-size: 16px;
  52. font-weight: 600;
  53. color: white;
  54. position: absolute;
  55. top: 50px;
  56. z-index: 2300;
  57. width: 100%;
  58. text-align: center;
  59. }
  60. .van-dialog__footer {
  61. border-radius: 12px;
  62. .van-button--default {
  63. .van-button__text {
  64. width: 105px;
  65. height: 26px;
  66. border-radius: 13px;
  67. background-color: #006eff;
  68. color: white;
  69. font-weight: 600;
  70. font-size: 12px;
  71. display: inline-block;
  72. margin-top: 10px;
  73. line-height: 26px;
  74. }
  75. }
  76. }
  77. }
  78. </style>

app升级代码,封装独立js文件:appUpdateOptions.js

  1. /**
  2. * IOS 包发布到应用市场后要更新此处的ID,替换掉测试ID:1053012308
  3. */
  4. /* eslint-disable no-undef */
  5. import { getVersion } from '@/services/login';
  6. import request from '../../api/ajax.js';
  7. import { Dialog } from 'vant';
  8. import expiredStorage from '@/utils/expiredStorage.js';
  9. function sleep(numberMillis) {
  10. var now = new Date();
  11. var exitTime = now.getTime() + numberMillis;
  12. while (true) {
  13. now = new Date();
  14. if (now.getTime() > exitTime) return;
  15. }
  16. }
  17. // Vue继承的基础对象
  18. export default {
  19. data() {
  20. return {
  21. show: false,
  22. percentageVal: 0
  23. };
  24. },
  25. methods: {
  26. appUpdate(ismanual) {
  27. const that = this;
  28. console.log('appUpdate');
  29. // 获取5+运行环境的版本号
  30. console.log('5+ Runtime version:' + plus.runtime.innerVersion);
  31. plus.runtime.getProperty(plus.runtime.appid, function(inf) {
  32. const ver = inf.version;
  33. console.log('ver:' + ver);
  34. var ua = navigator.userAgent.toLowerCase();
  35. // 苹果手机
  36. if (/iphone|ipad|ipod/.test(ua)) {
  37. // 获取当前上架APPStore版本信息
  38. request
  39. .get('https://itunes.apple.com/lookup?id=1053012308', {
  40. id: 1053012308 // APP唯一标识ID
  41. })
  42. .then(data => {
  43. console.log('data:' + JSON.stringify(data));
  44. var resultCount = data.resultCount;
  45. for (var i = 0; i < resultCount; i++) {
  46. var normItem = data.results[i].version;
  47. console.log('normItem:' + normItem);
  48. if (normItem > ver) {
  49. var _msg = '发现新版本:V' + normItem;
  50. // plus.nativeUI.alert("发现新版本:V" + normItem);
  51. Dialog.confirm({
  52. title: '升级确认',
  53. message: _msg
  54. })
  55. .then(() => {
  56. // on confirm
  57. // 执行升级操作
  58. document.location.href =
  59. 'https://itunes.apple.com/cn/app/id1053012308?mt=8'; // 上新APPStore下载地址
  60. })
  61. .catch(() => {
  62. // on cancel
  63. expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天内不再显示升级提示
  64. });
  65. return;
  66. }
  67. }
  68. if (ismanual) {
  69. plus.nativeUI.toast('当前版本号已是最新');
  70. }
  71. });
  72. } else if (/android/.test(ua)) {
  73. getVersion().then(res => {
  74. console.log('data:' + JSON.stringify(res));
  75. if ((res.code = 200 && res.data.version > ver)) {
  76. var _msg = '发现新版本:V' + res.data.version;
  77. const apkUrl = res.data.redirectUrl;
  78. Dialog.confirm({
  79. title: '升级确认',
  80. message: _msg
  81. })
  82. .then(() => {
  83. // on confirm
  84. // 执行升级操作
  85. console.log('apkUrl :', apkUrl);
  86. // plus.nativeUI.toast('正在准备环境,请稍后!');
  87. that.show = true;
  88. var dtask = plus.downloader.createDownload(
  89. apkUrl,
  90. {},
  91. function(d, status) {
  92. if (status == 200) {
  93. // sleep(1000);
  94. var path = d.filename; // 下载apk
  95. plus.runtime.install(path); // 自动安装apk文件
  96. that.show = false;
  97. } else {
  98. plus.nativeUI.alert('版本更新失败:' + status);
  99. that.show = false;
  100. }
  101. }
  102. );
  103. try {
  104. dtask.start(); // 开启下载的任务
  105. var prg = 0;
  106. // var showLoading = plus.nativeUI.showWaiting(
  107. // '版本更新中,请稍后!'
  108. // ); // 创建一个showWaiting对象
  109. dtask.addEventListener('statechanged', function(
  110. task,
  111. status
  112. ) {
  113. // 给下载任务设置一个监听 并根据状态 做操作
  114. switch (task.state) {
  115. case 1:
  116. // showLoading.setTitle('正在下载');
  117. break;
  118. case 2:
  119. // showLoading.setTitle('已连接到服务器');
  120. break;
  121. case 3:
  122. prg = parseInt(
  123. (parseFloat(task.downloadedSize) /
  124. parseFloat(task.totalSize)) *
  125. 100
  126. );
  127. that.percentageVal = prg;
  128. break;
  129. case 4:
  130. that.show = false;
  131. break;
  132. }
  133. });
  134. } catch (err) {
  135. that.show = false;
  136. if (ismanual) {
  137. plus.nativeUI.toast('网络异常,请稍候再试' + err);
  138. }
  139. }
  140. })
  141. .catch(error => {
  142. // on cancel
  143. console.log('error :', error);
  144. that.show = false;
  145. expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天内不再显示升级提示
  146. });
  147. } else {
  148. console.log('当前版本号已是最新');
  149. if (ismanual) {
  150. plus.nativeUI.toast('当前版本号已是最新');
  151. }
  152. }
  153. });
  154. }
  155. });
  156. }
  157. }
  158. };

调用代码:

  1. import appUpdateOptions from '@/utils/mixins/appUpdateOptions.js'
  2. import AppProgress from '@/components/common/AppProgress.vue';
  3. export default {
  4. components: { AppProgress },
  5. props: {},
  6. mixins: [appUpdateOptions],
  7. methods: {
  8. // app更新
  9. appUpdateFuc() {
  10. const that = this;
  11. that.$mui.plusReady(function() {
  12. that.appUpdate(true);
  13. });
  14. },

结束.......

原文链接:http://www.cnblogs.com/jiekzou/p/11544116.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号