#Weex development environment to build
## 1. Install node.js
because Weex build tool chain using node.js, before carrying out the next steps, you need to install Node.js , can be downloaded from the official website node.js, as Weex there is node.js version requirements , it is recommended to use a newer version.
## 2 Install weex-toolkit
weex-toolkit is required to develop a command-line tool Weex, node.js after successful installation, open a command line terminal performs npm install -g weex-toolkitinstalled automatically weex-toolkit module. But a EACCES errors may occur during the installation process, the error means: you do not have the authority to write on a path, so you can not command your bag or keep to this path. So, you need to modify the permissions npm ( tutorial portal ), or you can perform sudo npm install -g weex-toolkit, plus before the previous command sudo. After installation is complete, the terminal executes the command weex, you will see the information as follows:
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
#Start
- Use your favorite text editor, writes the following:
<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>
Save as test.we, enter the directory where the file in the terminal, enter the command: 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
After the operation is complete, it will automatically open your default browser on your computer, go to this page, shown in Figure 1:
will also in the file directory test.we that generates its weex_tmp folder, under weex_tmp \\\\ h5_render directory It is generated react.js. You can also execute a command weex test.we --qr, it will generate a two-dimensional code in the terminal, as shown in FIG. 2:
In this case need to download Weex Playground ( transfer gate ), android and iOS both versions, android interface as shown in Figure 3:
The sweep the top right corner, generated in the two-dimensional code scanning terminal, to see the effect on the phone, the effect shown in Figure 4:
#Weex Project Development Kit
## weexpack introduce
weexpack weex is a new generation of project development kit. It allows developers through a simple command to create weex projects, the project will be run on different development platforms.
## preliminary environmental requirements
- Currently only supports Mac platform.
- Node.js environment configuration, and is mounted npm package manager.
- Configuring iOS development environment:
- Install Xcode IDE, start a Xcode, so automatically install Xcode Developer Tools and confirmed using the protocol.
- Installation cocoaPods.
- Configure Android development environment:
- Android Studio installed and open a new project.
- Ensure Android build-tool version is 23.0.2
First, the global installed weex-pack command:
$ sudo npm install -g weexpack
After installation is complete, create weex project:
$ weexpack init appName
weexpack automatically created in the directory named appName, templates and projects to pull the directory.
The directory structure finally formed, as follows:
-> /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
Then, go to the directory and install dependencies:
$ cd appName && npm install
Packaging & run Android platform
android packaging and building are one:
$ weexpack run android
You can change the project directory android.config.json
- AppName: Application name
- AppId：application_id 包名
- SplashText: Welcome text on the page
- WeexBundle: (in the form of support for the file name and url) specified weex bundle file
File name, in the manner of a local file to load bundle, url remote places loadable bundle if the specified bundle .we file locally please the src directory.
Terminal command as follows:
$ 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 ...
Make sure your Android SDK contains a build-tool version 23.0.2, otherwise it will cause the project build to fail.
