Маршрутизатор Framework7 не работает после преобразования проекта в apk

Я попробовал это учебник по разработке приложения для Android с помощью Cordova и Framework7. Он работает в браузере, а также в эмуляторе Android (ADK). Я преобразовал проект в apk с помощью команды сборки Cordova и передал файл apk на мое устройство.

Приложение работает, однако список приложений на основе Framework7 (действительно на Vue) ничего не показывает. Похоже, Vue не инициализирован.

Вот HTML-код:

<template  id="page-alt-sayfa">
<f7-page>
  <f7-navbar title="Alt Sayfa" back-link="Geri" sliding></f7-navbar>
  <f7-block-title>
  <!-- sayfa id'sini data obj içinde ara-->
  {{this.$root.$data['icerik'][$route.params['sayfaId']].baslik}}</p>
  </f7-block-title>
  <f7-block-title>Dondurucuya Konur mu?</f7-block-title>
  <f7-block inner>
    <img style="width:95%;overflow:hidden" :src="'./img/sembolik/'+$route.params['sayfaId']+'.png'"/>
    <br>
    <div v-if="this.$root.$data['icerik'][$route.params['sayfaId']].dondurucu">
      <div class="chip">
          <div class="chip-media bg-green"><i class="material-icons">dns</i></div>
          <div class="chip-label">Dondurucuya Konulur</div>
        </div>
    </div>

Вот инициализация Framework7 и Vue:

...          
<script src="cordova.js"></script>
          <script src="js/framework7.min.js"></script>
          <script src="js/vue.min.js"></script>
          <script src="js/framework7-vue.min.js"></script>
          <script type="text/javascript" src="js/data.json"></script>
          <script src="js/app.js"></script>
        </body>

    </html>

Вот скрин с моего телефона.

Экран

Как можно решить проблему?

Изменить: вот мой код маршрутизатора:

// Init F7 Vue Plugin
Vue.use(Framework7Vue)
// Init Page Components
Vue.component('page-about', {
  template: '#page-about'
})
Vue.component('page-form', {
  template: '#page-form'
})
Vue.component('page-dynamic-routing', {
  template: '#page-dynamic-routing'
})
Vue.component('page-alt-sayfa', {
  template: '#page-alt-sayfa'
})
// Handle device ready event
// Note: You may want to check out the vue-cordova package on npm for cordova specific handling with vue - https://www.npmjs.com/package/vue-cordova
document.addEventListener('deviceready', () => {
  console.log("DEVICE IS READY!");
}, false)


// Init App
new Vue({
  el: '#app',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    /* Uncomment to enable Material theme: */
    // material: true,
    routes: [
      {
        path: '/about/',
        component: 'page-about'
      },
      {
        path: '/alt-sayfa/:sayfaId/',
        component: 'page-alt-sayfa'
      }
    ]
  },
  data: {
    mesaj: 'Merhaba',
    icerik: icerik
  }
});

person Suat Atan PhD    schedule 04.12.2017    source источник


Ответы (2)


Я недавно столкнулся с похожей проблемой. Маршрутизация работала хорошо, когда я тестировал браузер и эмулятор моего компьютера. Но когда я собрал apk, он просто не работал. Оказалось, что у меня была проблема с чувствительностью к регистру в именах представлений в моем коде. Мой компьютер и эмулятор проигнорировали это и выполнили маршрутизацию, а мой телефон — нет.

Вы перепроверили написание имен ваших представлений, чтобы убедиться, что это не проблема с учетом регистра?

person Stone10    schedule 05.12.2017
comment
Я добавил свой код маршрутизатора. Похоже, с чувствительностью к регистру проблем нет, не так ли? - person Suat Atan PhD; 05.12.2017

Я не нахожу, откуда эта проблема. Однако я нашел шаблон npm и реорганизовал свой код в соответствии с этим шаблоном, и это сработало.

Шаблон:

https://framework7.io/vue/templates.html

Я установил его с помощью этой команды:

cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack
person Suat Atan PhD    schedule 05.12.2017