weex的坑(总)

来源:www.jianshu.com 更新时间:2023-05-25 21:55

1、<text>组件会被转为p标签,对于字体的样式直接写在<text>组件上,写在外层div无效。
2、背景图片直接用<image>标签,背景图片上的内容放在<image>标签之后,这样会自动放在背景图之上,不用设置层级。
3、图片必须设置固定宽高,图片地址用绝对路径(http或者https)
4、padding可简写, margin不要简写,因为margin简写在有的手机上会失效。
5、border不要简写
6、border-radius如果四个圆角大小相同,可简写;圆角大小不同,就拆开写。
7、设置背景色,不要简写,在手机上无效。直接写background-color。
8、文字溢出展示的css要用lines: 1;来指定最多显示的行数。然后加上以下代码:

  overflow: hidden;
  text-overflow: ellipsis;
  lines: 1; // 指定溢出的行数
  max-data-width: 492px;

9、文字的颜色值要么六位颜色值#2B313D,要么简写的三位#fff, 要么英文red。
10、如果使用了scroller, 要为它设置边框border的话,不要直接在scroller上写border, 手机上是无效的。可在外层包裹一个div, 在该div上设置border。
11、weex一般使用flex布局,默认排列方向的column,不需要写display: flex。如果要横向布局,需加上flex-direction; row;来声明。最外层元素要居中显示的话,直接对该元素使用align-self: center; 不要使用margin; 0 auto;或者position: relative; left: 50%;transform: translateX(-50%);这种形式,在手机上是无效的。
12、地址跳转请使用weex内置模块nav。

const nav = weex.requireModule('nav')
// 跳转
nav.push({
  url: '',
  animation: true
})
 

1、在使用storage客户端存储的时候, 变量不能使用局部变量的形式,也就是下面这种是获取不到的,或者获取到了,无法正常使用

function toPage() {
     let info
     storage.getItem('previledge', e => {
        if (e.result === 'success') {
          info = JSON.parse(e.data)
        }
      })
      ....
}

改成响应式的数据就可以了
function toPage() {

     storage.getItem('previledge', e => {
        if (e.result === 'success') {
          // 这种
          this.info = JSON.parse(e.data)
        }
      })
      ....
}

2、获取图片的实际宽高

    onImageLoad (ele, event) {
      const view = event.target
      if (event.success) {
        if (weex.config.env.platform === 'Web') {
          view.style.width = event.size.naturalWidth / 2 + 'px'
          view.style.height = event.size.naturalHeight / 2 + 'px'
        } else {
          animation.transition(view, {
            styles: {
              width: event.size.naturalWidth / 2 + 'px',
              height: event.size.naturalHeight / 2 + 'px'
            },
            duration: 0, // 需要设置为0,否则无效
            timingFunction: 'ease',
            delay: 0,
            needLayout: true // 变化后刷新界面
          }, function () {})
        }
      }
    },

然后在image标签加上@load="onImageLoad('img1', $event)"

3、把跳转链接进行了封装一个函数
push (url) {

      nav.push({
        url,
        animated: 'true'
      })
    }

然后在点击某个元素,跳转某个链接的时候,不能直接在元素上调用push
<div @click="push(url)"></div>

这样写会报错
原因:配置的域名地址未在data中声明

改成下面这样就能正常跳转
<div @click="toLink"></div>

...
methods: {
    toLink() {
        this.push(url)
    }
}

4、部分https图片不显示,是因为手机开了代理的原因

5、使用nav模块进行链接的跳转,链接中不能含中文,不然点击没反应。要使用encodeURIComponent进行编码

6、如果要在页面显示的时候进行数据的更新,必须且只能在根元素上绑定 viewappear事件;
如果是局部更新,就在当前元素上绑定appear事件,该事件会在这个元素再次出现在你视野的时候触发。

7、在app容器中,如果想要手机的头部也要被背景图片覆盖,调高内容头部的背景图片,然后把内容往下移手机导航栏的高度(不知你看懂没有,嘻嘻)

 

8、关于动画
当你只能在下一个循环获取动画元素时(比如一开始是隐藏的,点击后才显示),使用this.nextTick(() => {...animation})在浏览器上是好 的,但是放在android, ios手机中,动画就失效了。 把this.nextTick换成setTimeout即可。

 

并且注意transform动画元素只支持translate/translateX/translateY这三个属性

