当前位置: 首页 > Web前端 > HTML

微信小程序开发中遇到的问题及解决方法(一)

时间:2023-04-02 23:43:44 HTML

1.覆盖整个页面的自定义弹窗,在弹窗中滑动内容,页面内容也会随之滑动。如果弹窗快速滚动,有时会导致页面内容和弹窗内容混乱。这个问题多出现在苹果手机上,类似事件穿透的效果。自定义弹窗截图如下:解决方法:在最外层元素添加事件:catch:touchmove="notDo"事件代码:/***@descnotdo*/notDo:function(){//notdo}wxml截图:注意:添加该事件后,会影响滑动效果。如果需要滑动切换页面,建议使用其他方式。2、使用固定定位的元素会随着页面的滚动而移动。社区里的说法大概是:这是由于小程序架构导致的scroll事件的延迟,最终导致fixed的变化不够及时。解决方法:为固定元素添加样式:transform:translate3d(0,0,0);3.使用canvas绘制分享图。有时候画错了,导致整个分享图一片空白。折衷方案:隐藏画布,使用html结构,重新渲染共享图片。这样可以方便的找出哪里画错了,但是又不能画出整张图,会有更好的交互效果。还有一个好处就是如果分享的图片只有一屏内容,可以直接截图分享(如果是苹果不支持长截图)。注意:如果共享图片中的动态内容不是很多,不推荐这种折衷方案。因为这需要维护两套代码,而且在渲染html结构的时候,canvas可能没有画完整或者画错了,会误导用户操作。截图:4.开发者工作模拟小程序不同入口场景,如:扫描二维码,长按识别二维码启动参数。解决方法:应该先使用encodeURIComponent对启动参数进行编码,然后在当前页面获取到页面参数后使用decodeURIComponent进行解码。截图:代码截图:注:不同于encodeURI和decodeURI的编解码,encodeURIComponent和decodeURIComponent的组合使用范围更广。encodeURI不会转义URI中具有特殊含义的ASCII标点符号:;/?:@&=+$,#,而encodeURIComponent会转义这些标点符号。遇到encodeURI不会转义的标点,直接截取URI。备注:最近,太阳不再徘徊;最近想遇见更好的自己~