Weex入門

1.weex的介紹

weex是2016年4月阿里巴巴在Qcon大會上宣佈開元的一套跨平臺移動開發工具。

weex主要解決了平凡發版和多段研發的兩大痛點，同事解決了前端語言性能查和顯示效果受限的問題。

開發者只須要在本身的app中嵌入weex的sdk，就能夠經過撰寫html/css/javascript來開發native級別的weex界面，(H5與native有啥區別？)weex界面的生成碼其實就是一段很小的js，能夠向發佈網同樣輕鬆部署在服務器端，而後再app中執行。

2.weex的優點

支持ES6規範

性能優異，開發簡潔標準，體積小巧

跨平臺

3.weex調試工具

Weex Playground App

4.weex開發環境搭建

安裝依賴node.js

npm install -g weex-toolkit

weex -v

weex init project   初始化項目

cd project

npm start

npm run serve    靜態服務

npm run dev

weex  debug   ---調試手機上的效果

5.weex通用樣式

weex分爲通用樣式和文本樣式

1.Weex對於長度值目前只支持像樹枝，不支持相對單位（em、rem）；適配以750px標準；

2.設定邊框,border目前不支持相似這樣border:1px solid #ff0000;的組合寫法；

3.設定背景顏色,background 目前不支持相似這樣backgroun:red;的寫法，須要修改成具體的background-color:red;

4.定位

 weex的position定位，relative、absolute、fixed、sticky,默認值爲sticky

weex目前不支持z-index設置元素層級關係，但靠後的元素層級更高，所以，對於層級高的元素，可將其排列在後面。

若是定位元素超過容器便捷，在Android下，超出部分將不可見，緣由在於Android端元素overflow默認值爲hidden

weex支持線性漸變（linear-gradient）、不支持徑向漸變（radial-gradient）

weex中box-show僅僅支持IOS

目前<image>組件沒法定義一個或幾個角的border-radius，只對IOS有效，對Android無效

weex中，flexbox是默認而且惟一的佈局模型，每一個都默認用友了display:flex屬性。

6.內建組件

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <a href="#">fdg</a>
    <web class="web" :src="src" @pagestart="start" @pagefinish="finish" @error="error"></web>
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// import { METHODS } from 'http';
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      src: 'https://www.baidu.com/',
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  },
  methods: {
    start () {
      console.log('start')
    },
    finish () {
      console.log('finish')
    },
    error () {
      console.log('error')
    }
  }
}
</script>

<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 424px;
    height: 200px;
    border-top-right-radius: 50px;
    background-color: red;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 50px;
    color: #41B883;
    border-width: 10px;
    border-color: #000;
    border-style: solid;
    background-image: linear-gradient(to top,black,white);
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: #727272;
  }
  .web{
    width: 100%;
    height: 500px;
  }
</style>