Onsen UI doesn't work on Phonegap Android
-
Hi
Any code which use <template> does not work on Phonegap Android Application.
The same code works on Phonegap iOS Application.
Does anyone have any solution to solve it?
-
This is my config.xml :
<preference name="permissions" value="none"/> <preference name='phonegap-version' value='cli-7.0.1' /> <preference name='pgb-builder-version' value='1' /> <preference name="orientation" value="portrait" /> <preference name="target-device" value="universal" /> <preference name="fullscreen" value="true" /> <preference name="prerendered-icon" value="true" /> <preference name="ios-statusbarstyle" value="black-opaque" /> <preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-minSdkVersion" value="14" /> <preference name="android-installLocation" value="auto" /> <preference name="SplashScreenDelay" value="4000"/> <preference name="AllowInlineMediaPlayback" value="true" /> <preference name="FadeSplashScreen" value="false" /> <preference name="ShowSplashScreenSpinner" value="false"/> <preference name="DisallowOverscroll" value="true"/> <access origin="*"/> <allow-navigation href="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" />
and This is my HTML code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OnsenUI Tutorial</title> <!-- Required libs --> <script src=""></script> <script src="https://unpkg.com/onsenui/js/onsenui.js"></script> <!-- Autostyling --> <script> ons.platform.select('ios'); </script> <!-- App --> <script type="text/javascript"> document.addEventListener('init', function(event) { var page = event.target; if (page.id === 'page1') { page.querySelector('#push-button').onclick = function() { document.querySelector('#myNavigator').pushPage('page2.html', { data: { title: 'Page 2' } }); }; } else if (page.id === 'page2') { page.querySelector('ons-toolbar .center').innerHTML = page.data.title; } }); </script> <!-- Stylesheet --> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,500,400italic,500italic,700,700italic' rel='stylesheet' type='text/css'> </head> <body> <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> <template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> </template> <template id="page2.html"> <ons-page id="page2"> <ons-toolbar> <div class="left"> <ons-back-button>Page 1</ons-back-button> </div> <div class="center"></div> </ons-toolbar> <p>This is the second page.</p> </ons-page> </template> </body> </html>
This code work in iOS and does not work in android!!!
-
@Reza-Shakiba Do you get any error in the console? Which Android version are you testing?