1. 桌面新建立空文件夹widget，然后里面再建立空文件夹html,把vue打包的dist里面的代码全部复制到这个html文件夹里面

（我的vue代码打包的时候，main.js 文件里面变量const test = true; // 我的true为打包正式环境，false 为浏览器本地调试, 没有的可忽略括号里面的文字）

2. 压缩widget文件夹为widget.zip

3. 浏览器打开并登陆apicloud账户。找到这个项目，然后点击云修复，上传刚才的widget.zip然后写第一个文本框，再次写入自己的更新提示内容 提交

image.png

（我的是 {"grade":"v0.0.1","reason":"['1、修复了部分BUG','2、优化了用户体验']"}）前端自己写方法获取并提示到页面 并调用检测更新方法去更新

image.png

检测更新代码

 //检查更新
    isUpdate() {
      mam = api.require("mam");
      var _this = this;
      mam.checkSmartUpdate(function(ret, err) {
        if (ret) {
          if (ret.packages.length == 0) {
            if (_this.type == 1) {
              _this.$emit("updateClose");
              _this.Toast("当前已是最新版本了~");
            }
            return;
          }

          _this.show = true;
          _this.reason = ret.packages[0].extra;
          _this.reason = JSON.parse(_this.reason);
          _this.reason.reason = eval("(" + _this.reason.reason + ")"); //这里取到 ['1、修复了部分BUG','2、优化了用户体验'] 这个内容并显示到页面
        }
      });
    },

云修复更新代码

  //更新
    updateEvent() {
      var _this = this;
      mam = api.require("mam");
      mam.startSmartUpdate(function(res, err) {
        if (res) {
          if (1 == res.state) {
            _this.isProgress = true;
            _this.progressNum= res.progress-0>100?100:parseInt(res.progress-0);  //进度条
          }
          if (3 == res.state) {
            _this.Toast("更新完成");
            setTimeout(res => {
              _this.Toast.clear();
            }, 300);
            setTimeout(function() {
              api.rebootApp(); //重启aAPP
            }, 800);
          }
          if (4 == res.state) {
            _this.Toast("更新失败", "请重试");
            _this.isProgress = false;
            setTimeout(res => {
              _this.Toast.clear();
            }, 300);
          }
        }
      });
    },

我的更新组件完整代码

<template>
  <div class="updateEdition">
    <van-popup v-model="show" class="updateBox" @closed="close" :close-on-click-overlay="false">
      <div class="titles size20 bold pad_t_70 a_left" style="color:#fff;">增量修复</div>
      <!--  -->
      <!-- <div class="versionNumber c_fff size14 mar_t_6" >{{reason.grade}}</div> -->
      <div class="content flex1  size14 c_222 left_text">
        <div class="div">
          <!-- <p class="name">新增**功能</p> -->
          <p class="detail mar_t_5" v-for="(item,i) in reason.reason" :key="i">{{item}}</p>
        </div>
      </div>
      <div class="confirmBtn mar_t_15" @click="updateEvent" v-show="!isProgress">立即修复</div>
      <div v-show="isProgress" class="flex hei8 align_center">
        <div class="flex1 hei00 deeperBox">
          <div class="bg_blue hei00 deeperLine" :style="{width:progressNum+'%'}"></div>
        </div>
        <div class="mar_l_5 blue">{{parseInt(progressNum)}}%</div>
        <!-- <van-progress :percentage="progressNum"  stroke-width="8" /> -->
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapActions } from "vuex";
var mam;
export default {
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show:false,
      isProgress: false,
      // reason: {} //更新信息
      reason: {}, //更新信息
      progressNum:0
    };
  },
  watch: {},
  mounted() {
    // 热更新;
    // this.show = true;
    this.isUpdate();
    // setInterval(() => {
    //   console.log(this.progressNum)
    //   this.progressNum=this.progressNum+1;
    //   if(this.progressNum==100){
    //     this.progressNum=0;
    //   }
    // }, 300);
  },
  methods: {
    //检查更新
    isUpdate() {
        
      mam = api.require("mam");
      var _this = this;
      mam.checkSmartUpdate(function(ret, err) {
        if (ret) {
          if (ret.packages.length == 0) {
            if (_this.type == 1) {
              _this.$emit("updateClose");
              _this.Toast("当前已是最新版本了~");
            }
            return;
          }

          _this.show = true;
          _this.reason = ret.packages[0].extra;
          _this.reason = JSON.parse(_this.reason);
          _this.reason.reason = eval("(" + _this.reason.reason + ")");
        }
      });
    },
    //更新
    updateEvent() {
      var _this = this;
      mam = api.require("mam");
      mam.startSmartUpdate(function(res, err) {
        if (res) {
          if (1 == res.state) {
            _this.isProgress = true;
            _this.progressNum= res.progress-0>100?100:parseInt(res.progress-0);  //进度条
          }
          if (3 == res.state) {
            _this.Toast("更新完成");
            setTimeout(res => {
              _this.Toast.clear();
            }, 300);
            setTimeout(function() {
              api.rebootApp(); //重启aAPP
            }, 800);
          }
          if (4 == res.state) {
            _this.Toast("更新失败", "请重试");
            _this.isProgress = false;
            setTimeout(res => {
              _this.Toast.clear();
            }, 300);
          }
        }
      });
    },
    //关闭
    close() {
      this.$emit("updateClose");
    }
  },
  computed: {}
};
</script>
<style lang="scss">
.updateEdition {
  .van-popup__close-icon--top-right {
    top: 7px;
    right: 10px;
  }
  .van-icon-cross:before {
    color: #fff;
  }
}
</style>
<style lang="scss" scoped>
.updateEdition {
  .deeperBox{
    width: 100%;
    background: #ebedf0;;
    border-radius: 1px;
  }
  .deeperLine{
    transition: width 1s ease;
    border-radius: 1px;
  }
  .updateBox {
  
    width: 280px;
    height: 380px;
    // height: 325px;
    padding: 21px 40px 27px;
    background: url(../assets/images/home/updateBg1.png) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    text-align: center;
    .content {
      overflow-y: auto;
      margin-top: 110px;
    }
    .confirmBtn {
      width: 100%;
      height: 35px;
      line-height: 35px;
      background: $btn;
      border-radius: 3px;
      font-size: 16px;
      color: #fff;
      font-weight: 500;;
      text-align: center;
    }
  }
}
</style>