微信小程序使用总结

一时失言乱红尘 2021-12-01 12:22 400阅读 0赞

我在微信小程序中遇到的问题

## 组件中遇到的问题 ##

#### 1、swiper组件 ####

（1）swiper滑动错误  
  如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

if(e.detail.source==’touch’){ 
    	this.setData({ 
    		current:e.detail.current
    	})
    }

#### 2、scroll-view组件 ####

（1）scroll-view中开头元素有margin-top时，即便内容没有撑满容器，也会出现滚动条。  
（2）横向滚动时，内容设置为 **display:inline-block;** ，scroll-view设置为 **white-space:nowrap;** 。不能用浮动或者弹性盒；竖向滚动时，scroll-view必须设置高度，如果一排有多个可以用inline-block或者浮动，不能用弹性盒； *弹性盒无效* 。

<scroll-view scroll-x class="horizontal">
    	<view class="horizontal-item" wx:for="{ {dataList}}" wx:key="{ {item.id}}"></view>
    </scroll-view>
    
    <scroll-view scroll-x class="vertical">
    	<view class="vertical-item" wx:for="{ {dataList}}" wx:key="{ {item.id}}"></view>
    </scroll-view>

/*横向滚动*/
    .horizontal{ 
    	white-space:nowrap;
    }
    .horizontal-item{ 
    	display:inline-block;
    	white-space:normal;
    }
    /*竖向滚动*/
    .vertical{ 
    	height:800rpx;
    	width:700rpx;
    }
    .vertical-item{ 
    	display:inline-block;
    	width:300rpx;
    	margin:30rpx 20rpx;
    }

（3）scroll-view嵌套input时，滚动会出现卡顿现象。

#### 3、checkbox和radio的样式（转载） ####

#### 4、input和textarea组件 ####

（1）blur事件有延迟，不能通过blur事件来获取值，可以用input事件。  
（2）如果是避免覆盖导航栏的话，可以用view模拟textarea，点击切换成textarea，如果是连续的textarea，建议用循环做，不然会点击view两次才会唤起键盘。

#### 5、canvas画图遇到的问题 ####

canvas画图是异步操作，为了减少影响每画一步都需要用ctx.save()保存,如果要生成图片需要调用wx.canvasToTempFilePath()，需要注意的是生成的路径是临时路径，这个方法必须在ctx.draw()的回调中调用，为了保证生成图片时画布已经完成画图操作，需要给生成图片的方法加个延迟。

ctx.beginPath();
    ctx.setFillStyle("#ff5857");
    ctx.setFontSize(16);
    ctx.fillText("这是红色的字体", 20, 50);
    ctx.save();
    
    ctx.beginPath();
    ctx.setFillStyle("#3385ff");
    ctx.setFontSize(14);
    ctx.fillText("这是蓝色的字体", 20, 100);
    ctx.save();
    
    ctx.draw(false, setTimeout(function () { 
        wx.canvasToTempFilePath({ 
        	...
        })
    }, 1000));

#### 6、原生组件使用限制 ####

原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。如果要盖上其他原生组件必须写在其他原生组件的下面，设置z-index没有用。  
  原生组件有：camera、canvas、input（仅在focus时表现为原生组件）、live-player、live-pusher、map、textarea、video。  
（1）canvas组件在swiper中使用  
可以将canvas先生成图片，将图片放到页面中。

wx.canvasToTempFilePath({ 
    	canvasId: 'canvas1',
    	success(res) { 
    		var urls = that.data.urls;
    		urls[0] = res.tempFilePath;
    		that.setData({ 
    			urls: urls
    		})
    	}
    })

（2）cover类：cover-view、cover-image  
不能设置单边的border。

## 小细节 ##

##### 1、蒙版下的页面滚动 #####

（1）页面滚动可以用scroll-view来做。  
（2）可以将遮罩加上catchtouchmove=“stopEvent”,stopEvent可以用来处理 touchmove 的事件，也可以是一个空函数。

##### 2、如果小程序有tabBar，用wx.getSystemInfo()获取的windowHeight不包括tabBar的高度，没有tabBar的页面可以用100%来获取整个页面的高度。 #####

##### 3、转发小程序的卡片中的图片长宽比为5:4，默认是高度为80%的屏幕宽度的图片。 #####

##### 4、注意浅拷贝和深拷贝的问题。 #####

##### 5、吸顶效果 #####

onpagescroll事件有延迟，scroll-view滚动事件也有延迟，吸顶效果会存在一定的卡顿效果，建议用wxs来做。（另一篇）

##### 6、小程序没有双击事件，双击事件只能用单击事件模拟。（转载） #####

##### 7、margin-bottom在ios中必须要触碰到边界才有效（类似于margin-top塌陷问题） #####