[个人记录]Weex入坑

Weex入门

官方文档

文档
iOS集成

开发环境配置

• 安装node
• 安装weex开发工具

sudo npm install -g weex-toolkit

• 验证 weex-toolkit是否安装
  输入weex --version或者weex,得到下图结果，就说明ok了～

weex.png

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内容改为

• 生成对应二维码

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

run_serve.png

• 打开浏览器，输入 http://localhost:8080/,注意: 端口号与run_serve.png中框起来部分一致。

浏览器预览.png