微信小程序使用总结

最新推荐文章于 2024-02-29 14:03:16 发布

初来乍到的IT狗

最新推荐文章于 2024-02-29 14:03:16 发布

阅读量306

点赞数

分类专栏：微信小程序文章标签：微信小程序个人总结

本文链接：https://blog.csdn.net/weixin_43829719/article/details/96588335

版权

微信小程序专栏收录该内容

6 篇文章 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
		})
	}
})