weex andriod tabbar 选中tabitem时出错，错误提示：invalid instance id "1"

问题描述

问 题

1、我仿照playground写了个tabbar，在web环境里运行没问题，但是在andriod环境里就出错了。点击tabitem无反应
2、我通过weex debug 调试，发现错误日志如下：
index.js:29 Error: invalid instance id "1"
global.(anonymous function) @ index.js:29
(anonymous) @ Runtime.js:255
(anonymous) @ EventEmitter.js:49
_emit @ EventEmitter.js:48
emit @ EventEmitter.js:61
onmessage @ Runtime.js:96
3、代码如下（删除了样式部分）：
<template>

<div :style="{ backgroundColor: backgroundColor }" class="container" @click="onclickitem">
    <image src="http://gtms03.alicdn.com/tps/i3/TB1mdsiMpXXXXXpXXXXNw4JIXXX-640-4.png" class="top-line"></image>
    <image :src="icon" class="tab-icon"></image>
    <text :style="{ color: titleColor }" class="tab-text">{{title}}</text>
</div>

</template>

<script>

export default {

props: {
  index: { default: 0 },
  path: {default:"/"},
  title: { default: '' },
  titleColor: { default: '#000000' },
  icon: { default: '' },
  backgroundColor: { default: '#ffffff' }
},
methods: {
  onclickitem: function (e) {
    var params = {
      index: this.index,
      path: this.path
    };
    console.log("tabitem click");
    this.$emit('tabItemOnClick', params);
  }
}

}

</script>

<template>

<div class="tabbar">
    <tabitem
            v-for="item in tabItems"
            :key="item.index"
            :path="item.path"
            :index="item.index"
            :icon="item.icon"
            :title="item.title"
            :titleColor="item.titleColor"
            @tabItemOnClick="tabItemOnClick"
    ></tabItem>
</div>

</template>

<script>
import tabitem from './tabitem.vue'
export default {

props: {
  tabItems: { default: [] },
  selectedColor: { default: '#ff0000' },
  unselectedColor: { default: '#000000' }
},
data: function () {
  return {
    selectedIndex: 1
  }
},
components: {
  tabitem
},
created: function () {
  this.select(this.selectedIndex);
},
methods: {
  tabItemOnClick: function (e) {
    this.selectedIndex = e.index;
    this.select(e.index);
    console.log("tabBarOnClick click");
    this.$emit('tabBarOnClick', e);
  },
  select: function(index) {
    for(var i = 0; i < this.tabItems.length; i++) {
      var tabItem = this.tabItems[i];
      if(i == index){
        tabItem.icon = tabItem.selectedImage;
        tabItem.titleColor = this.selectedColor;
        tabItem.visibility = 'visible';
      }
      else {
        tabItem.icon = tabItem.image;
        tabItem.titleColor = this.unselectedColor;
        tabItem.visibility = 'hidden';
      }
    }
  },
}

}

</script>
4、weex debug模式下，控制台打出的日志如下：
:8088/lib/Runtime.js:177 START JS FRAMEWORK 0.19.7, Build 2017-01-10 10:50.
:8088/source/j36whjvmuq2y90orem.js:274 updated 钩子执行...
Runtime.js:177 START JS FRAMEWORK 0.19.7, Build 2017-01-10 10:50.
:8088/lib/Runtime.js:177 START JS FRAMEWORK 0.19.7, Build 2017-01-10 10:50.
index.js:29 Error: invalid instance id "1"
global.(anonymous function) @ index.js:29
:8088/source/js-framework.js:19780 Error: invalid instance id "1"
global.(anonymous function) @ :8088/source/js-framework.js:19780

解决方案

是我没搞清楚在线调试的原理导致的，使用weex debug工具在线调试时，devtools会重新初始化一次JS Framework，在这个过程中会destroy掉以前的实例，所以需要在devtools初始化JS Framework后再次创建实例（在ACTION_DEBUG_INSTANCE_REFRESH广播里手动创建）。

weexteam组的解答
集成Devtools的注意事项

这篇关于weex andriod tabbar 选中tabitem时出错，错误提示：invalid instance id &quot;1&quot;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！