微信小程序开发中的注意点记录

小程序中的下拉刷新的实现

onPullDownRefresh触发的注意点：

需要在当前页面对应的json文件中设置'enablePullDownRefresh':true，
当使用scroll-view的时候，如果触点在scroll-view中且scroll-view中出现了滚动条则向下拖动并不会触发下拉刷新。如果不出现滚动条则触发下拉刷新。

scroll-view标签的注意点

当使用scroll-view的时候，其内第一个子节点不能设置上外边距，不然会导致scroll-view出现滚动条，即使内容未超出区域也会出现。
2.bindscrolltoupper，bindscrolltolower用于监听滚动到什么范围时触发，即当我们滚动页面的scrollTop或scrollLeft小于设置的upper-threshold或lower-threshold时，每一次滚动都会触发监听函数。（所以不建议在scroll-view中使用这两个监听函数来实现下拉刷新和上拉刷新。）

在小程序中使用canvas绘制图片

在微信小程序中的canvas只能绘制本地图片，在服务器上的图片无法绘制（在微信开发者工具中可以正常显示绘制后的图片，但在真机上不会显示）。所以在使用网络图像的时候需要先将网络图片路径转换成本地路径，可以通过wx.getImageInfo(OBJECT)在success的回调中通过res.path获取返回的本地路径，再通过canvasContext.drawImage绘制图像到指定的canvas中。
绘制用户头像并保存到本地：

wxml:


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设置样式对事件的影响

onReachBottom：用于监听页面上拉触底的函数
onPageScroll: 用于监听页面滚动的函数

但当设置page样式为

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

js中的onReachBottom和onPageScroll都不能再触发了。

onReachBottom, onPageScroll用于监听整体页面的滚动和滚动触底事件，阻止page滚动的样式会导致这两个事件不会触发。

disableScroll属性兼容性问题

当在页面对应的json中设置disableScroll: true后，在开发工具中可以看到page新增了overflow-y: hidden;。真机调试发现在ios中页面整体不能滚动和开发工具中的效果相同，ios最底部的webview层失去弹性滚动效果，但在android中该属性没有起到效果。onReachBottom和onPageScroll也不会再触发。整体页面不能再滚动需要我们自己设置样式overflow:auto;-webkit-overflow-scrolling: touch;或者通过scroll-view来实现页面中内容的滚动。

image设置样式的注意点

在小程序中最好不要设置图片的定位方式为absolute，不然在页面滚动时，绝对定位的图片在滚动中会存在滚动加载的效果。

原生小程序中使用async/await的注意点

由于原生小程序的不支持async/await，使用的话会提示regeneratorRuntime is not defined错误，需要在文件中引入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)
}
...

小程序中的生命周期注意点

属性	描述	触发条件
onLoad	页面中加载时触发	页面初次进入，navigateBack返回不会触发上一个页面的onLoad
onReady	页面初次渲染完成	页面初次进入，navigateBack返回不会触发上一个页面的onReady
onShow	页面显示	所有导航方法
onHide	页面隐藏	navigateTo
onUnload	页面卸载	redirectTo，reLaunch，switchTab，navigateBack

当在路径中附加参数时(/index?a=1&b=2),在app.js和页面中的index.js中获取参数的方式存在不同。在app.js的onLaunch中通过options.query.+'参数名'获取路径中对应的参数值，在index.js的onload中通过options.+'参数名'获取路径中对应的参数值。

当在app.json中设置tabBar后通过tab切换页面的话只有在第一次才能触发onLoad、onReady。onLoad和onReady在页面卸载后才能重新触发，onHide和onUnload不能同时触发，当页面卸载的时候onHide不会触发。所以redirectTo，reLaunch，switchTab，navigateBack都不会触发onHide事件。

逻辑层和视图层的注意点

在微信小程序中，相应视图对应的js不会在视图层挂载后而清除js中的操作，比如setTimeout,websocket等异步操作并不会在页面挂载后失去作用，会依然存在于逻辑层中，在指定时间和数据接收后依然会进行相应的操作。所以最好在页面挂载的时候清除监听函数。

websocket的使用注意点

当使用wx.onSocketMessage时，可以理解为在wx上注册了一个监听函数，这个函数在后期不管注册页面是否已经卸载，该函数依然会对wx.sendSocketMessage进行监听。但在多个页面都注册wx.onSocketMessage时，当前页面中的wx.onSocketMessage会覆盖上一个页面中的监听。
SocketTask即WebSocket 任务。如果对同一个地址创建多个WebSocket 任务的话，上一个SocketTask未关闭的情况下，后期页面中发送的信息都会在初次创建的SocketTask中被监听，而后期创建的都不会受到消息。
当同时使用SocketTask.onMessage和wx.onSocketMessage监听数据返回时，两者都会同时生效。

小程序中1像素的实现

直接使用1rpx无法实现移动端1px的效果，现阶段不管是ios还是android最小接受的逻辑像素依旧是1px。而根据不同手机的dpr，物理像素会显示不同。
在文档中提到小程序规定屏幕宽为750rpx，不管手机屏的实际逻辑像素是多少，都以750rpx的来进行换算。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iphone5(320*568)	1rpx = 0.42px	1px = 2.34rpx
iphone5(375*667)	1rpx = 0.5px	1px = 2rpx

不管手机的逻辑像素是多少，手机的整屏宽度都为20rem或者750rpx。

// 对不同的dpr进行监听，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;
    }
}