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
开始
- 使用自己喜欢的文本编辑器，写入以下内容：
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</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>
另存为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失败。
微信扫码
网友评论