小程序中的下拉刷新的實(shí)現(xiàn)

onPullDownRefresh觸發(fā)的注意點(diǎn)：

1. 需要在當(dāng)前頁(yè)面對(duì)應(yīng)的json文件中設(shè)置'enablePullDownRefresh':true，
2. 當(dāng)使用scroll-view的時(shí)候，如果觸點(diǎn)在scroll-view中且scroll-view中出現(xiàn)了滾動(dòng)條則向下拖動(dòng)并不會(huì)觸發(fā)下拉刷新。如果不出現(xiàn)滾動(dòng)條則觸發(fā)下拉刷新。

scroll-view標(biāo)簽的注意點(diǎn)

1. 當(dāng)使用scroll-view的時(shí)候，其內(nèi)第一個(gè)子節(jié)點(diǎn)不能設(shè)置上外邊距，不然會(huì)導(dǎo)致scroll-view出現(xiàn)滾動(dòng)條，即使內(nèi)容未超出區(qū)域也會(huì)出現(xiàn)。
   2.bindscrolltoupper，bindscrolltolower用于監(jiān)聽(tīng)滾動(dòng)到什么范圍時(shí)觸發(fā)，即當(dāng)我們滾動(dòng)頁(yè)面的scrollTop或scrollLeft小于設(shè)置的upper-threshold或lower-threshold時(shí)，每一次滾動(dòng)都會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù)。（所以不建議在scroll-view中使用這兩個(gè)監(jiān)聽(tīng)函數(shù)來(lái)實(shí)現(xiàn)下拉刷新和上拉刷新。）

在小程序中使用canvas繪制圖片

在微信小程序中的canvas只能繪制本地圖片，在服務(wù)器上的圖片無(wú)法繪制（在微信開(kāi)發(fā)者工具中可以正常顯示繪制后的圖片，但在真機(jī)上不會(huì)顯示）。所以在使用網(wǎng)絡(luò)圖像的時(shí)候需要先將網(wǎng)絡(luò)圖片路徑轉(zhuǎn)換成本地路徑，可以通過(guò)wx.getImageInfo(OBJECT)在success的回調(diào)中通過(guò)res.path獲取返回的本地路徑，再通過(guò)canvasContext.drawImage繪制圖像到指定的canvas中。
繪制用戶頭像并保存到本地：

wxml:
<canvas canvas-id='dd'></canvas>

js:
...
createCanvas () {
    let ctx = wx.createCanvasContext('dd', this)
    let url = 'http://img.zcool.cn/community/018d4e554967920000019ae9df1533.jpg@900w_1l_2o_100sh.jpg'
    wx.getImageInfo({
        src: url,
        success: (res) => {
            ctx.drawImage(res.path, 0, 0, 150, 100)
            ctx.draw()
        }
    })
}
...
onLoad () {
    this.createCanvas()
}
...

page設(shè)置樣式對(duì)事件的影響

1. onReachBottom： 用于監(jiān)聽(tīng)頁(yè)面上拉觸底的函數(shù)
2. onPageScroll: 用于監(jiān)聽(tīng)頁(yè)面滾動(dòng)的函數(shù)

但當(dāng)設(shè)置page樣式為

page{
    height: 100%;
    overflow: hidden;
}

js中的onReachBottom和onPageScroll都不能再觸發(fā)了。

onReachBottom, onPageScroll用于監(jiān)聽(tīng)整體頁(yè)面的滾動(dòng)和滾動(dòng)觸底事件，阻止page滾動(dòng)的樣式會(huì)導(dǎo)致這兩個(gè)事件不會(huì)觸發(fā)。

disableScroll屬性兼容性問(wèn)題

當(dāng)在頁(yè)面對(duì)應(yīng)的json中設(shè)置disableScroll: true后 ，在開(kāi)發(fā)工具中可以看到page新增了overflow-y: hidden;。真機(jī)調(diào)試發(fā)現(xiàn)在ios中頁(yè)面整體不能滾動(dòng)和開(kāi)發(fā)工具中的效果相同，ios最底部的webview層失去彈性滾動(dòng)效果，但在android中該屬性沒(méi)有起到效果。onReachBottom和onPageScroll也不會(huì)再觸發(fā)。整體頁(yè)面不能再滾動(dòng)需要我們自己設(shè)置樣式overflow:auto;-webkit-overflow-scrolling: touch;或者通過(guò)scroll-view來(lái)實(shí)現(xiàn)頁(yè)面中內(nèi)容的滾動(dòng)。

image設(shè)置樣式的注意點(diǎn)

在小程序中最好不要設(shè)置圖片的定位方式為absolute，不然在頁(yè)面滾動(dòng)時(shí)，絕對(duì)定位的圖片在滾動(dòng)中會(huì)存在滾動(dòng)加載的效果。

原生小程序中使用async/await的注意點(diǎn)

