weex踩坑记录！(官方文档的部分坑)

众所周知，阿里的KPI项目害人不浅，而19年至今未怎么维护的weex移动端跨平台框架更是，bug多到难以计数，现根据使用半年的情况记录坑点(针对官网未提及的内容而记录)。我是使用vue编写的，故以下的点都是针对vue框架下。

vue

• weex 依赖的 vue 版本是 2.5，2.6 的新属性不可使用。如 v-slot 新写法不可用。
• 不支持异步组件写法。

// 不支持
components: {
    'Title': () => import( "./title.vue"),
}

es6

只支持基础的es6api，如 aync、await 不可用。

nextTick、mounted

nextTick、mounted在 vue 的生命周期中是 dom 渲染完毕，而在 weex 中，最好用setTimeout来判定是否渲染完毕，nextTick是失效的，定时的时间根据实际情况而定。

provide/inject

虽然官方不推荐，但可用，多个嵌套组件传参很有用，注意不要使用异步数据， vue 官方不支持(3可支持)。

list

loadmore事件会多次触发，此处使用需要用防抖函数。

loading

组件本身问题

loading有个大坑，ios 上页面未铺满一页时，底部会出现 loading，而 android 不会(android中list组件会默认填充一页)。且 refresh 组件使用时，不会触发 loading 事件但是会使它出现在页面上，故我们通常这样使用：
注意：android 不要使用 v-if 来显示或隐藏，初次未渲染后续就不会继续渲染了。

// refreshing 表示是否正在刷新
<loading
    v-if="isIos && !refreshing"
    @loading="onloading"
    :display="isLoading ? 'show' : 'hide'"
/>
<loading
    v-else-if="!isIos"
    @loading="onloading"
    :display="isLoading ? 'show' : 'hide'"
/>

隐藏组件问题

当加载到最后一条数据时，此时不需要请求数据，每次出现后即隐藏，这个时候不能直接置display为hide，需要给一个延时，否则不会隐藏。

if (this.hasNoMore) {
    setTimeout(() => {
        this.pullUpLoad = false
    }, 500)
    return
}

加载动画问题

loading-indicator在一些机型上时出不来的，所以这块最好使用图片替代。

ref

当使用 v-for 设置 ref 时，获取时是一个数组，需要取第一个。

this.$refs["channel${this.currentTabIndex}"][0]

text

text 一定要确定宽度，flex 为 1 或者写死宽度，否则多行或者省略号时会失效。

样式

此块请一定一定仔细看官方文档，跟 web 很多不同

• 不支持简写，甚至于 border，都需要分别设置 width style color。
• 不支持背景图片，只能使用官方提供的image组件，通过absolute充当背景图。注意：absolute 图片需要放在 div 的第一个子元素，放在后面会被内容覆盖，其他情况下图片出不来请参照这种情况。
• android上不允许子元素边框超过父元素，就算是定位也不行，ios上没事，兼容的话就一定要考虑到这一点。
• font-size设置了大小后，最好设置一下line-height，文字会有个默认的边距，类似于 web 端line-height设置为1.2。多行文本除外。
• 动态style写法为:style="{ fontSize: '24px', 'line-height': '24px' }"
• 动态class写法为:class="['test1', flag ? 'test2' : 'test3']"

非原生组件问题

• 当需要初始化通过v-if显示某一个元素时，需要在页面渲染完毕，否则会失效，即不能在 data 中设定该值为true。