Framework7 and cordova run android problem

Phalcon_Vee · November 1, 2019, 10:25am

Hi,

Please m new to the framework7 for the android community.

I use the frmaewor7 CLI + vuejs to build out a mobile app, which works perfectly when I simulate in the browser.

But when I run the framework7 cordova run android command it only loads up the splash screen and I don’t see the other part of the app. Please what can I do @nolimits4web

app.js file
// Import Vue
import Vue from ‘vue’;

// Import Framework7
import Framework7 from ‘framework7/framework7-lite.esm.bundle.js’;

// Import Framework7-Vue Plugin
import Framework7Vue from ‘framework7-vue/framework7-vue.esm.bundle.js’;

// Import Framework7 Styles
import ‘framework7/css/framework7.bundle.css’;

import FontAwesome from ‘@fortawesome/fontawesome-free/css/all.min.css’;

// Import Icons and App Custom Styles
import ‘…/css/icons.css’;
import ‘…/css/app.css’;
import ‘…/css/output.css’;

// Import App Component
import App from ‘…/components/app.vue’;

import VueIziToast from ‘vue-izitoast’;

import ‘izitoast/dist/css/iziToast.css’;

Vue.use(VueIziToast);

// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);

setTimeout(() => {
document.getElementById(‘page-loader’).style.display = ‘none’;
}, 2000);

// Init App
new Vue({
el: ‘#app’,
render: (h) => h(App),

// Register App Component
components: {
app: App
},
});

app.vue

Ifeoma Oriaku

Unizik, Nigeria

Software Engineer

    <f7-block-title class="caps"><span class=" color-white">Social</span></f7-block-title>
    <f7-list class="nav-list">

      <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
      <f7-list-item link="/inbox/" title="Messages" view="#main-view" panel-close></f7-list-item>
      <!--<f7-list-item link="/referrals/" title="Referrals" view="#main-view" panel-close></f7-list-item>-->
      <f7-list-item link="/my-bookings/" title="My Bookings" view="#main-view" panel-close></f7-list-item>
      <f7-list-item link="/events/" title="Events" view="#main-view" panel-close></f7-list-item>
      <f7-list-item link="/notifications/" title="Notifications" view="#main-view" panel-close></f7-list-item>
    </f7-list>

    <f7-block-title class="caps"><span class=" color-white">Discover</span></f7-block-title>
    <f7-list class="nav-list">
      <f7-list-item link="/find-roommates/" title="Find Roommates" view="#main-view" panel-close></f7-list-item>
    </f7-list>

    <f7-block-title class="caps"><span class=" color-white">Services</span></f7-block-title>
    <f7-list class="nav-list">
      <f7-list-item link="/transcripts/" title="Send Transcripts" view="#main-view" panel-close></f7-list-item>
    </f7-list>

    <f7-list class="nav-list">
      <f7-list-item link="/settings/" title="Settings" view="#main-view" panel-close></f7-list-item>
      <f7-list-item link="/login/" title="Logout" class="text-color-red" panel-close></f7-list-item>
    </f7-list>

  </f7-page>
</f7-view>

Right panel content goes here

<f7-view
url="/"
id=“main-view”
main

Any help will be appreciated.

Cheers!!!

Phalcon_Vee · November 1, 2019, 11:32am

This is my package.json file

