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 一样的。
posted @ 2018-05-10 11:38  美美王子  Views(304)  Comments(0Edit  收藏  举报