Weex入门
官方文档
开发环境配置
- 安装
node
- 安装weex开发工具
sudo npm install -g weex-toolkit
- 验证 weex-toolkit是否安装
输入weex --version
或者weex
,得到下图结果,就说明ok了~
Weex Playground
- Weex Android Playground下载地址
- Weex iOS Playground(需要自己编译运行,操作步骤参照README.md)
创建第一个Weex文件
- 创建Weex文件(此处使用first命名)
weex create first
打开.we文件 (推荐使用Atom、Sublim Text等IDE打开,再给IDE添加Weex的代码提示插件)
编辑first.we内容改为
<template>
<div class="container" >
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</text>
</div>
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3uo9"></image>
<text class="title">Java</text>
</div>
<div class="cell">
<image class="thumb" src="http://t.cn/RGE31hq"></image>
<text class="title">Objective C</text>
</div>
</div>
</template>
<style>
.cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
.thumb {width: 200; height: 200; }
.title {text-align: center ; flex: 1; color: grey; font-size: 50; }
</style>
- 生成对应二维码
weex first.we --qr
- 使用手机安装的Playground扫描二维码(请保证电脑和手机同一网络)
创建第一个Weex工程(较老版本的 weex-toolkit
,不能使用weex init
)
- 创建一个目录存放文件
mkdir FirstWeex
- 初始化Weex工程
weex init
输出如下(项目名默认使用当前目录名):
prompt: Project Name: (FirstWeex)
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/main.we created.
file: webpack.config.js created.
- 添加依赖(科学上网,稍等几分钟就好)
npm install
- 运行服务
npm run serve
- 打开浏览器,输入
http://localhost:8080/
,注意: 端口号与run_serve.png
中框起来部分一致。