versionUpgrade.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <view>
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="main">
  5. <view class="imgBox">
  6. <image src="/static/logo-icon.png" mode="widthFix"></image>
  7. <text>版本 {{appInfo.ver}}</text>
  8. </view>
  9. <view class="title">更新描述:</view>
  10. <view class="txt">{{appInfo.info}}</view>
  11. </view>
  12. <view class="btnBox">
  13. <view v-if="startProgress" class="smallTitle">
  14. <view>下载进度:{{ downloadProgress }}%</view>
  15. <u-line-progress active-color="#3775F6" :show-percent="false" :percent="downloadProgress">
  16. </u-line-progress>
  17. </view>
  18. <view class="btn" v-else @click="handleUpdate()">立即更新</view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. config: {
  27. back: true,
  28. title: '版本升级',
  29. color: '#1a1a1a',
  30. backgroundColor: [1, "#fff"],
  31. statusBarFontColor: 'black',
  32. },
  33. appInfo: {},
  34. startProgress: false, // 下载进行 - 标记
  35. downloadProgress: 0
  36. }
  37. },
  38. onLoad() {
  39. this.getAppInfo()
  40. },
  41. methods: {
  42. // 获取更新信息
  43. getAppInfo() {
  44. this.$http.get('/app/config/info').then(res => {
  45. if (res && res.code == 200) {
  46. this.appInfo = res.data
  47. }
  48. })
  49. },
  50. // 开始下载任务
  51. createTask(downloadLink) {
  52. console.log("下载链接" + downloadLink)
  53. this.downloadProgress = 0;
  54. this.startProgress = true;
  55. // 创建下载任务对象
  56. this.downloadTask = uni.downloadFile({
  57. url: downloadLink,
  58. success: res => {
  59. if (res.statusCode === 200) {
  60. // 保存下载的安装包
  61. uni.saveFile({
  62. tempFilePath: res.tempFilePath,
  63. success: res => {
  64. this.packgePath = res.savedFilePath;
  65. // 进行安装
  66. this.installPackge();
  67. // 任务完成,关闭下载任务
  68. this.closeTask();
  69. }
  70. });
  71. }
  72. }
  73. });
  74. this.downloadTask.onProgressUpdate(res => {
  75. this.downloadProgress = res.progress;
  76. this.$forceUpdate()
  77. console.log(res.progress)
  78. });
  79. },
  80. // 关闭下载任务
  81. closeTask() {
  82. this.downloadTask.abort();
  83. this.downloadTask = null;
  84. this.startProgress = false;
  85. },
  86. installPackge() {
  87. // 安装更新
  88. plus.runtime.install(this.packgePath, {
  89. force: true
  90. });
  91. this.installed = true;
  92. // 保存更新记录到stroage,方便下次启动app时删除安装包
  93. uni.setStorage({
  94. key: 'updated',
  95. data: {
  96. completed: true,
  97. packgePath: this.packgePath
  98. },
  99. success: res => {
  100. console.log('成功保存更新记录');
  101. // console.log(res.data)
  102. }
  103. });
  104. // 判断是否为热更新(判断文件名中是否含有.wgt)
  105. console.log(8888888888888888888888 + this.packgePath);
  106. if (this.packgePath.match(RegExp(/.wgt/))) {
  107. console.log("9999999999999")
  108. this.installed = false;
  109. uni.showModal({
  110. title: '提示',
  111. content: '应用将重启以完成更新',
  112. showCancel: false,
  113. complete: () => {
  114. plus.runtime.restart();
  115. }
  116. });
  117. }
  118. },
  119. // 取得最新版本及其所有信息
  120. // async getLatest() {
  121. // console.log("gengxinyemian")
  122. // this.info = '正在加载'; // 主标题显示版本号
  123. // this.Minfo = '未知'; // 副标题显示版本类型
  124. // this.updateInfo = '无'; // 更新摘要
  125. // this.buttonLoading = true;
  126. // this.verInfo = null;
  127. // let res = await this.$http.get('/app/config/info');
  128. // if (res.code == 200) {
  129. // this.buttonLoading = false;
  130. // console.log("gengxinxixi"+JSON.stringify(res.data))
  131. // this.info = res.data.name;
  132. // this.Minfo = res.data.ver;
  133. // this.updateInfo = res.data.info;
  134. // this.packgeSize = res.data.packge_size + 'MB';
  135. // this.verInfo = res.data;
  136. // if (this.verInfo) {
  137. // this.checkLatest(this.verInfo);
  138. // }
  139. // }
  140. // },
  141. handleUpdate() {
  142. // 判断系统类型
  143. if (plus.os.name.toLowerCase() === 'android') {
  144. if (this.appInfo.android_link && this.appInfo.android_link !== '#') {
  145. this.createTask(this.appInfo.android_link);
  146. } else {
  147. this.showToast('未找到下载地址');
  148. }
  149. } else {
  150. if (this.appInfo.ios_link && this.appInfo.ios_link !== '#') {
  151. // 我这里默认#也是没有地址,请根据业务自行修改
  152. // 苹果(A):进行热更新(如果iosUrl是wgt更新包的下载地址)判断文件名中是否含有.wgt
  153. if (this.appInfo.ios_link.match(RegExp(/.wgt/))) {
  154. this.createTask(this.appInfo.ios_link);
  155. } else {
  156. // 苹果(B):打开商店链接(如果iosUrl是苹果商店的地址)
  157. plus.runtime.openURL(this.appInfo.ios_link);
  158. }
  159. } else {
  160. this.showToast('未找到ios商店地址');
  161. }
  162. }
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="scss">
  168. .main {
  169. padding-top: 170rpx;
  170. padding: 170rpx 100rpx 0;
  171. .imgBox {
  172. text-align: center;
  173. font-size: 28rpx;
  174. color: #666666;
  175. image {
  176. display: block;
  177. width: 75rpx;
  178. height: 75rpx;
  179. margin: 10rpx auto;
  180. }
  181. }
  182. .title {
  183. font-size: 30rpx;
  184. color: #1A1A1A;
  185. margin-bottom: 10rpx;
  186. margin: 52rpx 0 10rpx;
  187. }
  188. .txt {
  189. color: #808080;
  190. font-size: 26rpx;
  191. }
  192. }
  193. .btnBox {
  194. width: 100%;
  195. position: fixed;
  196. bottom: 100rpx;
  197. .smallTitle {
  198. padding: 0 50rpx;
  199. text-align: center;
  200. }
  201. .btn {
  202. width: 540rpx;
  203. height: 80rpx;
  204. font-size: 32rpx;
  205. color: #FFFFFF;
  206. background: #FA6138;
  207. border-radius: 40rpx;
  208. text-align: center;
  209. line-height: 80rpx;
  210. margin: auto;
  211. }
  212. }
  213. </style>