最近在开发微信小程序的自定义组件转盘类的,不小心又踩坑里去了。。。
调试器上出现这种报错:
thirdScriptError
sdk uncaught third Error
Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
仔细检查了代码半天,感觉没啥错啊,网上也找不到答案,最后又下定决心从头开始在检查一遍,最终还是找到了!
所以发布这边文章,在这里记录下
下面粘贴一点自定义组件里的代码片段:
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
* 组件的对外属性
*/
properties: {
xiaojuedingArr: { // 可以切换的转盘选项, 支持多个
type: Array,
value: [
{
id: 0,
option: '转盘的标题名称',
awards: [
{
id: 0,
name: "最多17个选项", // 选项名
color: 'red', // 选项的背景颜色
probability: 0 // 概率
},
{
id: 1,
name: "单个选项最多填13字", // 超过9个字时字体会变小点
color: 'green',
probability: 0
}
],
}
]
},
// 限制:最多17个选项, 单个选项最多填10-13个字, 选项名称最多21个字
awardsConfig: { // 默认的当前转盘选项
option: '我的小决定?',
awards: [
{
id: 0,
name: "最多17个选项",
color: 'red',
probability: 0
},
{
id: 1,
name: "单个选项最多填13字",
color: 'green',
probability: 0
}
],
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
animationData: {}, // 转盘动画
},
//组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用 setData
created: function () {
console.log('==========created==========');
},
// 组件生命周期函数,在组件实例进入页面节点树时执行
attached: function () {
console.log('==========attached==========');
var awardsConfig = this.data.xiaojuedingArr[0];
this.setData({
awardsConfig: awardsConfig
})
this.initAdards();
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
//初始化数据
initAdards() {},
/*
* 内部私有方法建议以下划线开头
*/
//重置转盘
_repeat() {}
}
})
结果问题时出现在组件构造器 properties 中的这个自定义属性 awardsConfig,
因为自定义属性规定了属性的类型(必填)
myProperty: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: '', // 属性默认 初始值(可选),如果未指定则会根据类型选择一个
observer: function (newVal, oldVal, changedPath) {
// 属性被改变时执行的函数(可选)
}
},
我是把没封装之前的代码直接复制过来的,结果就踩了这个坑,最后把这个属性改成这样:
awardsConfig: { // 默认的当前转盘选项
type: Object,
value:{
option: '我的小决定?',
awards: [
{
id: 0,
name: "最多17个选项",
color: 'red',
probability: 0
},
{
id: 1,
name: "单个选项最多填13字",
color: 'green',
probability: 0
}
],
}
}
好了,问题解决!
以后还是得多注意啊~~