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

友情链接

vue组件设计一些建议

手机端h5调试方法

一 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