您的当前位置:首页正文

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

2024-11-08 来源:个人技术集锦

错误案例一

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

解决方法:把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的指向问题

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Top