記錄開發(fā)過程中遇到的問題及通過自己摸索或查閱網(wǎng)上的教程整理出的解決方案，如有不全或者錯誤歡迎留言更正

目錄

1.css 匹配下標是奇數(shù)或偶數(shù)的子元素
2.獲取屏幕高度
3.小程序tabbar顯示不出的原因
4.小程序狀態(tài)欄沉浸式
5.小程序引用iconfont圖標
6.wx.request回調(diào)中使用setDate改變page.data值
7.margin：0 auto 無效原因
8.小程序傳遞數(shù)組，對象
9.小程序阻止冒泡
10.數(shù)組拼接

正文

1.css 匹配下標是奇數(shù)或偶數(shù)的子元素

    .item-order:nth-of-type(odd){
        border-left:3px solid #f5f5f5;
        //奇數(shù)
    }
    .item-order:nth-of-type(even){
        border-right:3px solid #f5f5f5;
       //偶數(shù)
    }

2.獲取屏幕高度

獲取覽器顯示區(qū)域的高度： $(window).height();

獲取瀏覽器顯示區(qū)域的寬度：$(window).width();

獲取頁面的文檔高度：$(document).height();

獲取頁面的文檔寬度：$(document).width();

獲取滾動條到頂部的垂直高度：(window).scrollTop();

獲取滾動條到左邊的垂直寬度：(window).scrollLeft();
傳送門1
傳送門2

3.小程序tabbar顯示不出的原因

pages數(shù)組的第一項必須是tabBar的list數(shù)組的一員

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]

tabbar中l(wèi)ist數(shù)組內(nèi)容是：

"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "設(shè)置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}

如果不是自定義的tabbar, custom為true也會顯示不出來，這個是筆者個人粗心犯得小錯誤，找了半天.....

4.小程序狀態(tài)欄沉浸式

app.json 中 window 配置：navigationStyle:"custom"

5.小程序引用iconfont圖標

1.在阿里圖標庫中找到需要的圖標并加入項目

2.把項目下載項目到本地

image.png

3.在本地打開下載的目錄將 iconfont.css文件改為iconfont.wxss復制到項目中

image.png

image.png

4.在app.wxss中引入iconfont.wxss

image.png

5.在阿里圖標庫我的項目中 點擊復制代碼

image.png

6.將復制的@font-face替換掉iconfont.wxss中的@font-face

image.png

7.在項目中引用

image.png

詳細教程點擊傳送門

6.wx.request回調(diào)中使用setDate改變page.data值

Page({
    data: {
        A:'true',
    },
    onShow:function (){
    var that = this;
    wx.request({
      url:'XXXX',
      method:'GET',
      success(d){
        if(d.statusCode){
          that.setData({
            A: d.data.A
          })
        } 
      },
      fail(e){
        console.log(e)
      }
    })
  },
})

在request之前先用個變量把this存起來，在success里就用這個變量來代量this使用，
原因是：在request里的this上下文改變了，this不再指向當前page

7.margin：0 auto 無效原因

說道居中很多前端開發(fā)的小伙伴都會想到margin:0 auto ，前段時間在使用時卻沒有效果，經(jīng)過查詢得知,需配合display:block使用才有效果

margin: 0 auto,
display:block

8.小程序傳遞數(shù)組，對象

思路： 先把要傳遞的對象數(shù)組通過JSON.stingify方法,將對象轉(zhuǎn)換成字符串后傳遞
在接收時將字符串轉(zhuǎn)換成對象

click:function(e){
    var model = JSON.stringify(e.currentTarget.dataset.model);
    wx.navigateTo({
      url: '../detail/detail?model=' + model,
    })
  }

onLoad: function (options) {
    //將字符串轉(zhuǎn)換成對象
    var bean = JSON.parse(options.model);
    if(options.model == null){
      wx.showToast({
        title: '數(shù)據(jù)為空',
      })
      return;
    }
      this.setData({
          model:bean
      })    
  }

方式和傳遞對象相同，注意類型即可

詳細攻略點擊傳送門

9.小程序阻止冒泡

很簡單，直接把bind 改成 catch即可，例如 bindtap 改成 catchtap

友情提示：有一部分標簽是默認在最上層的，比如video，想在video上放一個view然后設(shè)置catchtap將video覆蓋是無效的

詳細攻略點擊傳送門

10.數(shù)組拼接concat

var a1 = ['aa',12,13];
var a2 = [21,22,23];
var newA = a1.concat(a2) // ['aa',12,13,21,22,23]