用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-3-18 00:32

1、整个页面覆盖的自定义弹窗,滑动弹窗中的内容,页面内容也会滑动。 2、使用了fixed定位的元素,会出现随页面滚动而移动的现象。3、使用canvas绘制分享图,有的时候绘制错误,导致整张分享图空白。4、开发者工作模 ...

1、整个页面覆盖的自定义弹窗,滑动弹窗中的内容,页面内容也会滑动。如果快速滚动弹窗,页面内容和弹窗中的内容有时会错乱。这个问题大多出现在苹果手机上,类似事件事件穿透的效果。

自定义弹窗截图如下:

解决办法:再最外层元素上添加事件: catch:touchmove="notDo"

事件代码:

/**
   * @desc not do
   */
  notDo: function () {
    // not do
  }

wxml截图:

注意:加上这个事件后,对侧滑效果有所影响,如果需要侧滑切换页面,建议使用其他方法。

2、使用了fixed定位的元素,会出现随页面滚动而移动的现象。社区中的说法大概是:这个是因为小程序架构的原因导致 scroll 事件有一定的延迟,最终使 fixed 的改变不够及时导致的。

解决办法:在fixed定位的元素上,添加样式: transform: translate3d(0, 0, 0);

3、使用canvas绘制分享图,有的时候绘制错误,导致整张分享图空白。

折中解决办法:隐藏canvas,使用html结构,重新渲染分享图。这样方便找出到底是哪里绘制错误倒是整张图绘制不出来,也会有更好的交互效果。还有一点好处,如果分享图只有一屏的内容,可以直接截图分享(如果是苹果,不支持截长图)。

注意:如果分享图中并没有大量的动态内容,并不建议使用这种折中方案。因为这需要维护两套代码,而且当html结构渲染出来的时候,canvas可能还未绘制完毕或者绘制错误,会误导用户操作。

截图:

4、开发者工作模拟小程序不同进入场景,比如:扫描二维码,长按识别二维码的启动参数处理。

解决办法:应该通过encodeURIComponent来编码启动参数,在当前页面获取页面参数的时候,再通过decodeURIComponent来解码。

截图:

代码截图:

注意:区别于encodeURI和decodeURI的编解码,encodeURIComponent和decodeURIComponent的组合使用范围更广。encodeURI对在 URI 中具有特殊含义的 ASCII 标点符号,不会进行转义的:;/?:@&=+$,#, 而encodeURIComponent会转义这些。遇上encodeURI不会转义的标点符号,URI会直接被截取掉。

随记 :最近,太阳不再流浪;最近,想遇见更好的自己~

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 半岛铁盒 来自: segmentfault