[个人记录]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内容改为

<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

run_serve.png

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

浏览器预览.png