由于原生小程序的不支持async/await，使用的話會(huì)提示regeneratorRuntime is not defined錯(cuò)誤，需要在文件中引入regenerator-runtime

import regeneratorRuntime from '../../libs/regenerator-runtime'
...
async aa () {
    let b = await new Promise((resolve) => {
        setTimeout(() => {
            resolve(33333)
        }, 3000)
    })
    console.log(b)
    console.log(111)
}
...

小程序中的生命周期注意點(diǎn)

當(dāng)在路徑中附加參數(shù)時(shí)(/index?a=1&b=2),在app.js和頁(yè)面中的index.js中獲取參數(shù)的方式存在不同。在app.js的onLaunch中通過(guò)options.query.+'參數(shù)名'獲取路徑中對(duì)應(yīng)的參數(shù)值，在index.js的onload中通過(guò)options.+'參數(shù)名'獲取路徑中對(duì)應(yīng)的參數(shù)值。

當(dāng)在app.json中設(shè)置tabBar后通過(guò)tab切換頁(yè)面的話只有在第一次才能觸發(fā)onLoad、onReady。onLoad和onReady在頁(yè)面卸載后才能重新觸發(fā)，onHide和onUnload不能同時(shí)觸發(fā)，當(dāng)頁(yè)面卸載的時(shí)候onHide不會(huì)觸發(fā)。所以redirectTo，reLaunch，switchTab，navigateBack都不會(huì)觸發(fā)onHide事件。

邏輯層和視圖層的注意點(diǎn)

在微信小程序中，相應(yīng)視圖對(duì)應(yīng)的js不會(huì)在視圖層掛載后而清除js中的操作，比如setTimeout,websocket等異步操作并不會(huì)在頁(yè)面掛載后失去作用，會(huì)依然存在于邏輯層中，在指定時(shí)間和數(shù)據(jù)接收后依然會(huì)進(jìn)行相應(yīng)的操作。所以最好在頁(yè)面掛載的時(shí)候清除監(jiān)聽(tīng)函數(shù)。

websocket的使用注意點(diǎn)

1. 當(dāng)使用wx.onSocketMessage時(shí)，可以理解為在wx上注冊(cè)了一個(gè)監(jiān)聽(tīng)函數(shù)，這個(gè)函數(shù)在后期不管注冊(cè)頁(yè)面是否已經(jīng)卸載，該函數(shù)依然會(huì)對(duì)wx.sendSocketMessage進(jìn)行監(jiān)聽(tīng)。但在多個(gè)頁(yè)面都注冊(cè)wx.onSocketMessage時(shí)，當(dāng)前頁(yè)面中的wx.onSocketMessage會(huì)覆蓋上一個(gè)頁(yè)面中的監(jiān)聽(tīng)。
2. SocketTask即WebSocket 任務(wù)。如果對(duì)同一個(gè)地址創(chuàng)建多個(gè)WebSocket 任務(wù)的話，上一個(gè)SocketTask未關(guān)閉的情況下，后期頁(yè)面中發(fā)送的信息都會(huì)在初次創(chuàng)建的SocketTask中被監(jiān)聽(tīng)，而后期創(chuàng)建的都不會(huì)受到消息。
3. 當(dāng)同時(shí)使用SocketTask.onMessage和wx.onSocketMessage監(jiān)聽(tīng)數(shù)據(jù)返回時(shí)，兩者都會(huì)同時(shí)生效。

小程序中1像素的實(shí)現(xiàn)

直接使用1rpx無(wú)法實(shí)現(xiàn)移動(dòng)端1px的效果，現(xiàn)階段不管是ios還是android最小接受的邏輯像素依舊是1px。而根據(jù)不同手機(jī)的dpr，物理像素會(huì)顯示不同。
在文檔中提到小程序規(guī)定屏幕寬為750rpx，不管手機(jī)屏的實(shí)際邏輯像素是多少，都以750rpx的來(lái)進(jìn)行換算。

不管手機(jī)的邏輯像素是多少，手機(jī)的整屏寬度都為20rem或者750rpx。

// 對(duì)不同的dpr進(jìn)行監(jiān)聽(tīng)，dpr為2的縮放0.5，dpr為3的縮放0.33
@media (-webkit-max-device-pixel-ratio: 2) {
    .lb-1{
        position: relative;
    }
    .lb-1::after{
        content: '';
        position: absolute;
        height: 1px;
        bottom: 0;
        left: 0;
        right: 0;
        background: #d8d8d8;
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }
}
@media (-webkit-min-device-pixel-ratio: 2.01) and (-webkit-max-device-pixel-ratio: 3) {
    .lb-1{
        position: relative;
    }
    .lb-1::after{
        content: '';
        position: absolute;
        height: 1px;
        bottom: 0;
        left: 0;
        right: 0;
        background: #d8d8d8;
        transform: scaleY(0.33);
        transform-origin: 0 0;
    }
}