微信小程序的坑

[dragonwong]

onPageNotFound

App.onPageNotFound 和 wx.onPageNotFound 用来监听小程序要打开的页面不存在事件。

这里有一个坑就是，如果在小程序里面使用 wx.navigateTo 等路由 API 进行页面跳转，如果页面不存在只会报错，并不会触发 onPageNotFound。

onPageNotFound 有一个使用场景就是，当扫码登录的页面不存在时可以重定向到另一个存在的页面。

小程序onPageNotFound的坑 - 刘世涛6192 - 博客园

[dragonwong]

SelectorQuery

id 必须是字母开头

否则获取元素为 null。

SelectorQuery NodesRef.xxx返回null？ | 微信开放社区

选择自定义组件内元素并使用 .in()

否则获取元素为 null。

SelectorQuery | 微信开放文档

选择自定义组件时不可以设置虚拟节点（virtualHost: true）

否则会报“'getBoundingClientRect' of undefined” 的错误。

组件模板和样式 | 微信开放文档

[dragonwong]

observer & observers

observer 初始化时不触发，值不变时不触发。

observers 初始化时触发，值不变时触发。

Component(Object object) | 微信开放文档 数据监听器 | 微信开放文档

[dragonwong]

双括号表达式

微信小程序数据绑定支持双大括号中的表达式，但只支持这四种表达式：算数表达式、关系表达式、字符串连接表达式、三元表达式。如果需要调用函数呢？比如常用的字符串、数组自带函数，或者其他复杂函数。那就需要 WXS 了。

WXS | 微信开放文档

[dragonwong]

组件生命周期 created

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

—— 组件生命周期 | 微信开放文档

在组件 created 生命周期不但不能使用 setData，连调用 this.data 都不可以，得到的都是默认值，尤其是想获取 properties 时，非常危险。

[dragonwong]

iOS 页面弹性下拉露出白底

微信著名老油条问题（小程序取消橡皮筋回弹效果解决方案及坑总结 | 微信开放社区）。解决办法：

页面禁用滚动，最外层 view 设置样式：

.wrapper {
  height: 100%;
  overflow-y: scroll;
}

如果需要监听滚动距离，最外层 view 可改为 scroll-view。

[dragonwong]

虚拟化组件节点

class 失效需要使用外部样式类

微信文档（组件模板和样式 | 微信开放文档）是说了：

自定义组件节点上的 class style 和动画将不再生效，但仍可以：

• 将 style 定义成 properties 属性来获取 style 上设置的值；
• 将 class 定义成 externalClasses 外部样式类使得自定义组件 wxml 可以使用 class 值。

但是使用 externalClasses 照着写又不生效，跑文档下面的代码片段又报错：

Failed to load resource: the server responded with a status of 500 (Internal Server Error)(env: macOS,mp,1.06.2306020; lib: dev)
[渲染层错误] Uncaught (in promise) TypeError: Cannot read property 'on' of undefined(env: macOS,mp,1.06.2306020; lib: dev)
[渲染层错误] Uncaught TypeError: Cannot read property 'enableUpdateWxAppCode' of undefined(env: macOS,mp,1.06.2306020; lib: dev)
[渲染层错误] Uncaught (in promise) TypeError: Cannot read property 'on' of undefined(env: macOS,mp,1.06.2306020; lib: dev)

无语死了，谁懂啊，家人们。干看代码看出来了，原来自定义组件的 class 得加上 externalClasses 定义的 class。

Component({
  options: {
    virtualHost: true,
  },
  externalClasses: ['class'],
  properties: {
    color: {
      type: String,
      value: 'blue',
    },
    disabled: {
      type: Boolean,
      value: false,
    },
  },
});

比如自定义组件的 externalClasses 定义为 class，那么自定义组件模版上也要配置上 class。

<view
  class="class button {{color}} {{disabled ? 'disabled' : ''}}"
  hover-class="hover"
>
  <slot />
</view>

真的大无语啊兄弟们。😓

hidden 也失效了

只能自己给组件实现 hidden 了，那我的选择是：直接外面 wx:if！