weex踩坑记录（2）

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容器中，如果想要手机的头部也要被背景图片覆盖，调高内容头部的背景图片，然后把内容往下移手机导航栏的高度（不知你看懂没有，嘻嘻）

image.png
image.png

8、关于动画
当你只能在下一个循环获取动画元素时（比如一开始是隐藏的，点击后才显示），使用this.nextTick换成setTimeout即可。

image.png

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

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