アリWeex開発のクイックスタートチュートリアル

ビルドに#Weex開発環境

##のNode.jsをインストール1.
Node.jsのを使用してWeexのビルドツールチェーンので、次のステップを実行する前に、あなたがインストールする必要があるのNode.jsを Node.jsのWeexがあるとして、公式ウェブサイトのNode.jsからダウンロードすることができますバージョンは要件は、新しいバージョンを使用することをお勧めします。
2 weex・ツールキットのインストール##
weex・ツールキットは、コマンドラインツールWeexを開発するために必要とされる、成功したインストール後のNode.jsは、コマンドライン端末を行う開くnpm install -g weex-toolkit自動的weex・ツールキット・モジュールをインストールしました。しかし、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に示されている、コンピュータ上のデフォルトのブラウザを開き、このページに移動します：

うもそのweex_tmpフォルダを作成するファイルディレクトリtest.weに、weex_tmp \\\\ h5_renderディレクトリの下にそれはreact.jsが生成されます。また、コマンドを実行することができるweex test.we --qr：図2に示すように、それは、端末内に二次元コードが生成され、

この場合Weex遊び場（ダウンロードする必要転送ゲートを図3に示すように両方のバージョン、アンドロイドインターフェース）、AndroidとiOS。

二次元コード読取端末で生成されたスイープ右上が、電話での効果を確認するために、図4に示す効果。

#Weexプロジェクトの開発キット

##紹介weexpack
weexpack weexは、プロジェクトの開発キットの新世代です。それはweexプロジェクトを作成するための簡単なコマンドを使って、開発者は、プロジェクトが異なる開発プラットフォーム上で実行されることができます。
##予備環境要件

現在は、Macプラットフォームをサポートしています。
環境設定のNode.js、およびNPMパッケージマネージャを搭載しています。
iOSの開発環境を設定します：
- XcodeのIDEをインストールし、Xcodeのを開始するので、自動的にXcodeの開発ツールをインストールして、プロトコルを使用して確認しました。
- インストールcocoaPods。
設定Androidの開発環境：
- Androidのメーカーをインストールし、新しいプロジェクトを開きます。
- Androidのビルドツールのバージョンを確認している23.0.2

まず、グローバルインストールweex-packコマンド：

 $ sudo npm install -g weexpack

インストールが完了したら、weexプロジェクトを作成します。

$ weexpack init appName

自動的にappNameの名前のディレクトリに作成weexpack、ディレクトリを引くためのテンプレートやプロジェクト。
最終的に形成されたディレクトリ構造は、次の通り：

-> /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プラットフォームをパッケージング＆実行

アンドロイド包装、建物は1以下のとおりです。

$ weexpack run android

あなたは、プロジェクトディレクトリを変更することができますandroid.config.json

AppNameは：アプリケーション名
APPID：APPLICATION_ID包名
SplashText：ページ上のテキストようこそ
WeexBundle：（ファイル名やURLの支援の形で）weexバンドルファイルを指定

我々のファイルがローカルにsrcディレクトリを喜ばバンドル指定した場合、ファイル名は、ロード・バンドルへのローカルファイルの形で、urlはリモートロード可能バンドルを配置します。
ターミナルコマンドを次のように：

$ 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は、ビルド・ツールのバージョン23.0.2が含まれていることを確認し、それ以外の場合は、プロジェクトのビルドが失敗します。

世間の注目のコード番号を掃引するためにようこそ、より良いコミュニケーション

秀秀ING

公開された115元の記事・ウォン称賛67 ・ビュー10万+

プライベートの手紙の懸念