weex安装

受到前同事安利去尝试了一下weex，对比react-native从安装配置上来说要简单一些，但是文档真是少的可怜，这难道又是一个阿里的kpi项目？简单记录一下昨天在rmbp上的折腾。

1. 安装homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 用homebrew去安装node

brew install node
安装完成之后就拥有了node和npm。

3. 用npm去安装weex

npm install -g weex-toolkit

到这里weex安装完成，可以愉快地用weex玩耍了。

第一个weex项目

cd ~/Documents
weex init HelloWeex #创建HelloWeex工程
cd HelloWeex
npm install #安装项目依赖
npm run dev #开启watch
npm run serve #开启静态服务器

在以上命令行运行完之后就可以进入http://localhost:8080/index.html看到weex欢迎界面，如下所示：

image.png

上图是在里面内嵌了一个video内置组件，src/foo.vue代码如下：

<template>
  <div>
    <video class="video" :src="src"  controls
      @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
    <text class="info">state: {{state}}</text>
  </div>
</template>
<style scoped>
  .video {
    width: 630px;
    height: 350px;
    margin-top: 60px;
    margin-left: 60px;
  }
  .info {
    margin-top: 40px;
    font-size: 40px;
    text-align: center;
  }
</style>
<script>
  export default {
    data () {
      return {
        state: '----',
        src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
      }
    },
    methods:{
      onstart (event) {
        this.state = 'onstart'
      },
      onpause (event) {
        this.state = 'onpause'
      },
      onfinish (event) {
        this.state = 'onfinish'
      },
      onfail (event) {
        this.state = 'onfinish'
      }
    }
  }
</script>

weex官方文档还是偏少，具体项目实战还得慢慢自己摸索了~