我已经试用了这个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
}
});
2条答案
按热度按时间i5desfxk1#
我最近也遇到了类似的问题。在测试我的电脑浏览器和模拟器时,路由运行得很好。但当我构建apk时,它就不工作了。结果是我的代码中的视图名称存在大小写敏感问题。我的电脑和模拟器忽略了它,并进行了路由,但我的手机没有。
您是否交叉检查了视图名称的拼写,以确保不存在区分大小写的问题?
qq24tv8q2#
我没有找到问题的根源。但是,我找到了一个npm模板,并根据这个模板重新组织了我的代码,它工作了
模板为:
https://framework7.io/vue/templates.html
我使用以下命令安装了它: