微信小程序> 微信小程序使用总结

微信小程序使用总结

浏览量:3544 时间: 来源:初来乍到的IT狗

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

组件中遇到的问题

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塌陷问题)

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