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