小程式自定義元件的坑: thirdScriptError sdk uncaught third Error Cannot read property 'name' of undefined
阿新 • • 發佈:2018-11-10
最近在開發微信小程式的自定義元件轉盤類的,不小心又踩坑裡去了。。。
偵錯程式上出現這種報錯:
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
}
],
}
}
好了,問題解決!
以後還是得多注意啊~~