Weex页面的编写——Weex的学习之路（六）

通过前几博客我们把weex的内置组件都学习完了，组件的单独使用想必都可以了。那么，这次我们来做weex实际页面的编写，见证一下，一套代码在Android、Ios和H5上使用。在weex官网推荐我们使用Weex Studio作为编译器，其实这款编译器也不是新出来的，它就是vscode再包装了一下添加脚手架，实际使用和vscode是一样的，只是比vscode多了一个预览界面。接下来我们就进行代码的编写：

一.下载编译器——Weex Studio

weex studio下载地址：https://weex.apache.org/zh/tools/ide.html

Weex Studio下载

注意：安装weex studio前，weex的环境都要已安装好，如果还未安装或者环境安装有问题，请看第一篇weex环境的安装

二.新建项目code编写

打开weex IDE,点击File——新建Weex项目，然后填写项目名称并选择存储路径，这个时候点击确定我们的项目就这样生成了，如图所示：

新建weex项目

有一点需要特别注意：如果大家不是在weex Studio上新建的项目，而是通过命令行建的项目，那么直接运行的话，会报：ERR! missing script: ide:preview，这个时候我们需要在package.json文件scripts里添加"ide:preview": "npm run serve"，具体的如图所示：

image

以上我们的项目就是跑起来了，那么怎么在安卓和苹果手机上运行呢，这是weex官网给了我们一个神器WeexPlayground，安装在手机上后扫描Weex Studio右下角的二维码，就是安装在手机上的App了。

我们想要编写再记得页面，找到src文件夹下的index.vue,这里面就是我们要编写的页面了，下面我们来写一个简单的Hello Word:

<template>
  <div class="wrapper">
    <text class="greeting">Hello Word!</text>
  </div>
</template>

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

<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 424px;
    height: 200px;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 80px;
    color: #41B883;
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: #727272;
  }
</style>

运行后的效果图：

image

以上我们的weex实际页面编写就开始了，那么大家可以将前几篇博客学的内置组件一一在index.vue上练习吧！