9、小icon图用3倍图,不然android上会有棱角

1、loadmore事件不会在web端触发
2、不支持百分比单位
3、垂直水平居中: justify-content: center即可

4、使用this.$emit('call-click'), 然后在父组件中监听call方法,发现在APP中无法唤起call-click方法(健康VIP,点击客服权益按钮)
原因: 不能使用-方法,应该写成this.$emit(callClick)

5、不支持vue中的事件修饰符,比如.stop, .prevent等

6、动态绑定class, 请使用数组的形式.
多个class用逗号分隔

:class="[index == choosedIndex ? 'choosed-class' : '', 
index != choosedIndex ? 'unchoosed-class' : '']"

7、组件所传递的数据一定要在beforeMount钩子中先获取到,不然手机端数据会先为空, 然后你的组件有限制条件显示的话,就不显示了。(比如健康VIP的邀请入口v-prize-new)
因为渲染流程是: beforeMount(拿数据)->渲染组件->created->mounted

8、background-image: linear-gradient(to right, red, blue);这种渐变不能与border-radius圆角大小不一样时同时使用,同时使用会导致border-radius失效。
比如:

    // border-radius会失效
    border-top-left-radius: 0;
    border-top-right-radius:0;
    border-bottom-right-radius:12px;
    border-bottom-left-radius:12px;
    background-image: linear-gradient(to right, red, blue);
    // border-radius正常显示
    border-radius:12px;
    background-image: linear-gradient(to right, red, blue);

9、对于某些样式属性,weex会给出警告的要思考怎么处理。比如align-self, max-width, min-width, white-space, word-break, outline, display, flex-start等

10、如果你的横向scroller组件无法滚动,考虑给scroller加个宽度就可以了。

1、weex中默认的css样式不要写:

display,
position: relative,

2、color属性都写全,不然爆出警告(这个可能跟项目的配置有关)
color: #fff; -> color: #ffffff;

3、align-self: center;的替换方案:
1、在元素的外层加一个div标签,然后对该div设置居中flex布局: justify-content: center; align-items: center
2、如果该元素有固定的宽度: margin-left: (750 - 元素的宽度) / 2

4、自定义slider的指引器

<slider class="banner-slider" auto-play="true" interval="3000" @change="getSliderIndex">
      <div v-for="(banner, index) in data.bannerList" :key="index" >
        <image class="banner-slider-image" @load="onImageLoad" :resize="data.effect === 2 ? 'cover' : 'contain'" :src="banner.src"></image>
        <text class="banner-slider-title">{{banner.title}}</text>
      </div>
      <!-- <indicator class="banner-slider-indicator" v-if="data.effect === 2 && data.bannerList.length > 1"></indicator> -->
    </slider>
    <!-- 自定义indicator -->
    <div class="custom-indicator-box">
      <div class="custom-indicator" :class="[index === currentSliderIndex ? 'custom-indicator-active': '']" v-for="(banner, index) in data.bannerList" :key="index"></div>
    </div>
.banner-slider-indicator {
  position: absolute;
  right: 10px;
  bottom: 0;
  height: 60px;
  item-size: 20px;
  item-color: #dddddd;
  item-selected-color: #ffffff;
}
.custom-indicator-box {
  position: absolute;
  right: 10px;
  bottom: 0;
  height: 60px;
  flex-direction: row;
}
.custom-indicator {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  background-color: transparent;
  margin-right: 5px;
}
.custom-indicator-active {
  background-color: #ffffff;
}
.banner-slider-title {
  width: 750px;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 80px;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: #ffffff;
  background-color: rgba(102, 102, 102, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  lines: 1;
}
    onImageLoad (event) {
     ...
    },
    getSliderIndex (e) {
      this.currentSliderIndex = e.index
    }

1、如果你想让你scroller容器内的元素平均分配空间, 那么

  • 在scroller外层包裹一个div, 给这个div一个最小宽度min-width
  • 在scroller容器下的每个子元素上加上flex-grow: 1, 注意不要使用flex:1; 哦,
    因为该属性是 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写,但是weex中Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性。

2、导航吸顶

  • 可以监听scroller的scroll事件获取滚动的距离,然后跟元素的初始top(这个通过dom模块的getComponentRect放来获取)做比较,再加上固定样式即可。
  • 外层滚动使用list组件代替,然后将要固定的元素使用<header>来包裹即可。