阿里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所示:

阿里Weex开发快速入门教程_第1张图片
图1

同时会在test.we所在的文件目录会生成weex_tmp文件夹,在weex_tmp\\\\h5_render目录下是生成的react.js。你也可以执行命令 weex test.we --qr,则会在终端内生成一个二维码,如下图2所示:
阿里Weex开发快速入门教程_第2张图片
图2

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

阿里Weex开发快速入门教程_第3张图片
图3

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

阿里Weex开发快速入门教程_第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失败。

阿里Weex开发快速入门教程_第5张图片
微信扫码

你可能感兴趣的:(阿里Weex开发快速入门教程)