Weexってな超イケてるネイティブアプリフレームワークを試してみる【25分でインストール&実機テストまで】

Weexてなによ

アリババが主導で開発していた、ネイティブアプリフレームワーク。今はapacheプロジェクトに移管されている。
中身はVue。素敵。

weex.apache.org

インストール編

とりあえず、
npm -g i weex-toolkit webpack webpack-dev-server を叩いてライブラリ等をインストールする。
そして、サンプルプロジェクトを作る。
weex create weex-sample

以下が実行結果。インタラクティブに回答していけばいい感じにしてくれる。

weex ❯ weex create weex-sample
? May weex-toolkit anonymously report usage statistics to improve the tool over time? Yes
? Which npm registry you perfer to use? npm
23:48:51 : Set telemetry => true
23:48:51 : Set registry => http://registry.npmjs.org
Set telemetry = true
Set registry = "http://registry.npmjs.org"
23:48:51 : You can config this configuration again by using `weex config [key] [value]`
23:48:51 : Enjoying your coding time!

This command need to install weexpack. Installing...
? Project name weex-sample
? Project description A weex project
? Author MozyOk <mozy.okubo@gmail.com>
? Select weex web render lts
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets) stage-0
? Use vue-router to manage your view router? (not recommended) No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
23:53:26 : Generated weex-sample

ファイル生成が終わると、以下のように、コマンド一覧が出るのもナイス。

Success! Created weex-sample at /Users/mozyok/Test/weex/weex-sample

Inside that directory, you can run several commands:


  npm start
  Starts the development server for you to preview your weex page on browser
  You can also scan the QR code using weex playground to preview weex page on native

  npm run dev
  Open the code compilation task in watch mode

  npm run ios
  (Mac only, requires Xcode)
  Starts the development server and loads your app in an iOS simulator

  npm run android
  (Requires Android build tools)
  Starts the development server and loads your app on a connected Android device or emulator

  npm run pack:ios
  (Mac only, requires Xcode)
  Packaging ios project into ipa package

  npm run pack:android
  (Requires Android build tools)
  Packaging android project into apk package

  npm run pack:web
  Packaging html5 project into `web/build` folder

  npm run test
  Starts the test runner

To get started:

  cd weex-sample
  npm start

Enjoy your hacking time!