ウェブサイト構築に Vue を使うとデータバインディングとか自分で実装せずとも自動で処理してくれるのですが,中国 EC サイト運営大手の Alibaba が開発している Weex を使うと,このウェブサイトをネイティブアプリ化することができます!すごい!
環境
- OS: Windows 10
- Android OS: Marshmallow
- Vue: 8.10.0
- Weex: 1.3.4
macOS だと iOS アプリもビルドできますが,私の環境は Windows なので,Windows で Android アプリをビルドするための環境づくりしか説明していません.
はじめに
色々入れておく必要があります.
Node.js
npm で管理する場合は普通の Node.js を入れます.
Weex
$ npm install -g weex-toolkit
Android Studio
ビルドには Android SDK が必要になります.元々 Android Studio を入れていたのでそのまま使いましたが,そうでなくても Android Studio を使ってインストールしたほうがよさそうです.
Android SDK
Android Studio が入ったら [configure] > [SDK Manager] > [Android SDK] から Android SDK をインストールします.
実機を繋ぐので,[SDK tools] > [Google USB Driver] も必要です.
JDK
Java SE Development Kit を入れます.
JDK 10.0.1 が最新バージョンでしたが,これだと動かなかったので JDK 8 (Java SE 8u172) を選択します.
環境変数設定
設定する必要があった (システム) 環境変数は,私の環境では三つでした.
- ANDROID_HOME: Android/sdk ディレクトリ
- JAVA_HOME: java/jdk1.8.0_172 ディレクトリ
- PATH: Android/sdk/platform-tools ディレクトリ
Weex プロジェクトの作成
初期設定がサンプルのようになっているので,それを使って試しにビルドしてみます.
$ weex create awesome-app
cd awesome-app
npm install
ブラウザでテスト実行
$ npm start
環境によってローカルサーバの接続先が変わるようなので,メッセージで確認してください.
Android アプリのビルド
$ weex platform add android
weex run android
実行するときに Android スマホを USB debug をオンにした状態で接続しておきます.
実行するとビルドが始まり,スマホにアプリがインストールされます.
最後に
Weex は資料が少なく,中国で生まれたものなので質問投稿なども中国語が多く,読むのが辛いです....