weex开发中的踩坑之旅

王孙娜

开始做weex开发到现在有差不多1年的时间,从一开始遇到问题的手足无措,到如今的气定神闲,除了有各位同事的悉心帮助,也离不开自己的一些总结。

weex在开发过程中与H5有很大的不同;作为一门新兴的语言,它也还不够成熟和完善,所以经常会出现一些意想不到的坑。写这篇记录的目的,也是为了新来的weex开发同学可以尽快的上手,以及遇到一些坑的时候可以更快的找到解决方法。

1、长列表,特别是有分页的情况下,需要使用list,而非scroller,虽然scroller也有同list相似的loadmorerefresh功能,但是在页面过长的情况下,使用scroller会导致页面卡死的情况。

2、使用list组件时,需要给list一个高度,比如flex:1,否则会显示出错。

list{  
    flex:1;
}

3、scroll里的text,在某些机型某些系统下,会导致最后一排字显示不全。

解决方法

// text的css里添加padding-bottom
text{  
    padding-bottom: 10px;
}

4、input组件,在android的某些机型下,无法显示光标,需要给input增加一个高于字符本身的高度。

解决方法

// input的css里添加height
input{  
    height: 50px;
}

5、weex的class可以绑定一个对象,动态的切换class,但是在实际使用中,在某些机型某些系统下,想要把新增的css属性去除,渲染会有问题。比如,有一个开关,打开的时候字体变粗,关闭的时候字体恢复原状

// 我们会习惯用class或者style这么写
<text :class={['f16', isBold && 'b']}>变化的字体</text>  
.b{
    font-weight: 700;
}

实际上当isBold从false变为true,再变为false的时候,有时候字体并不能恢复原貌

// 用v-if可以解决这个坑
<text class="f16 b" v-if="isBold">变化的字体</text>  
<text class='f16' v-else>变化的字体</text>  

6、写list分页的时候,经常会在末尾加上一句“没有更多数据了”;一般情况下,我们都会用v-if来控制这句话显示与否。在实际渲染中,会有一个意想不到的坑出现:第二页的数据会在“没有更多数据了”这句话之后渲染

解决方法,将v-if改为v-else-if

// 原来的代码
<cell v-if="showLoadMore">  
    <image :src="loadingGif" class="loading-gif"></image>
</cell>  
<cell v-if="currentPage == pageCount">  
    <text>没有更多数据了</text>
</cell>  
// 修改后的代码
<cell v-if="showLoadMore">  
    <image :src="loadingGif" class="loading-gif"></image>
</cell>  
<cell v-else-if="currentPage == pageCount">  
    <text>没有更多数据了</text>
</cell>  

7、降级到H5页面后,不能同时发送2条请求,需要用setTimeout隔开

8、使用viewappear的时候,在降级页面,需要手动把viewappear绑定到hybrid

mounted() {  
    // 使用viewappear一定要加这句,否则H5降级页面不触发
    hybrid.viewappear = this.viewappear
    this.isWeb && this.viewappear()
 },

9、vue只能监听已经初始化了的属性,无法监听响应式对象中新增的属性。

解决方法:

// newProperty无法响应
this.myObject.newProperty = 'hi'  
// vue.set( target, key, value )可以响应newProperty
this.$set(this.myObject, newProperty, 'hi')  

10、规范样式格式,比如:能用padding的尽量少用margin;
再比如:flex布局中,尽量写上align-items。有时候,规范的格式能够避免很多的适配渲染问题

11、list中使用header,安卓降级后不触发loadmore。加上loadmoreoffset=50可解决

12、在android下,input的双向绑定v-model在特定操作下,会无法响应。查询资料得出,这是weex官方的一个历史遗留问题,在不改变源码的情况下,我们可以通过先将v-model的数值设定为undefined,再赋值,来解决这个问题。

解决方法:

<input  
  placeholder="请手动输入面单号"
  ref="searchInput"
  v-model="inputCode"
  @focus="onFocus"
  @input="onInput"
  @keyboard="onKeyboard"
></input>

onInput(e) {  
      this.inputCode = undefined
      this.queryCode = e.value
      this.$nextTick(() => {
        this.inputCode = e.value
      })
    },

欢迎其他同事补充完善。

未完待续,持续更新……