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:

运行后的效果图：

image

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