移动端工作心得

1.移动端适配问题

在这里使用的是手淘的flexible，直接把这个文件拷贝进项目，并在页面渲染之前使用即可。
我们适配主要是涉及使用px的时候，比如width/height/margin/padding等，所以我们使用sass 做了一个px转成rem，如下

@function px2rem($px, $base-font-size: 75px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    } @else if (unit($px) == rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}
//使用
height: px2rem(80px);

那个$base-font-size可根据UI给的图而定，我们用的750的，所以就定为75px
对于字体：

@mixin font-dpr($font-size) {
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
//使用
@include font-dpr(14px);

这里就是针对不同dpr设备做一个分类。
对于居中：

//使用前将父元素的宽高设置好，自元素引入，会自动填充
@mixin center{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}
@mixin centerY{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
}
@mixin centerX{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
}

也是使用flex来实现，要注意的就是元素的宽高需要自己另外设置，不然就是根据填充内容定。

2.js工具

深拷贝

JSON.parse(JSON.stringify(data));

用这个基本的对象数组都可以完美实现，但是要注意如果元素有函数，那么会转成undefined，但是对于基本业务来说够用了，至于有函数怎么转暂时还没做研究（大概是懒）。

转化数字为千分位

function toThousands(number) {
        var number = String(number).split('.');
        var num = (number[0] || 0).toString(), result = '';
        while (num.length > 3) {
            result = ',' + num.slice(-3) + result;
            num = num.slice(0, num.length - 3);
        }
        if (num) { result = num + result; }
        return result+(number[1]?('.'+number[1]):'');
    }

有小数也可以

使用storage

我们经常会使用storage帮我们去存储一些信息，但是最好在存储的时候加密，最起码用base64加密

vue-router

1.在使用路由跳转尽量不要使用push去改变路由，尤其移动端页面，跳来跳去，路由对战堆栈就会有很多，使用返回按钮就会很烦，往往按了很多次都跳不出去，建议使用replace。
2.暂时未找到路由回退的监听。
3.在页面监听页面路由变化时可以监听$route, 相信有一部分人都没用过。

 watch:{
            '$route'(newVal, oldVal){
                if(newVal.matched[0].name == "main"){
                    this.currentTab = newVal.path;
                }
            }
        },

vuex使用

只说一下注意点吧，它只能作为数据临时保存，相当于搞了一个全局变量，所以一些请求接口用的公共数据还是要通过storage保存，因为刷新页面vuex中的数据会重制。
对于一些简单的应用，没必要用vuex，直接用eventBus就可以解决非父子组件通信。

vue中model-view

对于对象或者数组类型的数据，我们会发现有时候改变了但是页面没有渲染出来，这是因为无法监测到数据变化，自然也就不回重新渲染，可以使用以下方法：

1.this.$set()//官方提供
2.数组的一些可以改变的方法，push,pop,shift,unshift,splice等

深度监控

watch:{
            goodsList:{
                deep:true,//表示深度监控
                immediate: true,//将立即以表达式的当前值触发回调
                handler: function(val, oldVal){
                   
                    }
                }
            }
        }

图片资源

当使用img标签，并且想变量来表示url加载本地图片，一定要用require(url)，否则加载不到。
关于mint-ui的一些坑，大部分都可以在官方的issue中得到解决。

最后编辑于：2017.12.10 10:08:01