小程序报错坑系列 及解决方法？

错误案例一

Component constructors should be called while initialization. A constructor call has been ignored.

Component像页面一样由wxml、wxss、js和json4个文件组成，且需要把这4个文件放在同一个目录中。与页面不一样的是，Component中的构造函数（也可以称构造器）是Component({})，而页面中的构造函数是Page({})。

解决方法：把app.js文件夹下 默认创建Component方法，换成App

 

错误案例二

ReferenceError: xxxxx is not defined

在初始化countX ，countY ，countZ 这三个变量都为0时，在JS中可以直接进行连等赋值；但是在微信小程序中会报错 xxx 没有定义。

如：var countX = countY = countZ = 0;  js中是可以这样写

解决方法：按照规范命名变量

var countX = 0,countY = 0,countZ = 0;

var countX = 0;

var countY = 0;

var countZ = 0;

 

错误案例三

this.setData is not a function报错处理

提示：this.setData is not a function;at pages/index/index onLoad function;at api request success callback function

TypeError: this.setData is not a function

这种情况一般会出现在 wx.request({})中使用时，类似success: function (res) { }无法使用this.setData，

所以在前面加一句：var that = this;即可解决问题

setdata是异步，而this.data是同步的

 

错误案例四

Cannot read property 'setData' of undefined;at pages/index/index page changText function

TypeError: Cannot read property 'setData' of undefined

在ES6 的写法是这个样子的

changText:() => {

   //console.log(_this);

   this.setData({

       motto: "dad"

    })

}

在ES5下 是正常显示

changText: (function () {

   console.log(this);

   this.setData({

   motto: "dad"

   });

})

为什么es5正确显示而es6却不行呢？

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。

其实说白了es6的箭头函数和es5 function函数看起来差不多，只是写法简化了，其实是不一样的，function声明的函数和箭头函数的作用域不同，这是一个不小心坑的地方。

所以对于这个结果，还是换回es5的function函数去写最好了。

箭头函数和function的区别：

箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替，不可以使用yield命令，因此箭头函数不能用作Generator函数。

 

错误案例五遇到警告

warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.

<block wx:for-items="{{userInfoList}}" wx:key="userInfoListId">

相当于取一个别名  没有说明什么实际效果   随便起名字   就可以消除错误

 

错误案例六this的指向问题