小程序自定义组件的坑: thirdScriptError sdk uncaught third Error Cannot read property 'name' of undefined

最近在开发微信小程序的自定义组件转盘类的,不小心又踩坑里去了。。。

调试器上出现这种报错:

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
       }
    ],
 }
}

好了,问题解决!

以后还是得多注意啊~~

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值