Vue+WeexでAndroidアプリをビルドする

ウェブサイト構築に 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

terminal

$ 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 プロジェクトの作成

初期設定がサンプルのようになっているので,それを使って試しにビルドしてみます.

terminal

$ weex create awesome-app
cd awesome-app
npm install

ブラウザでテスト実行

terminal

$ npm start

環境によってローカルサーバの接続先が変わるようなので,メッセージで確認してください.

Android アプリのビルド

terminal

$ weex platform add android
weex run android

実行するときに Android スマホを USB debug をオンにした状態で接続しておきます.

実行するとビルドが始まり,スマホにアプリがインストールされます.

最後に

Weex は資料が少なく,中国で生まれたものなので質問投稿なども中国語が多く,読むのが辛いです....