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

scola666 发布于2019-08-05 18:13 / 2399人阅读

摘要：社区中的说法大概是这个是因为小程序架构的原因导致事件有一定的延迟，最终使的改变不够及时导致的。折中解决办法隐藏，使用结构，重新渲染分享图。

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会直接被截取掉。

随记：最近，太阳不再流浪；最近，想遇见更好的自己~

服务器托管混合云微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60766.html

微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

Lowky 2019-08-30 11:07 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

elina 2019-08-02 15:15 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

voyagelab 2019-08-23 18:02 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（一）

摘要：社区中的说法大概是这个是因为小程序架构的原因导致事件有一定的延迟，最终使的改变不够及时导致的。折中解决办法隐藏，使用结构，重新渲染分享图。 1、整个页面覆盖的自定义弹窗，滑动弹窗中的内容，页面内容也会滑动。如果快速滚动弹窗，页面内容和弹窗中的内容有时会错乱。这个问题大多出现在苹果手机上，类似事件事件穿透的效果。自定义弹窗截图如下：showImg(https://segmentfaul...

pakolagij 2019-08-23 15:56 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（一）

摘要：社区中的说法大概是这个是因为小程序架构的原因导致事件有一定的延迟，最终使的改变不够及时导致的。折中解决办法隐藏，使用结构，重新渲染分享图。 1、整个页面覆盖的自定义弹窗，滑动弹窗中的内容，页面内容也会滑动。如果快速滚动弹窗，页面内容和弹窗中的内容有时会错乱。这个问题大多出现在苹果手机上，类似事件事件穿透的效果。自定义弹窗截图如下：showImg(https://segmentfaul...

tinyq 2019-08-30 15:56 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（一）

摘要：社区中的说法大概是这个是因为小程序架构的原因导致事件有一定的延迟，最终使的改变不够及时导致的。折中解决办法隐藏，使用结构，重新渲染分享图。 1、整个页面覆盖的自定义弹窗，滑动弹窗中的内容，页面内容也会滑动。如果快速滚动弹窗，页面内容和弹窗中的内容有时会错乱。这个问题大多出现在苹果手机上，类似事件事件穿透的效果。自定义弹窗截图如下：showImg(https://segmentfaul...

lowett 2019-08-02 14:30 评论0 收藏0