微信小程序踩坑日记

368 阅读1分钟

1. wx.navigateTo 不会报错

wx.navigateTo作为一个Promise包装的函数, 在路由跳转失败时,不会在Console面板中返回具体原因。而在浏览器中Promise为reject时,如果未处理,则会报一个Ucaught:

image.png 这是一个非常奇葩的点,在小程序中·,你必须主动catch,才会发现失败具体原因

 wx.navigateTo({ url: '不存在的url' }).catch((resean)=>{
             console.log(resean)
 });

image.png

2. wx.navigateTo 的路由跳转的规则描述不清

wx.navigateTo文档,你会发现它是这么描述的:

image.png

那按我的理解,跳转的地址,不是应该和app.json里面注册的路由一模一样么,比如app.json里面是pages/example/example,那我要跳转到这个页面,那也应该要写pages/example/example

然而并不是,wx.navigateTo是支持绝对路径相对路径的,所以如果你当前的页面是pages/a/a,那么实际上wx.navigateTo({ url: 'pages/example/examplel' })跳转的是pages/a/b/pages/example/examplel,加上如果你不知道第一条,那么这肯定是个天坑,实际上你得这么写/pages/example/examplel

3. typescript下没有告诉你父类接收事件的具体类型

实际上为WechatMiniprogram.CustomEvent<{ value: number }>detail的类型被限制为为一个对象

 methods: {
    handleInputChange(event: WechatMiniprogram.CustomEvent<{ value: number }>) {
      console.log(event)
    }
  }

这里插一句,微信小程序身上你几乎可以看到现如今所有流行框架的影子(angular,react,vue),文件由四个文件组成(json,html,ts,css),有ComponentPage构造器,这几乎和angular一致。但是组件的构成又和vue2类似,有data,observers(watch),properties(props),methods,然后又提供了一个和react类似的setData(setState)函数来改变状态并更新视图

持续更新中。。。