阿里Weex开发快速入门教程

Weex开发环境搭建

---

1. 安装node.js

因为Weex工具链使用node.js构建，在进行后续步骤前，你需要先安装 Node.js ，可在node.js官网下载，由于Weex对node.js的是有版本要求的，所以建议使用较新的版本。

2. 安装weex-toolkit

weex-toolkit是Weex开发所需的命令行工具，node.js安装成功后，打开命令行终端，执行npm install -g weex-toolkit，则会自动安装weex-toolkit模块。但是在安装过程中可能会出现一个 EACCES 错误，这个错误代表：你对某个路径没有足够的写的权限， 从而不能将你的包或者命令存到这个路径下。所以，你需要修改npm的权限(教程传送门)，或者你也可以执行sudo npm install -g weex-toolkit，在之前的命令前加上sudo。安装完成后，在终端执行命令weex，则会看到如下所示信息：

wangMac:~ wang$ weex

Usage: weex foo/bar/we_file_or_dir_path  [options]
Usage: weex debug [options] [we_file|bundles_dir]
Usage: weex init

选项：
  --qr          display QR code for PlaygroundApp                         [布尔]
  --smallqr     display small-scale version of QR code for PlaygroundApp,try it
                if you use default font in CLI                            [布尔]
  -o, --output  transform weex we file to JS Bundle, output path must specified
                (single JS bundle file or dir)
                [for create sub cmd]it specified we file output path
                                                  [默认值: "no JSBundle output"]
  --watch       using with -o , watch input path , auto run transform if change
                happen
  -s, --server  start a http file server, weex .we file will be transforme to JS
                bundle on the server , specify local root path using the option
                                                                        [字符串]
  --port        http listening port number ,default is 8081         [默认值: -1]
  --wsport      websocket listening port number ,default is 8082    [默认值: -1]
  --np          do not open preview browser automatic                     [布尔]
  -f, --force   [for create sub cmd]force to replace exsisting file(s)    [布尔]
  -h, --host                                               [默认值: "127.0.0.1"]

weex debug -h for Weex debug help information.

for cmd example & more information please visit
https://www.npmjs.com/package/weex-toolkit

开始

---

1. 使用自己喜欢的文本编辑器，写入以下内容：

另存为test.we，在终端中进入文件所在目录，输入命令:weex test.we，

wangMac:LearnOne wang$ weex test.we
info Tue Nov 15 2016 09:19:50 GMT+0800 (CST)WebSocket  is listening on port 8082 
info Tue Nov 15 2016 09:19:50 GMT+0800 (CST)http  is listening on port 8081 

操作完成后，会自动打开你电脑上默认浏览器，进入到这个页面，如下图1所示：

图1

同时会在test.we所在的文件目录会生成weex_tmp文件夹，在weex_tmp\\\\h5_render目录下是生成的react.js。你也可以执行命令 weex test.we --qr，则会在终端内生成一个二维码，如下图2所示：

图2

此时需要下载Weex Playground( 传送门)，android和iOS版本都有，android界面如下图3所示：

图3

点击右上角的扫一扫，扫描终端内生成的二维码，即可在手机上查看效果了，效果如图4所示：

图4

Weex 工程开发套件

---

weexpack 介绍

weexpack 是 weex 新一代的工程开发套件。它允许开发者通过简单的命令，创建 weex 工程项目，将项目运行在不同的开发平台上。

前期环境要求

• 目前只支持Mac平台。
• 配置Node.js环境，并且安装npm包管理器。
• 配置iOS开发环境：
  • 安装 Xcode IDE，启动一次Xcode， 使 Xcode 自动安装开发者工具和确认使用协议。
  • 安装 cocoaPods。
• 配置 Android 开发环境：
  • 安装Android Studio 并打开，新建项目。
  • 保证 Android build-tool 的版本为23.0.2

首先，全局安装 weex-pack 命令：

 $ sudo npm install -g weexpack

安装完成后，创建 weex 工程：

$ weexpack init appName

weexpack 会自动创建以 appName 命名的目录，并将项目的模板拉取到该目录。
最终形成的目录结构，如下所示：

-> /appName
.
|—— .gitignore
|—— README.md
|—— package.json
|-- android.config.json
|-- ios.config.json
|—— webpack.config.js
|—— /src
|     |—— index.we
|—— /html5
|     |—— index.html
|—— /ios
|     |—— /playground
|     |—— /sdk
|     |—— /WXDevtool
|—— /android
|     |—— /playground
|     |—— /appframework

紧接着，进入目录，并且安装依赖：

$ cd appName && npm install

Android 平台打包&运行

android 的打包和构建是一体的：

$ weexpack run android

你可以更改项目目录的 android.config.json

• AppName：应用名
• AppId：application_id 包名
• SplashText：欢迎页上的文字
• WeexBundle：指定的 weex bundle 文件（支持文件名和 url 的形式）

文件名则以本地文件的方式加载bundle,url则以远程的方式加载bundle 如果以本地方式指定bundle .we文件请放到src目录。
终端命令执行过程如下：

$ weexpack run android
 => Will start Android app
============build config============
AppId=>com.alibaba.weex
AppName=>WeexApp
SplashText=>Hello
Weex
WeexBundle=>index.we
 => Building app ...
BUILD SUCCESSFUL
Total time: 1 mins 44.822 secs
 => Install app ...
 => Running app ...

请确保你的 Android SDK 包含了 build-tool 为23.0.2的版本，否则将导致项目build失败。

微信扫码