微信小程序问题汇总

项目场景：

小程序遇到了他们的bug们

1、tabBar添加了list，但报错提示如下图

---

原因：

“pages/cate/cate”需要在[“Pagess”]

---

解决方案：

这个报错的真相只有一个：那就是！你写了tabBar，但是你没写这个页面的路由。所以补充一下你的page里的这个页面的路由吧~!

2、给页面添加自定义事件时报错属性设定值无效

---

原因：

 _changeDots(e) {
    // console.log(e);
    this.setData({
      // 错误演示currentIndex = e.detail.current 这里是： 而非 =
      currentIndex : e.detail.current 
    })
  }
1
2
3
4
5
6
7

“pages/cate/cate”里自定义事件，我设置了变量重新赋值为事件本身获取的current的值，结果报错

---

解决方案：

报错原因是我自己马虎，在事件中重新修改data里的值，需要用setdata，格式为json，赋值使用的应该为 冒号：，而非 =

3、设置样式后有警告信息

# 原因：

 /* components/user/user.wxss */
button{
  color: red;
}
1
2
3
4

由官方文档可知，给自定义组件设置样式时，务必选择class选择器。而我写的是标签选择器，所以才会报警告，虽然样式确实生效了。不过既然官方文档说不要用类名之外的选择器，我们还是不要自找麻烦了吧~

---

# 解决方案：

将组件样式的标签选择器改为类名选择器，就不会再报警告了。

4、不在以下request合法域名列表中

---

# 原因：

小程序不存在跨域的问题，在开发环境中，链接后台接口时，会报上面的那个错误。项目上线之后，这个问题是不存在的

---

# 解决方案：

点击开发程序右上角“详情”====> 选择菜单栏"本地设置" ===> 勾选 “不校验合法域名、web-view（业务域名…）”

---

5、前端发送post请求，后端却没有收到

---

# 原因：

这种情况是因为我们前端传过去的数据格式，不是后端需要的格式。
在小程序开发中，这是因为wx.request()的post请求头的content-type 格式默认为 application/json，而我们请求数据时的data，用的是对象格式。在发送请求时，请求头会将我们传输的数据转为json格式，而后台需要的是对象格式时，就会出现上述问题。

---

# 解决方案：

解决方案有两种，第一种呢就是让后端人员，在接收数据时，将我们传输的数据转为他们需要的对象格式。不过一般情况下，嗯…后端人员可能不会帮你处理，这个时候求人不如求己，看第二种方法吧。
第二种就是我们前端自己修改请求头，将post网络交互中的请求头的格式改为
header:{"content-type":"application/x-www-form-urlencoded"}

6、网络请求 =>封装Promise

【http/http.js】

let baseUrl="http://localhost:3000"//统一设置域名前缀
const http=(option)=>{
    return new Promise((resolve,reject)=>{
        wx.request({
            url:baseUrl+option.url,
            method:option.method||"GET",
            data:option.data||{},
            header:option.header||{
                "content-type":"application/x-www-form-urlencoded"
            },
            // success: res=>{
        		//resolve(res)
      		//},可以简写为下面的一行
            success:resolve,
            fail:reject
        })
    })
}
export {
    http
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[http/api.js]

具体的接口请求，全部封装在一个api.js文件中

import { http } from './http.js'

const reqgetcate = () => {
  return http({
    url: '/api/getcate'
  })
}
const reqlogin = () => {
  return http({
    url: '/api/login',
    method:'post',
    data:{
      phone:1111,
      password:123
    }
  })
}
export default {
  reqgetcate,
  reqlogin
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[页面使用]

 // 网络请求
//异步举例子
  _getcate(){
    api.reqgetcate().then(res=>{
      console.log(res.data);
    }).catch(err)
  }
//同步举例 使用async和await
 _loginPost: async function(){
    // api.reqlogin().then(res=>{
    //   console.log(res);
    // })
    // 使用try...catch捕获错误，且不影响执行
    try {
      let res = await api.reqlogin()
      console.log(res.data);
    } catch (error) {
      console.log(error);
    }
 }  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

7、小程序授权报错