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 [e-mail] //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 一样的。