关于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-pickerref="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];});},
}