友情链接

一 css

1.文字超过span宽度显示...（单行文字）

.topWrap .introduce span {

    padding: 0 17px;

    display: inline-block;

    border-radius: 5px;

    height: 18px;

    line-height: 18px;

    margin-top: 15px;

    max-height: 18px;

    max-width: 90%;

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow: hidden;

    color: #fff;

    font-size: 12px;

}

2.文字超过span宽度显示...（多行文字）

.content .dynamicList .dynamicText p {

    max-height: 162px;

    font-size: 16px;

    color: #000;

    line-height: 20px;

    padding-bottom: 5px;

    overflow: hidden;

    max-height: 100%;

    text-overflow:ellipsis;

    display: -webkit-box;

    -webkit-line-clamp:8;／／最多显示8行

    -webkit-box-orient:vertical;

}

3.盒子宽度百分比减去固定宽度

　　注：减号前后必须有空格

width: calc(100% - 20px);

4.去掉点击元素蓝色区域

 -webkit-tap-highlight-color: transparent;

-webkit-appearance: none;

5.ios滑动不流畅，需要在滑动的父盒子上加

 overflow: scroll;

 -webkit-overflow-scrolling: touch;

二 js

1.部分低端安卓手机不支持touchend事件

1.在touchmove中加入 e.preventDefault()可以解决。

详细解决方法参考这里

2.检测浏览器localstroge存储容量

3.原生js监测低版本ie浏览器and手机登录

if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE6.0" || trim_Version == "MSIE7.0" || trim_Version == "MSIE8.0" || trim_Version == "MSIE9.0")) {
//低版本ie登录逻辑
} else if (p.indexOf("Win") == -1 && p.indexOf("Mac") == -1) {
//手机端登录逻辑
}

4.textarea 输入换行，保存到数据库后输出时换行符变成空格。

数据库中读出来的数据需要做如下处理

var regn = /\n/g;
var regrn = /\r\n/g;
value = value.replace(regn, '<br>').replace(regrn, '<br>');

三 vue

1.vue会把对象转成 set get的形式

可通过JSON.parse(JSON.stringify(item))转成普通对象

2.vue-router

main.js 配置具名路由

'/dynamic/:deviceId/:dataId': {
name:'dynamic',
component: DynamicView
}

跳转处配置如下

v-link="{ name: 'dynamic',params: { deviceId: 123, dataId:456 },query:{age:1}}"

目标路由页ready下拿到数据

console.log(this.$route.params);
console.log( this.$route.query);

输出如下

{deviceId: 123, dataId:456},{age:1}

3.大坑

从后台取回数据。然后对数据格式化（给列表的每一项加了两个属性）,且这两个属性要动态渲染到dom上，但是发现触发时数据变了，视图没有变。

后来修改如下两句代码的顺序OK了。

／／向后台发送ajax请求

this.$http.get(url).then((response) => {

            
　　　　　　　vm.feedItems = response.data.feedItems;

          //对数据格式化

            jugeCommentType(response.data.feedItems);

            sessionStorage.setItem('tempFeeds', JSON.stringify(vm.feedItems));

            setScroll(vm);

        }, (response) => {

            // error callback

        });

  ／／对数据格式化

function jugeCommentType(arr) {

    for (var i = 0; i < arr.length; i++) {

        // console.log(arr[i].clist.length);

        arr[i].comment = [];

        arr[i].praise = [];

        if (arr[i].clist && arr[i].clist.length) {

            for (var j = 0; j < arr[i].clist.length; j++) {

                if (!arr[i].clist[j].content) {

                    arr[i].praise.push(arr[i].clist[j]);

                    if (arr[i].clist[j].authorId == '1201') {

                        arr[i].isPraised = true;

                        arr[i].commentId = arr[i].clist[j].commentId;

                    }

                } else {

                    arr[i].comment.push(arr[i].clist[j]);

                }

            }

        }

    }

}

4.ajax设置请求头

  vm.$http.get(

    address, {

      headers: {

        'Authorization': auth,

        'x-feinno-agent': 'Android 5.3.0'

      }

    }

  ).then((response) => {

    console.log(response.data);

  }, (response) => {});

5.如果一个对象数组中某一项发生变化vue不能检测，需要用$set 如下

this.obj.$set(0, { name: 'dt!'})

对象某个属性增加this.set(obj, 'c', 3)

6.删除数组中的某一项并让xue检测

this.arr.$remove(item);(item是具体要删除的那一项)

四 node

1.gzip压缩压缩完是原来的三分之一左右，极大提高了加载速度。

const compression=require('compression');

app.use(compression());／／放在所有中间件最前面

2.包积累

（1）rimraf 删除文件夹用类似 rm －rf

巴特西

vue+node开发手机端h5页面开发遇到的坑