cordova Framework7路由器不工作后,将项目转换为apk

yhived7q  于 2022-11-15  发布在  Framework7
关注(0)|答案(2)|浏览(213)

我已经试用了这个tutorial通过Cordova和Framework7开发一个Android应用程序。它在浏览器和Android Emulator(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>

这是我手机的截图。

(来源:ultraimg.com
如何解决问题?
下面是我的路由器代码:

// 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
  }
});
i5desfxk

i5desfxk1#

我最近也遇到了类似的问题。在测试我的电脑浏览器和模拟器时,路由运行得很好。但当我构建apk时,它就不工作了。结果是我的代码中的视图名称存在大小写敏感问题。我的电脑和模拟器忽略了它,并进行了路由,但我的手机没有。
您是否交叉检查了视图名称的拼写,以确保不存在区分大小写的问题?

qq24tv8q

qq24tv8q2#

我没有找到问题的根源。但是,我找到了一个npm模板,并根据这个模板重新组织了我的代码,它工作了
模板为:
https://framework7.io/vue/templates.html
我使用以下命令安装了它:

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

相关问题