当我在模拟器中 运行 时，Framework7 vue 组件没有显示。仅显示默认的 Cordova 页面
Framework7 vue components not showing up when I run in an emulator. Only the default Cordova page showing
我正在使用带有 vue.js 和 Cordova 的 framework7 来构建移动应用程序，但是每当我尝试 运行 模拟器中的应用程序时，我得到的只是带有图标的默认 Cordova 页面，我的 framework7 组件中的 none 出现了。我不知道为什么要这样做。模拟器是 运行ning android 9。这些是一些文件。
index.html（我没有做任何修改）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="theme-color" content="#007aff">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>Easy Dine</title>
<!-- built styles file will be auto injected -->
</head>
<body>
<div id="app"></div>
<% if (process.env.TARGET === 'cordova') { %>
<script src="cordova.js"></script>
<% } %>
<!-- built script files will be auto injected -->
</body>
</html>
app.vue（我没有做任何修改）
<template>
<f7-app :params="f7params" >
<!-- Left panel with cover effect-->
<f7-panel left cover theme-dark>
<f7-view>
<f7-page>
<f7-navbar title="Left Panel"></f7-navbar>
<f7-block>
<f7-button fill raised login-screen-open="#my-login-screen">Login Screen</f7-button>
</f7-block>
</f7-page>
</f7-view>
</f7-panel>
<!-- Right panel with reveal effect-->
<f7-panel right reveal theme-dark>
<f7-view>
<f7-page>
<f7-navbar title="Right Panel"></f7-navbar>
<f7-block>Right panel content goes here</f7-block>
</f7-page>
</f7-view>
</f7-panel>
<!-- Views/Tabs container -->
<f7-views tabs class="safe-areas">
<!-- Tabbar for switching views-tabs -->
<f7-toolbar tabbar labels bottom>
<f7-link tab-link="#view-home" tab-link-active icon-ios="f7:house_fill" icon-aurora="f7:house_fill" icon-md="material:home" text="Home"></f7-link>
<f7-link tab-link="#view-catalog" icon-ios="f7:square_list_fill" icon-aurora="f7:square_list_fill" icon-md="material:view_list" text="Catalog"></f7-link>
<f7-link tab-link="#view-settings" icon-ios="f7:gear" icon-aurora="f7:gear" icon-md="material:settings" text="Settings"></f7-link>
</f7-toolbar>
<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
<f7-view id="view-home" main tab tab-active url="/"></f7-view>
<!-- Catalog View -->
<f7-view id="view-catalog" name="catalog" tab url="/catalog/"></f7-view>
<!-- Settings View -->
<f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
</f7-views>
<!-- Popup -->
<f7-popup id="my-popup">
<f7-view>
<f7-page>
<f7-navbar title="Popup">
<f7-nav-right>
<f7-link popup-close>Close</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>
<p>Popup content goes here.</p>
</f7-block>
</f7-page>
</f7-view>
</f7-popup>
<f7-login-screen id="my-login-screen">
<f7-view>
<f7-page login-screen>
<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-input
type="text"
name="username"
placeholder="Your username"
:value="username"
@input="username = $event.target.value"
></f7-list-input>
<f7-list-input
type="password"
name="password"
placeholder="Your password"
:value="password"
@input="password = $event.target.value"
></f7-list-input>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" login-screen-close @click="alertLoginData"></f7-list-button>
<f7-block-footer>
Some text about login information.<br>Click "Sign In" to close Login Screen
</f7-block-footer>
</f7-list>
</f7-page>
</f7-view>
</f7-login-screen>
</f7-app>
</template>
<script>
import cordovaApp from '../js/cordova-app.js';
import routes from '../js/routes.js';
export default {
data() {
return {
// Framework7 Parameters
f7params: {
id: 'io.framework7.myapp', // App bundle ID
name: 'Easy Dine', // App name
theme: 'auto', // Automatic theme detection
// App root data
data: function () {
return {
// Demo products for Catalog section
products: [
{
id: '1',
title: 'Apple iPhone 8',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
},
{
id: '2',
title: 'Apple iPhone 8 Plus',
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
},
{
id: '3',
title: 'Apple iPhone X',
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
},
]
};
},
// App routes
routes: routes,
// Input settings
input: {
scrollIntoViewOnFocus: this.$device.cordova && !this.$device.electron,
scrollIntoViewCentered: this.$device.cordova && !this.$device.electron,
},
// Cordova Statusbar settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
},
// Login screen data
username: '',
password: '',
}
},
methods: {
alertLoginData() {
this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password);
}
},
mounted() {
this.$f7ready((f7) => {
// Init cordova APIs (see cordova-app.js)
if (f7.device.cordova) {
cordovaApp.init(f7);
}
// Call F7 APIs here
});
}
}
</script>
catalog.vue（我更改的唯一文件）
<template>
<f7-page name="catalog">
<f7-navbar title="Catalog"></f7-navbar>
<f7-block strong inset>
<f7-button @click="scanCode" fill raised >Scan New Code</f7-button>
</f7-block>
</f7-page>
</template>
<script>
//var QRScanner = require('QRScanner');
export default {
data() {
return {
};
},
methods: {
scanCode(){
cordova.plugins.qrscanner.prepare(onDone);
cordova.plugins.qrscanner.scan(displayContents);
cordova.plugins.qrscanner.show();
},
onDone(err, status){
if(err) {
alert("Error Occured");
}
if(status.authorized){
alert("you may use the camera");
}
else if(status.denied){
alert("you dont have acces to the camera");
}
else{
alert("something");
}
},
displayContents(err, text){
if(err){
alert("error displaying contents")
}else {
alert(text);
}
}
}
}
</script>
这是我在模拟器上得到的图像
这是应该显示的图像
在我 运行 命令
之后它起作用了
npm run build-prod-cordova-android
我正在使用带有 vue.js 和 Cordova 的 framework7 来构建移动应用程序，但是每当我尝试 运行 模拟器中的应用程序时，我得到的只是带有图标的默认 Cordova 页面，我的 framework7 组件中的 none 出现了。我不知道为什么要这样做。模拟器是 运行ning android 9。这些是一些文件。
index.html（我没有做任何修改）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="theme-color" content="#007aff">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>Easy Dine</title>
<!-- built styles file will be auto injected -->
</head>
<body>
<div id="app"></div>
<% if (process.env.TARGET === 'cordova') { %>
<script src="cordova.js"></script>
<% } %>
<!-- built script files will be auto injected -->
</body>
</html>
app.vue（我没有做任何修改）
<template>
<f7-app :params="f7params" >
<!-- Left panel with cover effect-->
<f7-panel left cover theme-dark>
<f7-view>
<f7-page>
<f7-navbar title="Left Panel"></f7-navbar>
<f7-block>
<f7-button fill raised login-screen-open="#my-login-screen">Login Screen</f7-button>
</f7-block>
</f7-page>
</f7-view>
</f7-panel>
<!-- Right panel with reveal effect-->
<f7-panel right reveal theme-dark>
<f7-view>
<f7-page>
<f7-navbar title="Right Panel"></f7-navbar>
<f7-block>Right panel content goes here</f7-block>
</f7-page>
</f7-view>
</f7-panel>
<!-- Views/Tabs container -->
<f7-views tabs class="safe-areas">
<!-- Tabbar for switching views-tabs -->
<f7-toolbar tabbar labels bottom>
<f7-link tab-link="#view-home" tab-link-active icon-ios="f7:house_fill" icon-aurora="f7:house_fill" icon-md="material:home" text="Home"></f7-link>
<f7-link tab-link="#view-catalog" icon-ios="f7:square_list_fill" icon-aurora="f7:square_list_fill" icon-md="material:view_list" text="Catalog"></f7-link>
<f7-link tab-link="#view-settings" icon-ios="f7:gear" icon-aurora="f7:gear" icon-md="material:settings" text="Settings"></f7-link>
</f7-toolbar>
<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
<f7-view id="view-home" main tab tab-active url="/"></f7-view>
<!-- Catalog View -->
<f7-view id="view-catalog" name="catalog" tab url="/catalog/"></f7-view>
<!-- Settings View -->
<f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
</f7-views>
<!-- Popup -->
<f7-popup id="my-popup">
<f7-view>
<f7-page>
<f7-navbar title="Popup">
<f7-nav-right>
<f7-link popup-close>Close</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>
<p>Popup content goes here.</p>
</f7-block>
</f7-page>
</f7-view>
</f7-popup>
<f7-login-screen id="my-login-screen">
<f7-view>
<f7-page login-screen>
<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-input
type="text"
name="username"
placeholder="Your username"
:value="username"
@input="username = $event.target.value"
></f7-list-input>
<f7-list-input
type="password"
name="password"
placeholder="Your password"
:value="password"
@input="password = $event.target.value"
></f7-list-input>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" login-screen-close @click="alertLoginData"></f7-list-button>
<f7-block-footer>
Some text about login information.<br>Click "Sign In" to close Login Screen
</f7-block-footer>
</f7-list>
</f7-page>
</f7-view>
</f7-login-screen>
</f7-app>
</template>
<script>
import cordovaApp from '../js/cordova-app.js';
import routes from '../js/routes.js';
export default {
data() {
return {
// Framework7 Parameters
f7params: {
id: 'io.framework7.myapp', // App bundle ID
name: 'Easy Dine', // App name
theme: 'auto', // Automatic theme detection
// App root data
data: function () {
return {
// Demo products for Catalog section
products: [
{
id: '1',
title: 'Apple iPhone 8',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
},
{
id: '2',
title: 'Apple iPhone 8 Plus',
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
},
{
id: '3',
title: 'Apple iPhone X',
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
},
]
};
},
// App routes
routes: routes,
// Input settings
input: {
scrollIntoViewOnFocus: this.$device.cordova && !this.$device.electron,
scrollIntoViewCentered: this.$device.cordova && !this.$device.electron,
},
// Cordova Statusbar settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
},
// Login screen data
username: '',
password: '',
}
},
methods: {
alertLoginData() {
this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password);
}
},
mounted() {
this.$f7ready((f7) => {
// Init cordova APIs (see cordova-app.js)
if (f7.device.cordova) {
cordovaApp.init(f7);
}
// Call F7 APIs here
});
}
}
</script>
catalog.vue（我更改的唯一文件）
<template>
<f7-page name="catalog">
<f7-navbar title="Catalog"></f7-navbar>
<f7-block strong inset>
<f7-button @click="scanCode" fill raised >Scan New Code</f7-button>
</f7-block>
</f7-page>
</template>
<script>
//var QRScanner = require('QRScanner');
export default {
data() {
return {
};
},
methods: {
scanCode(){
cordova.plugins.qrscanner.prepare(onDone);
cordova.plugins.qrscanner.scan(displayContents);
cordova.plugins.qrscanner.show();
},
onDone(err, status){
if(err) {
alert("Error Occured");
}
if(status.authorized){
alert("you may use the camera");
}
else if(status.denied){
alert("you dont have acces to the camera");
}
else{
alert("something");
}
},
displayContents(err, text){
if(err){
alert("error displaying contents")
}else {
alert(text);
}
}
}
}
</script>
这是我在模拟器上得到的图像
这是应该显示的图像
在我 运行 命令
之后它起作用了npm run build-prod-cordova-android