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

2018-04-24

ウェブサイト構築に Vue を使うとデータバインディングとか自分で実装せずとも自動で処理してくれるのですが，中国 EC サイト運営大手の Alibaba が開発している Weex を使うと，このウェブサイトをネイティブアプリ化することができます！すごい！

環境

macOS だと iOS アプリもビルドできますが，私の環境は Windows なので，Windows で Android アプリをビルドするための環境づくりしか説明していません．

色々入れておく必要があります．

npm で管理する場合は普通の Node.js を入れます．

terminal

$ npm install -g weex-toolkit

ビルドには Android SDK が必要になります．元々 Android Studio を入れていたのでそのまま使いましたが，そうでなくても Android Studio を使ってインストールしたほうがよさそうです．

Android Studio が入ったら configure > SDK Manager > Android SDK から Android SDK をインストールします．

実機を繋ぐので，SDK tools > Google USB Driver も必要です．

JDK 10.0.1 が最新バージョンでしたが，これだと動かなかったので JDK 8 (Java SE 8u172) を選択します．

設定する必要があった (システム) 環境変数は，私の環境では三つでした．

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

terminal

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

terminal

$ npm start

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

terminal

$ weex platform add android
weex run android

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

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

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