M聊注册界面解析在移动端如果用户上传的图片过大，就会造成加载缓慢。要么就得限制用户上传大图片，要么通过canvas来压缩

功能清单

/page/resign.vue

1、上传头像

2、输入用户名

3、输入域密码

4、确认密码

5、注册

重点难点

1、上传图片大图压缩成小图

2、左右滑动返回

页面布局

1、引用了loading.vue加载

2、引用了v-updown.vue图片上传组件

3、使用vuex来存储我们的状态

4、使用keep-alive来保存页面

上传图片组件

在移动端如果用户上传的图片过大，就会造成加载缓慢。要么就得限制用户上传大图片，要么通过canvas来压缩图片,所以我们选择后者通过压缩图片吧大图改成小图，移动端我设置默认宽高定义750像素；

/base/upload.vue

 <template>
    <input @change="inputChang" multil name="file" type="file" id="jjfxSoft_iconPath">
</template>
<script>

export default {
  props: {
    maxWidth: { //默认750尺寸
      type: Number,
      default: 750
    },
    maxHeight: {
      type: Number,
      default: 750
    }
  },
  mounted() {
    this.init(); //初始化image图片
  },
  data() {
    return {};
  },
  methods: {
    init() {
      let eleFile = document.querySelector("#jjfxSoft_iconPath");
      let reader = new FileReader(),
        img = new Image();
      this.reader = reader;
      // 选择的文件对象
      reader.onload = function(e) {
        img.src = e.target.result;
      };
      let _this = this;
      img.onload = function() {
        // 图片原始尺寸
        let originWidth = this.width;
        let originHeight = this.height;
        // 最大尺寸限制
        let maxWidth = _this.maxWidth,
          maxHeight = _this.maxHeight;
        // 目标尺寸
        let targetWidth = originWidth,
          targetHeight = originHeight;
        // 图片尺寸超过750x750的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
        }
        _this.canvas(targetWidth, targetHeight, img);
      };
    },
    //运用canvas来压缩图片
    canvas(targetWidth, targetHeight, img) {
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      context.clearRect(0, 0, targetWidth, targetHeight);
      context.drawImage(img, 0, 0, targetWidth, targetHeight);
      let type = "image/jpeg";
      let dataurl = canvas.toDataURL(type);
      this.ajaxImg(dataurl);
    },
    //选择图片的时候
    inputChang(event) {
      let file = event.target.files[0];
      if (!file) return; //如果没选择
      // 选择的文件是图片
      if (file.type.indexOf("image") == 0) { //判断是不是image图片
        this.reader.readAsDataURL(file);
      } else {
        this.$emit("errUpload", "请选择图片"); //告诉父组件请选择图片;
      }
    },
    ajaxImg(url) {
      this.$emit('sendBefor') //请求开始前
      this.$http.post("/uploadImg", { url }).then(res => {
        if (res.data.code) {
          this.$emit("uploadImg", res.data.list); //请求成功后
        } else {
          this.$emit("errUpload", res.data.message); //返回错误信息
        }
        this.$emit('sendAfter') //请求成功与失败
      });
    }
  }
};
</script>

onresize方法

该方法就是监听手机按键弹起来，让整个屏幕弹起来；手机按键收起来就回复原状;首先我们获取手机高度，通过监听resize来判断手机按键弹起来的屏幕高度，用原来的高度减去手机按键弹起来的高度超过50，就让整个input输入向上50像素，相反就恢复原状;

vuex这里的用途

用户登录成功会返回用户信息，存储在vuex中，因为后面用户自己修改自己信息，所以通过vuex来可以实时更新用户信息;不需要再次登录;

选择头像

v-lazy用的一个图片懒加载来生成默认图片，运用了transform和transition来达到手指滑动返回的动画效果;我们引用了mixin混合来抽离公共组件达到页面共用的js;slideMixins下次再讲;

/pages/photo

<template>
  <transition
              @before-enter="BeforeEnter"
              @enter="enter"
              @after-leave="AfterLeave"
  >
    <div
      class="photo"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      ref="slide"
    >
      <scroll class="scroll" ref="scroll">
        <div class="img-content">
          <div class="title">男生头像</div>
          <div
            class="li"
            v-for="item in 20"
            :key="item"
            :class="{active:item==currentIndex}"
            @click="currentClick(item)"
          >
            <img v-lazy="'http://cdn.mmys.fun/'+item+'.jpg'" @load="ImgLoad" :key="item" alt>
          </div>
          <div class="title">女生头像</div>
          <div
            class="li"
            v-for="item in woman"
            :key="item"
            :class="{active:item==currentIndex}"
            @click="currentClick(item)"
          >
            <img v-lazy="'http://cdn.mmys.fun/'+item+'.jpg'"  @load="ImgLoad" :key="item" alt>
          </div>
        </div>
      </scroll>
    </div>
  </transition>
</template>
<script>
import Scroll from "../base/scroll.vue";
import { slideMinxins } from "../assets/js/mixin.js";
export default {
  mixins: [slideMinxins],
  components: {
    Scroll
  },
  watch: {
    photo(val) {
      if (val) {
        setTimeout(() => {
          this.$refs.scroll.refresh();
        }, 20);
      } else {
        this.currentIndex = 0;
      }
    }
  },
  data() {
    return {
      woman: [
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        32,
        33,
        34,
        35,
        36,
        37,
        38,
        39,
        40
      ],
      currentIndex: 0
    };
  },
  methods: {
    currentClick(index) {
      let slideWidth = this.$refs.slide.clientWidth;
      this.currentIndex = index;
      this.$emit("updownImg", "http://cdn.mmys.fun/" + index + ".jpg");
      this.$refs.slide.style.transition = `transform 0.3s ease-in-out`
      this.$refs.slide.style.transform = `translate3d(${slideWidth}px,0,0)`
      this.cancel();
    },
    cancel() {
      this.$router.back()//路由返回
    },
    ImgLoad(){
      this.$refs.scroll.refresh();//better-scroll的刷新
    }
  }
};
</script>

移动端（微信）访问

app下载

微信扫码之后请选择在浏览器打开，更好体验请选择下载app体验

项目概况