Question

我已经尝试过这个tutorial来通过Cordova和Framework7开发一个Android应用程序。它适用于浏览器以及Android模拟器（ADK）。我使用Cordova build command将项目转换为apk，并将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
  }
});

Answer 1

我最近遇到了类似的问题。在测试我的计算机浏览器和模拟器时，路由工作正常。但是当我构建apk时，它只是没有用。事实证明我的代码中的视图名称存在区分大小写问题。我的计算机和模拟器忽略它并进行了路由，但我的手机没有。

您是否已经交叉检查了您的观点名称的拼写，以确保它不是区分大小写的问题？

Answer 2

我没有发现问题源于何处。但是，我找到了一个npm模板并根据此模板重新组织了我的代码并且它可以工作

模板是：

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

我用这个命令安装了它：

cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack

将项目转换为apk后，Framework7路由器无法正常工作

2 个答案: