关于H5移动端的一点小总结

最近我们开发了一个招聘系统，一周时间同时上线PC端和移动端，我的个天啦!累的不行，还好团队配合的非常好，不像上家公司那傻X需求、主程老是为了自己一点利益勾心斗角的（只能在心里问候他们全家，祝他们生孩子没屁眼）。现在为这个移动端招聘系统做一个小总结：

 
 created () {
            this.baseVal = 750;  // 750为移动端UI图的宽度，即750px;
            this.rem(100); // 定义100px 为 1rem ，从而确定移动端的比率
            on(window, 'resize', this.resizeFn);

            EventBus.$on('promptMessage', (obj) => {
                // this._$promptMessage(obj);
                this.$Toast(obj.message);
            });
            EventBus.$on('goPage', ({ path }) => {
                this.$router.push({ path });
            });
            let UI = window.sessionStorage.getItem('u-i');
            if (UI) {
                this.setUserInfo(JSON.parse(UI));
                this.setIsLogin(true);
            }
        }, 
    
methods: {
   rem (n) {   // n 为 rem 的比率，也就是1rem等于多少px;
      let r = document.documentElement.clientWidth;  // 获取当前屏幕的宽度
      if (r >= 768) {
         r = 768;
       }
      // document.documentElement.style.fontSize = (r * 100 / (this.baseVal * n)) + 'px';
      document.documentElement.style.fontSize = n * r / this.baseVal + 'px';            // 从上面可以看出，移动端的比例都是根据fontSize来定义的，从而确定rem的比率，这样才能实时适应屏幕大小。
 },
          
 resizeFn () {
    clearTimeout(this.remTimer);
    this.remTimer = setTimeout(() => {
         this.rem(100);
      }, 300);
    }      
}  

我们根据上面代码可以看出，rem的计算公式是： document.documentElement.style.fontSize = n * r / this.baseVal + 'px';
从公式可以看出是根据fontSize的大小来实现屏幕的缩放，下面让我们来分析下每个变量的含义吧！n 为 1rem等于多少px，上面代码就是定义1rem等于100px,而this.baseVal这个变量就是基础变量，也就是UI图的的大小，上面UI图宽度都是750px，根据这两个我们就可以确定了fontSize了，从而实现缩放。这样我们可以把width,height,padding,margin都可以设置成rem为单位的大小。
另外，我们架构师真的是良心，为了最大程度减小大家的不适应，移动端同样适用VUE框架进行开发，但是我们UI框架选用了更适合移动端的mint-ui，附赠官网跳转，这样开发移动简直就是秒上手。

mint-ui日期组件的使用：

// HTML
<mt-datetime-picker
   ref="picker"
   type="date"
    @confirm="handleConfirm"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日"
    v-model="pickerValue">
</mt-datetime-picker>   

methods: {
    openPicker (val) {
       this.$refs.picker.open(); // 打开日期组件
    },     
        
    handleConfirm (val) {   // 点击日期组件的确定按钮
            val = this.formatDate(val, 'YYYY-MM-DD');
            if (this.flags === 1) {
                this.formWork.startTime = val;
            } else {
                this.formWork.endTime = val;
            }
        },

// 时间处理函数
formatDate (time, formatStr) {
            let date = new Date(time);
            let Y = date.getFullYear();
let M = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();
            formatStr = formatStr || 'YYYY-MM-DD H:m:s';
            return formatStr.replace(/YYYY|MM|DD|H|m|s/ig, function (matches) {
                return ({
                    YYYY: Y,
                    MM: M,
                    DD: D,
                    H: h,
                    m: m,
                    s: s
                })[matches];
            });
        },
}