小程序中的下拉刷新的实现
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:
<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设置样式对事件的影响
- 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;
}
}
网友评论