{
“name”: “livekampus”,
“private”: true,
“version”: “1.0.0”,
“description”: “Livekampus”,
“repository”: “”,
“license”: “UNLICENSED”,
“framework7”: {
“cwd”: “/Applications/MAMP/htdocs/LvK/lvk-mobile”,
“type”: [
“cordova”
],
“name”: “Livekampus”,
“framework”: “vue”,
“template”: “tabs”,
“bundler”: “webpack”,
“cssPreProcessor”: false,
“theming”: {
“customColor”: true,
“color”: “#df3826”,
“darkTheme”: false,
“iconFonts”: true,
“fillBars”: false
},
“customBuild”: false,
“webpack”: {
“developmentSourceMap”: true,
“productionSourceMap”: true,
“hashAssets”: false,
“preserveAssetsPaths”: false,
“inlineAssets”: true
},
“pkg”: “io.framework7.mylivekampus1”,
“cordova”: {
“folder”: “cordova”,
“platforms”: [
“ios”,
“android”
],
“plugins”: [
“cordova-plugin-statusbar”,
“cordova-plugin-keyboard”,
“cordova-plugin-splashscreen”,
“cordova-plugin-wkwebview-engine”
]
}
},
“scripts”: {
“start”: “npm run dev”,
“dev”: “cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js”,
“build-dev”: “cross-env NODE_ENV=development node ./build/build.js”,
“build-prod”: “cross-env NODE_ENV=production node ./build/build.js”,
“build-dev-cordova”: “cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build”,
“build-prod-cordova”: “cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build”,
“build-dev-cordova-ios”: “cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build ios”,
“build-prod-cordova-ios”: “cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build ios”,
“build-dev-cordova-android”: “cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build android”,
“build-prod-cordova-android”: “cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android”,
“postinstall”: “cpy ‘./node_modules/framework7-icons/fonts/.’ ‘./src/fonts/’”
},
“browserslist”: [
“Android >= 7”,
“IOS >= 11”,
“Safari >= 11”,
“Chrome >= 49”,
“Firefox >= 31”,
“Samsung >= 5”
],
“dependencies”: {
“@fortawesome/fontawesome-free”: “^5.11.2”,
“dom7”: “^2.1.3”,
“framework7”: “^5.1.0”,
“framework7-icons”: “^3.0.0”,
“framework7-vue”: “^5.1.0”,
“template7”: “^1.4.2”,
“vue”: “^2.6.10”,
“vue-avatar”: “^2.1.8”,
“vue-izitoast”: “^1.2.1”,
“vue-notification”: “^1.3.20”,
“vue-snotify”: “^3.2.1”,
“vue-swal”: “^1.0.0”
},
“devDependencies”: {
“@babel/core”: “^7.6.4”,
“@babel/plugin-syntax-dynamic-import”: “^7.2.0”,
“@babel/plugin-syntax-jsx”: “^7.2.0”,
“@babel/plugin-transform-runtime”: “^7.6.2”,
“@babel/preset-env”: “^7.6.3”,
“@babel/runtime”: “^7.6.3”,
“babel-helper-vue-jsx-merge-props”: “^2.0.3”,
“babel-loader”: “^8.0.6”,
“babel-plugin-transform-vue-jsx”: “^4.0.1”,
“chalk”: “^2.4.2”,
“copy-webpack-plugin”: “^5.0.4”,
“cpy-cli”: “^2.0.0”,
“cross-env”: “^6.0.3”,
“css-loader”: “^3.2.0”,
“file-loader”: “^4.2.0”,
“html-webpack-plugin”: “^3.2.0”,
“mini-css-extract-plugin”: “^0.8.0”,
“optimize-css-assets-webpack-plugin”: “^5.0.3”,
“ora”: “^4.0.2”,
“postcss-loader”: “^3.0.0”,
“postcss-preset-env”: “^6.7.0”,
“rimraf”: “^3.0.0”,
“style-loader”: “^1.0.0”,
“terser-webpack-plugin”: “^2.2.1”,
“url-loader”: “^2.2.0”,
“vue-loader”: “^15.7.1”,
“vue-style-loader”: “^4.1.2”,
“vue-template-compiler”: “^2.6.10”,
“webpack”: “^4.41.2”,
“webpack-cli”: “^3.3.9”,
“webpack-dev-server”: “^3.9.0”
}
}

luigi37 · November 1, 2019, 1:36pm

Same here: I can run properly the app in the browser but in the Android emulator it gets stuck at splashscreen.
Nothing special… I just installed the app with framework7-cli 3.0.5 and I’ve choosen a template (and no webpack)

pvtallulah · November 1, 2019, 2:44pm

any error in the console?
make sure you have

<preference name="AutoHideSplashScreen" value="true" />

in config.xml

how you are initializing f7? can you share the code?

Phalcon_Vee · November 1, 2019, 2:48pm

Hi.

in my app.vue I initialized f7

<script>
  import cordovaApp from '../js/cordova-app.js';
  import routes from '../js/routes.js';
  import Avatar from 'vue-avatar'

  export default {
    components: {
      Avatar
    },
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          id: 'io.framework7.mylivekampus1', // App bundle ID
          name: 'Livekampus', // App name
          theme: 'auto', // Automatic theme detection
          // App root data
          data: function () {
            return {
              user: {
                firstName: 'John',
                lastName: 'Doe',
              },
              // 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);
          navigator.splashscreen.hide();
        }
        // Call F7 APIs here
      });
    }
  }
</script>

pvtallulah · November 1, 2019, 2:51pm

also share your index.html

Phalcon_Vee · November 1, 2019, 2:53pm

Hi, it’s a framework7-vuejs app generated using the framework7 cli + vuejs command. The index.html is automatically generated.

This is my app.js

    // Import Vue
import Vue from 'vue';

// Import Framework7
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';

// Import Framework7-Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';

// Import Framework7 Styles
import 'framework7/css/framework7.bundle.css';

import FontAwesome from '@fortawesome/fontawesome-free/css/all.min.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
import '../css/output.css';

// Import App Component
import App from '../components/app.vue';

import VueIziToast from 'vue-izitoast';

import 'izitoast/dist/css/iziToast.css';

Vue.use(VueIziToast);

// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);

setTimeout(() => {
  document.getElementById('page-loader').style.display = 'none';
}, 2000);

// Init App
new Vue({
  el: '#app',
  render: (h) => h(App),

  // Register App Component
  components: {
    app: App
  },
});

pvtallulah · November 1, 2019, 2:55pm

did you include cordova.js?

Phalcon_Vee · November 1, 2019, 3:06pm

Yes it is injected automatically when I build the app

pvtallulah · November 1, 2019, 3:09pm

