微信小程序排坑總結(更新中)

1.動態綁定class，不能用對象的寫法，得用三目運算

wrong：
<view class="{current: tabCurrentIndex === index}"></view>
right：
<view class="{{tabCurrentIndex === index?'current':''}}"></view>

2.事件傳參要用data-[參數]自定義屬性，而且在寫法上有差別

wrong：
<view bindtap="clickEvent(id)" data-id="1"></view>
right：
<view bindtap="clickEvent" data-id="1"></view>

3.獲取自定義屬性

clickEvent(e){
	let id = e.currentTarget.dataset.id;
}

4.wxss無法設置本地圖片爲背景圖片，可使用base64、網絡地址或image標籤定位

分享一個在線圖片轉base64的工具
5.獲取dom高度寬度等屬性，是一個異步操作

    var query = wx.createSelectorQuery();
    var that = this;
    query.select('.class-name').boundingClientRect(function(rect) {
     console.log(rect.height)
    }).exec();
    console.log('我先打印?')

6.js中改變數組的值，先定義一個新數組並記錄待修改項的index，在新數組裏改變對應index的元素，使用this.setData將data中的數組替換爲新數組

arrayUpdate(e){
    let index = e.currentTarget.dataset.index;
    let _list = this.data.goodList;
    _list[index].count += 1; 
    this.setData({
      goodList:_list
    })
  },

---

2020.3.12

---

7.小程序tabBar需要在app.json文件中配置，其中圖標必須爲本地圖片，大小不能超過40kb，尺寸大小80px左右，留白30px到40px。

{
"tabBar": {
    "color": "#666",
    "selectedColor": "#ff3b3b",
    "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/img/tabBar/home.png",
            "selectedIconPath": "static/img/tabBar/home-on.png",
            "text": "首頁"
        },{
            "pagePath": "pages/category/category",
            "iconPath": "static/img/tabBar/category.png",
            "selectedIconPath": "static/img/tabBar/category-on.png",
            "text": "分類"
        },{
            "pagePath": "pages/car/car",
             "iconPath": "static/img/tabBar/cart.png",
            "selectedIconPath": "static/img/tabBar/cart-on.png",
            "text": "購物車"
        },{
            "pagePath": "pages/user/user",
             "iconPath": "static/img/tabBar/user.png",
            "selectedIconPath": "static/img/tabBar/user-on.png",
            "text": "我的"
        }
		]
  }
}

8.快捷新建頁面：在app.json中的pages屬性中直接添加一個新的路徑，會在對應路徑下自動生成四件套。

{
  "pages": [
    "pages/index/index/index"
}

9.循環渲染僅支持數組，不支持對象

wrong：
<view wx:for="{{Object}}" wx:key="index"></view>
right：
<view wx:for="{{Array}}" wx:key="index"></view>

---

2020.3.17

---

10.個別組件使用了原生組件，Native 實現的組件會遮擋其他組件，此時可以使用cover-view

cover-view
覆蓋在原生組件之上的文本視圖。
可覆蓋的原生組件包括 map、video、canvas、camera、live-player、live-pusher
只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。組件屬性的長度單位默認爲px，2.4.0起支持傳入單位(rpx/px)。

11.map渲染時座標暫無，座標信息需要請求服務器獲得，但是請求成功後無法刷新map裏的定位。解決方案：使用wx:if，在請求未完成時先通過wx:if = false 不要渲染map組件，成功後在改爲true。

<map longitude='{{longitude}}' latitude='{{latitude}}' wx:if="{{showMap}}"/>

12.兩個關於改變對象屬性值的寫法。

//傳統方式
updateName(){
	this.person.name = '小白'
	this.setData({
		person: this.person
	})
}
//簡便寫法

1.改變對象屬性值

updateName(){
	this.setData({
		['person.name']: '小黑'
	})
}

2.改變對象數組中對象的屬性

updateArrayName(index){
	this.setData({
		[`personList[${index}].name`]: '小白'
	})
}

13.scroll-view滾動視圖可以實現很多效果，但同時也有很多bug，個別css屬性值無效：

• display：flex
• overflow：hidden
• white-space:nowrap

有時還不如view(overflow:auto)好用，根據實際情況選擇，不要一想到滾動視圖就用scroll-view 。

---

2020.3.18

---

14.小程序前段代碼包大小限制爲2048kb，應儘量使用字體圖標代替png，這裏推薦iconfont
如何在小程序中使用iconfont

---

2020.3.27

---