[SOLVED] Cordova Plugins with Framework7 + Vue?

how about , only basic cordova + plugin barcode ? without vue or anything else ?

running well ?

@edoofx – yep, as others have alluded to cordova plugins working correctly.

The specific use case here is to successfully use cordova barcode scanner with Framework7 + Vue

It could certainly be an issue with this starter template, but as of now haven’t found any Framework7 starters that work with Cordova plugins like barcode scanner

Ok, checked, the issue is in your template you are using. You are referencing ./static/cordova.js but Cordova puts automatically cordova.js in the root of www folder, so you have to use this one instead of what you use:

<script src="cordova.js"></script>

Also, the template you are using uses very very outdated version of Framework7 (it is 1.4.x) while F7 is already on v2 a while ago

Got it— I put that script tag & modified the build script bc Cordova was undefined & didn’t appear to generate it, must have mis-understood.

I think it’d be immensely valuable to make a super simple f7 repo w/ vue w/ a button & on press it’ll invoke barcode scanner scan method.

Do you recommend/vouch for this starter?m from the main site?

Yes, this is official template

Cool-- I’ll post a starter repo on this thread once I get a basic barcode scanner example working & @ you if any issues

Thank you for all your help (and also work on this project & templates!)

@nolimits4web & anyone else working w/ outdated templates

Working barcode scanner + f7 + vue:

Lessons learned for anyone else who has Cordova plugin issues w/ Vue + Framework7 wrapped in Cordova:

  1. Make sure index.html includes cordova.js (should be part of build process or cordova hook

  2. Wait for ‘deviceready’ event

  3. Your plugin may require additional permissions/configuration in config.xml depending on which version of the mobile OS you’re targeting

2 Likes

After hours of trying to hunt down why my app was exiting the application when the Android back button was pressed, this was the answer that led me to the solution. For those in a similar situation:

I am using this template:

If building for Cordova/Phonegap, make sure to uncomment the cordova.js reference in [projectroot]/index.html.

<body>
  <div id="app"></div>

  <!-- Cordova -->
  <!--
  <script src="cordova.js"></script>
  -->
  <!-- built script files will be auto injected -->
</body>

becomes this:

<body>
  <div id="app"></div>

  <!-- Cordova -->
  <script src="cordova.js"></script>

  <!-- built script files will be auto injected -->
</body>

Now everything is working as it should!

Thanks @valg20172018 for these nice follows. I am actually experimenting an issue with cordova plugins too. I am using cordova-template-framework7-vue-webpack (
https://github.com/caiobiodere/cordova-template-framework7-vue-webpack/) and I am trying to add cordova-plugin-admob-free.

I try to figured out how to fix this, but I didn’t find a solution. This is my first project with cordova, vueJS and WebPack…

@nolimits4web
I’ll try to do the same again.
scan: function() {
cordova.plugins.barcodeScanner.scan(
function (result) {
this.$f7router.navigate(/path/) //don’t work
},
function (error) {
alert(“Scanning failed: " + error);
}
);
},
but <f7-link @click=”$f7router.navigate(’/path/’)"> //could work properly
and window.location.href=""//Success
Thank you for your answer.

you are using THIS, as referenc to the app. but THIS references to your scanner function, not your app. a solution would be, store the app instance before the functiona and then use it.
Eg:

let vm = this
cordova.plugins.barcodeScanner.scan(
...
vm.$f7router.navigate('/path/')
...
)

I need a QR Scanner too and for some reason the plugin used here:


is not working for me, I get a lot of errors when building the android dev build, saying some symbols can’t be found.

Will you provide a link to a github of your project so other people can help you with this?

It’s best if the github is a “minimal reproducible example” which means no extra information/data besides exactly what you’re trying to do and what the problem is with the plugin

Start a new topic on this with logs-- it might be a Cordova issue (or the plugin) rather than F7

I do not believe the issue is with F7, I believe it’s with Cordova or Android config.

I think if I create a new project it might work, but I have many plugins that I wouldn’t want to lose and reinstall, it’s a hassle.

The error I’m getting is

BUILD FAILED in 4s
35 actionable tasks: 33 executed, 2 up-to-date
/Users/panmoh/Documents/mobile-app/platforms/android/gradlew: Command failed with exit code 1 Error output:
Note: /Users/adria/Documents/mobile-app/platforms/android/CordovaLib/src/org/apache/cordova/engine/SystemCookieManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
D8: Program type already present: com.google.zxing.BarcodeFormat
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ‘:app:transformDexArchiveWithExternalLibsDexMergerForDebug’.

Got it-- sounds like an issue w/ Jar files/config not F7.

Two recommendations:

  1. Check out this thread (almost exactly your issue): https://stackoverflow.com/questions/50085615/program-type-already-present-com-google-zxing-checksumexception

  1. If you’re still having trouble maybe try asking around on an Android<>Cordova forums

how did you import cordova after installing?

@Gagan how to inject cordova, after creating f7 project by f7-cli
issue: 1. by runing any cordova command response is

current working directory is not cordova-based project

  1. should I run cordova create in favour to create a new cordova project
  2. or just go by adding plugins by cordova add corodva-plugin-plugin-name
  1. after create the cordova project with f7-cli you will have something like this structure;
    image
    so cd into cordova dir, and then add any plugin you want. DO NOT modify cordova/www since this is creted after you build the project, so any change you make in cordova/www will be lost after building the project.

  2. no since f7-cli create it for you

  3. see 1

1 Like

Use following command :

framework7 cordova plugin add your_plugin_name
1 Like

Create ‘www’ directory in the cordova directory of your application and run the command again. It should work.