weex 階段總結

新年伊始,回顧過去的一年,收穫不少,以前一直在研究weex,說內心話感受心好累,官方文檔不全,社區不活躍,遇到不少坑,官方發佈的版本有時都有坑,搞得我都不敢更新版本了。javascript

可是,研究了這麼久,放棄太惋惜,唉,只能抱着相信尤大大能將 weex 打形成 vue 同樣的想法一直走下去。vue

1.weex 默認適配尺寸java

weex默認使用750px * 1334px做爲適配尺寸, 實際渲染時因爲浮點數的偏差可能會存在幾px的偏差, 出現細線等樣式問題, 能夠經過加減幾個px來調試webpack

iPhone界面尺寸

注:style上須要添加 scoped,不然沒法自動適配。web

2.navigator 頁面跳轉vue-router

示例一:weex

<script>
  var navigator = weex.requireModule('navigator')
  var modal = weex.requireModule('modal')
  export default {
    methods: {
      jump (event) {
        console.log('will jump')
        navigator.push({
          url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
          animated: "true"
        }, event => {
          modal.toast({ message: 'callback: ' + event })
        })
      }
    }
  };
</script>

示例二:ui

function isWeex () {
  return process.env.COMPILE_ENV === 'weex' // 須要在webpack中自定義
}

export default {

  methods: {

    push (path) {
      if (isWeex()) {
        const toUrl = weex.config.bundleUrl.split('/').slice(0, -1).join('/') + '/' + path + '.js' // 將a.js的絕對地址轉爲b.js的絕對地址
        weex.requireModule('navigator').push({
          url: toUrl,
          animated: 'true'
        })
      } else {
        this.$router.push(path) // 使用vue-router
      }
    },

    pop () {
      if (isWeex()) {
        weex.requireModule('navigator').pop({
          animated: 'true'
        })
      } else {
        window.history.back()
      }
    }
  }
}

.this

相關文章
相關標籤/搜索