Я попробовал это учебник по разработке приложения для 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
}
});