はじめに

もともとWebアプリのつもりだったので、ElementUI + Vue.js でやってたのだが、周りから「どうせやるならモバイルで使えるようにせえや」と言われてフロントを変更することにした。気にはなっていたのだが、ElementUI はレスポンシブ対応ではないのである。Vue は使い続けたいのでフロントだけ替えて、とりあえず昔からちょっと気になってた OnsenUI でいくことにする。

スクリーンショット

ひとまずこれまでやってきた ElementUI のフロントを OnsenUI で作り替えてみたのがこれ。裏でやってることは基本的にこれまでと同じ。

OnsenUIやってみて

メジャーなUIフレームワークのAPIが揃っている

Vue, Angular, React などメジャーどころはカバーされているので移行しやすい感じ。また iOS, Android 共に結構普通に見かけるUIパーツをすぐに使える。

Pageという考え方

HTMLの中で<v-ons-page>タグで囲ったところがモバイル画面上での一つのページの扱いになる。

index.html

<template id="page1">
  <v-ons-page>
    <!-- Page1 contents here -->
  </v-ons-page>
</template>

<template id="page2">
  <v-ons-page>
    <!-- Page2 contents here -->
  </v-ons-page>
</template>

Vueをマップ

template を指定していつものように各ページに vue をマップ出来る感じ

index.html

<script>
const page1 = {
  template: '#page1',
  data() {
    return {
      page1_data: [{msg: "A"}, {msg: "B"}]
    }
  },
  methods: {
    //your methods here
  }
}

const page2 = {
  template: '#page2',
  data() {
    return {
      page2_data: 1
    }
  },
  methods: {
    //your methods here
  }
}
</script>

`vue-router` なしで画面遷移

これまではvue-routerで画面遷移を作ってきたが、OnsenUIだとNavigationというのがあり、これで基本的な画面遷移ができる。vue-routerなしでもだいたいできる感じ。例えば page1 から page2 へはこんな感じ。ページ遷移のアニメーションもある程度モバイルっぽい動きがサポートされている

index.html


  // a method in 'const page1'
  methods: {
    goToPage2() {
      this.$emit('push-page', page2);
    }
  }

ページ間での情報の受け渡し

OnsenUIの Navigation だと例えば以下のように page1 から page2 へ data() を渡すことができる。

index.html

  methods: {
   dataFromPage1ToPage2() {
      this.$emit('push-page', {
        extends: page2,
        data() {
          return {
            passing_value: 10
          };
        }
    }

今のところ使った機能、目立った違いはこのくらいだ。またアプリ開発を進める上で何か見つかったら書き足すかも。

今後

今回のようなアプリのフロントとしては OnsenUI は十分な感じがする。ひとまず UI はこの路線で、もう少し OnsenUI を使い込んでみることにする。あと、OnsenUI 使うなら Monaca で開発した方がいいのだろう。Monaca も試してみる。

Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす

はじめに

スクリーンショット

OnsenUIやってみて

メジャーなUIフレームワークのAPIが揃っている

Pageという考え方

Vueをマップ

`vue-router` なしで画面遷移

ページ間での情報の受け渡し

今後

シリーズ

Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす

はじめに

スクリーンショット

OnsenUIやってみて

メジャーなUIフレームワークのAPIが揃っている

Pageという考え方

Vueをマップ

vue-router なしで画面遷移

ページ間での情報の受け渡し

今後

シリーズ

`vue-router` なしで画面遷移