I am creating a mobile application using vuejs and ionic capacitor. I am not able to use v-model to bind to ION components it looks like I am able to use regular HTML components such as input and button
<ion-input type="text" :value="email" #input="email = $event.target.value" placeholder="Username"></ion-input>
vs
<input type="text" v-model ="username" placeholder="Username"></ion-input>
Apart from having to craft the styling myself, is there any other downside I am missing. The app appears to run fine on native ios and Android devices.
If you read the Ionic read.me on their alpha release, the support for v-model is work-in-process. So, no v-model on Ionic components for the moment.
Related
I'm a tech teacher and I'm designing a coding course for high school students. I want to teach them Ionic without also having to teach them React, Angular, or Vue. They already know basic web development, so I want them to be able to create iOS, Android, and web apps using only vanilla Javascript + Ionic.
When I run "ionic init" to get started, I'm forced to select from Angluar, React, Vue, or Custom. So, of course, I select Custom.
Then I start building a "Hello World" app. When it comes time to view the simple app in Android Studio, I run "ionic capacitor add android" and then "npx cap open android." All good.
The problem arises when I start adding more to my simple app, and then try to view those changes in Android Studio. Normally, this would be done by running "ionic capacitor copy android". But that doesn't work in my custom app. I get this error message:
[ERROR] Cannot perform build.
Since you're using the custom project type, you must provide the ionic:build npm script so the Ionic CLI can build your project.
How do I solve this problem? How I provide a build script for my custom app?
Thank you for your help!
Since you are using vanilaJS you shouldn't need any build step at all. Just put your index.html to www folder, with some content. You can start off with something like
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ionic without any framework</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core#latest/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core#latest/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core#latest/css/ionic.bundle.css"/>
</head>
<body>
<!-- We create a vanilla Javascript function to call the alert -->
<script>
hello = async function () {
alert('Hello World!');
};
</script>
<!-- We declare an Ionic app using the <ion-app/> element -->
<ion-app>
<!-- Cool thing, the Ionic CSS utilities could be used too -->
<ion-content text-center>
<h1>Basic usage</h1>
<!-- We add an ion-button with an onclick event -->
<ion-button onclick="hello()">Click me</ion-button>
</ion-content>
</ion-app>
</body>
</html>
and then ionic capacitor copy android should work. (I assume following initialization steps ionic init, npm init, ionic capacitor add android)
I think what is needed after making any changes is to run npx cap sync and then npx cap open android.
Since it would appear you are trying to teach them the bar bones of development I would not even use Ionic. It is a framework for cross-platform development. And once you make a choice of using that framework, you may as well buy in to one of the Javascript/Typescript development frameworks to get the advantages those bring.
For doing POJO work targeted to iOS and Android, I would investigate using Cordova.
Consider it the difference between teaching a student the basics of audio recording on a four-track tape deck rather than a 128-track digital studio with all the bells and whistles.
Many of the basics are the same without the complications of all the advancements.
At my day job doing Enterprise-level financial applications we still use Cordova and have no plans to migrate any time soon.
In my admittedly biased opinion, Cordova would be a better starting point for a "Plain old Javascript object" based introduction to cross-platform development.
This will make the leap into Ionic and Capacitor easier.
Because, again just my opinion, if they haven't learned the advantages of a framework like Angular, going to Ionic/Capacitor is the cart before the horse.
I am currently building a web app with ionic
in the input field, I need to upload a photo either from the camera or select from the gallery. the code I am using is
<ion-item>
<input type="file" accept="image/*;capture=camera" name="imagefile"
(change)="changeListener($event)">
</ion-item>
however, on the PC, it shows the file browser, but on the mobile phone (android & ios), it just uses the camera. there is no option to select images from the image gallery.
I tried removing the capture=camera part, but still, it only calls out the camera on mobile devices. Is there any way to be able to select files from the device gallery?
Have you figured this out? If not, I've found a great example for you to follow.
ionic-pwa-camera-no-plugins
Hope this is helpful and please update your findings here.
Cheers.
Does phonegap or Ionic framework can be used for mobile website.
Actually I am planing to build mobile app. But confused to pick one of them (phonegap/Ionic).
So, please guide me which one is better. And please guide which one is best for both mobile app and mobile website.
Yes you can. In ionic2 you can do
ionic platform add browser
ionic build browser
Example of website using ionic http://m.stubapp.com/
At first Phonegap is now called Cordova.
Cordova builds an native App using HTML, Javascript and CSS.
With the ionic framework you can Create and Design "Apps" with HTML, Typescript and Sass. Ionic is perfect if you want your App our mobile website to look like an normal native App. Ionic uses Cordova to build the App. I used Ionic myself to build a website.
Ionic gives you the option to build for a browser (ionic build browser).
Then you get the computed HTML, Javascript and CSS.
Please excuse my English, i´m from Germany ;)
I am using Ionic v2(currectly is 2.0.0-beta.25).
After created a Ionic v2 project, and run the
ionic serve
command, Ionic will apply the iOS theme in the browser by default. Since Ionic announced it supported the windows platform, i am planning to use ionic v2 to create an application, so i wish i can preview as windows/wp theme in my browser. The document said that add ?ionicplatform=android to the URL can change how Ionic sees which platform i am on, it works and changed the theme as android. Then i tried ?ionicplatform=wp and also ?ionicplatform=windows . it doesn't work.
I also followed this document to add class="wp" , it still doesn't work. i also found Ionic Lab, this application even don't have a windows phone option.
The offical document have a live perview on the right side of the v2 components document page. so i think maybe there is some way to make the perview in browser to apply the windows/wp theme. I've google it but can't find any answer.
I also tryed edit my UserAgent as Lumia phone but it still doesn't works.
So, if i want the ionic serve browser perview apply windows/wp theme, what should i do?
Thanks
You can do this using chrome. When project are running make inspect and select ctrl+shift+m for change to device mode and choice your phone. If windows phone are not in that list, click edit in dropdown and there you have at least one Windows Phone. :)
What is best way to show Date Picker for iPhone based Web Application. Can we show something like iPhone native date picker like shown below in web application:
The easiest way (and arguably the best way) is to use safari's built in datepicker for your input box using HTML5 type="date"
<input type="date" />
There is an iPhone native style date picker that runs in the browser - http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/11
I know it's an old post, but for future viewers:
If you are using jQuery, you can try Mobiscroll, a customizable datepicker optimized for touch devices. It ships whith iOS and android skin as well.
You can't. The date picker is a native control and is not available in Mobile Safari.
Although the need to register might be a dislike, Mobiscroll looks worth evaluating if you want to provide a consistent fallback for older ios (pre 5.x) and android (pre 4.x) devices - and probably some other platforms, as it promises to support jQMobi (now Intel appframework) and Zepto.
There is an iPhone style date picker for HTML5 at Next-Point. Maybe you can change it to meet your needs.
Well, you could code your own if it was really important to you.
With enough work you could probably get it to look/feel a lot like Apple's native control.
Feels at a gut level like it would be a lot of work for limited payoff.
<input type="date" />
above code WILL NOT working on mozilla.
firefox doesn't support input type date.
In ASP.Net you can use the TextBox with type="date".
<asp:TextBox type="date" runat="server" />
In a Html5 compatible browser you will have a date field.
In a Html5 non-compatible browser you will have simple text field.