【微信小程序】微信小程序中掉进的坑之一

谁借莪１个温暖的怀抱￠ 2021-09-26 06:18 401阅读 0赞

## 前言 ##

这段时间在做一个小程序，在这过程中遇到了一些坑，觉得是可以记录下来的。  
PS：开发文档真的是很不错的东西！

## 一、关于**bindtap**点击事件 ##

当你在标签里写了一个bindtap的点击事件，但发现无论怎么操作，这个点击事件都不会执行时，你上网百度并尝试各种方法后还是无法解决，就有可能是下面这个原因：  
事件分为冒泡事件和非冒泡事件，那什么是冒泡事件和非冒泡事件呢？

*  冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
 *  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。  
    在小程序开发文档中可以了解到：  
    ![这里写图片描述][SouthEast]  
    所以将bindtap改成catchtap就能解决问题了。

## 二、关于获取用户的openid ##

在小程序开发文档中我们可以了解到获取openid和密钥的方法:  
![这里写图片描述][SouthEast 1]

文档中给出的接口地址为：  
[https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js\_code=JSCODE&grant\_type=authorization\_code][https_api.weixin.qq.com_sns_jscode2session_appid_APPID_secret_SECRET_js_code_JSCODE_grant_type_authorization_code]  
其中需要我们填的数据就是appid、secret和js\_code，grant\_type不需要动。  
在这个地方，编者就犯了一个很低级的错误，而且还花了不短的时间才解决了，不知道大家会不会也试过这样，所以还是拿出来分享了。  
错误示例：  
  
![这里写图片描述][SouthEast 2]

写的时候没有仔细看，以为用res.code（即调用结果返回的code结果）就能成功，结果一直出现下面的错误提示：  
![这里写图片描述][SouthEast 3]

错误提示是code失效。百度还有社区都说是因为请求了两次导致的结果，所以一直在想是不是自己哪里写了两次请求，从一开始找错误的方向就错了，所以一直找不出答案。后来看了别人的代码，才发现原来正确写法如下：  
![这里写图片描述][SouthEast 4]  
res.code是在调用登录接口时获取到的表示code值得一个变量名，如果直接写在里面就是作为值，要这样写才能获得res.code代表的值。

## 三、获取输入框的输入内容 ##

在input标签内使用bindinput事件，可以实时获取用户在输入框内输入的内容。

## 四、关于界面跳转 ##

*  wx.navigateTo 只能跳转到非tabBar页面，若要跳转至tabBar界面要用wx.switchTab；
 *  wx.switchTab不支持传递数据；

[SouthEast]: /images/20210923/63e1d3fcb19a4a9198b8ada363b88371.png
[SouthEast 1]: /images/20210923/9213c7d4d4cf440aa4228d31ca3b84de.png
[https_api.weixin.qq.com_sns_jscode2session_appid_APPID_secret_SECRET_js_code_JSCODE_grant_type_authorization_code]: https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
[SouthEast 2]: /images/20210923/3156b57777d34af1be8f863fb070736a.png
[SouthEast 3]: /images/20210923/1920ab558a984b94b15899c90042d51b.png
[SouthEast 4]: /images/20210923/625a16e2e11641f2aaa37e2004f7d203.png