Weex瞭解

weex描述

• weex是一個使用web開發體驗來開發高性能原生應用的框架，能支持vue.js框架。它能夠實現用同一套代碼來構建Andriod、IOS和web應用。能夠實現使用JavaScript和流行的前端框架來開發移動端應用。
• weex的結構是解耦的（模塊之間的耦合），渲染引擎和語法層是分開的，也不依賴特定的前端框架。使用它的目的是爲了節省項目的人力，使得效率性能增強。
• 相關語法

開發環境搭建

• 安裝依賴：Node環境（包含npm）
• 安裝vue開發相關工具

• 安裝weex-toolkit

  $ npm install -g weex-toolkit
    $ weex -v //查看當前weex版本

• 直接更新weex-toolkit

  $ weex update weex-devtool@latest //latest表示最新版本
    $ weex //查看weex的相關命令參數

• 建立第一個weex+vue的項目

  $ weex create awesome-project

  在awesome-project文件夾裏面就建立了一個使用weex+vue的項目。根據指示下載相關依賴，或可使用

  npm install

  進行下載依賴。

  在根目錄下運行

  npm run dev $ npm run serve & npm start

  進入localhost:8081/index.html（或是根據運行提示的IP地址查看） 便可查看weex+vue 一個頁面。

項目的index.vue

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

<style scoped>/*scoped表示該樣式只用於當前vue實例*/
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 424px;
    height: 200px;
  }
</style>

helloworld.vue （weex頁面組件）

<template>
    <text class="message">Now, let's use Vue.js to build your Weex app.</text>
</template>

text組件是weex特有的通用容器，是一個塊級的文本容器，用來渲染文字，文本只能放在該標籤中。

開發

使用weex的語法+vue 的語法進行開發。

• weex-vue-render//渲染器
• weex-loader//是一個webpack的loader，它能把*.vue文件轉化爲簡單的javascript 模塊用於安卓以及 iOS 平臺。全部的特性和配置都是跟 vue-loader 同樣的。