just for testing
add this line on app.js

document.addEventListener('deviceready', function () {
  alert('deviceready')
}, false)

compile and run the app, you should see the alert

Phalcon_Vee · November 1, 2019, 3:12pm

ok…if I see the alert what next?

pvtallulah · November 1, 2019, 3:15pm

since you dont share the files i ask, and dont tell if you see any errors in the console, im trying to guess blindly what could the the problem.
so my other guess, if you see the alert, would be in this code

mounted() {
      this.$f7ready((f7) => {
        // Init cordova APIs (see cordova-app.js)
        if (f7.device.cordova) {
          cordovaApp.init(f7);
          navigator.splashscreen.hide();
        }
        // Call F7 APIs here
      });
    }

also, can you share config.xml

Phalcon_Vee · November 1, 2019, 3:42pm

Hi, thanks for your feedback.

I added your suggestions and it still shows a blank screen. the alert did not show.

I added it here

mounted() {
      this.$f7ready((f7) => {
        // Init cordova APIs (see cordova-app.js)
        if (f7.device.cordova) {
          cordovaApp.init(f7);
          //navigator.splashscreen.hide();
          alert('device ready')
        }
        // Call F7 APIs here
      });

Phalcon_Vee · November 1, 2019, 3:43pm

This is my config.xml file

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.framework7.mylivekampus1" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Livekampus</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>

    <allow-navigation href="*" />

    <preference name="AutoHideSplashScreen" value="true" />

    <preference name="SplashScreenDelay" value="10000"/>

    <gap:plugin name="org.apache.cordova.splashscreen" />

    <platform name="android">
      <preference name="StatusBarOverlaysWebView" value="false" />
      <preference name="android-minSdkVersion" value="21" />
      <preference name="SplashMaintainAspectRatio" value="true" />
      <splash density="land-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
      <splash density="land-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
      <splash density="land-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
      <splash density="land-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
      <splash density="land-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
      <splash density="port-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
      <splash density="port-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
      <splash density="port-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
      <splash density="port-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
      <splash density="port-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
      <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
      <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
      <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
      <icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
      <icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
      <icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />
    </platform>


    <platform name="ios">
      <config-file parent="CFBundleAllowMixedLocalizations" platform="ios" target="*-Info.plist">
        <true />
      </config-file>
      <preference name="StatusBarOverlaysWebView" value="true" />
      <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
      <icon height="180" src="res/icon/ios/[email protected]" width="180" />
      <icon height="60" src="res/icon/ios/[email protected]" width="60" />
      <icon height="120" src="res/icon/ios/[email protected]" width="120" />
      <icon height="76" src="res/icon/ios/[email protected]" width="76" />
      <icon height="152" src="res/icon/ios/[email protected]" width="152" />
      <icon height="228" src="res/icon/ios/[email protected]" width="228" />
      <icon height="40" src="res/icon/ios/[email protected]" width="40" />
      <icon height="80" src="res/icon/ios/[email protected]" width="80" />
      <icon height="87" src="res/icon/ios/[email protected]" width="87" />
      <icon height="57" src="res/icon/ios/[email protected]" width="57" />
      <icon height="114" src="res/icon/ios/[email protected]" width="114" />
      <icon height="72" src="res/icon/ios/[email protected]" width="72" />
      <icon height="144" src="res/icon/ios/[email protected]" width="144" />
      <icon height="167" src="res/icon/ios/[email protected]" width="167" />
      <icon height="29" src="res/icon/ios/[email protected]" width="29" />
      <icon height="58" src="res/icon/ios/[email protected]" width="58" />
      <icon height="50" src="res/icon/ios/[email protected]" width="50" />
      <icon height="100" src="res/icon/ios/[email protected]" width="100" />
      <icon height="167" src="res/icon/ios/[email protected]" width="167" />
      <icon height="1024" src="res/icon/ios/[email protected]" width="1024" />
    </platform>


    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="local" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="SplashScreenDelay" value="0" />
    <preference name="Suppresses3DTouchGesture" value="true" />
    <preference name="Allow3DTouchLinkPreview" value="false" />
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="AllowInlineMediaPlayback" value="true" />
</widget>

Phalcon_Vee · November 1, 2019, 3:43pm

I’ll appreciate any effort to solve this issue please.

pvtallulah · November 1, 2019, 3:46pm

please add

document.addEventListener(‘deviceready’, function () { alert(‘deviceready’) }, false)

as the first line of app.js. lets reduce the scope of the error.
and give feedback if you see or not the alert.

Phalcon_Vee · November 1, 2019, 4:00pm

I didn’t get the alert.

This is how the screen displays, blank.
I added the line of code to my app.js file

Phalcon_Vee · November 1, 2019, 4:01pm

Can I share my repo with you.

So u can run a test on ur end?

pvtallulah · November 1, 2019, 4:01pm

ok, so then, share your index.html

pvtallulah · November 1, 2019, 4:02pm

yes - Post must be at least 20 character