IntroductionArticle précédent : Développement d'applications mobiles en C# (1. Configuration de l'environnement)
Un week-end s'est écoulé, je prévoyais initialement de publier tous les deux jours, mais j'ai dû faire un voyage d'affaires... Pardon à tous.
Aujourd'hui, nous allons parler de la création d'une application WebApp avec WebView.
Explication de pourquoi utiliser la forme WebApp : tout d'abord, elle est facile à mettre à jour, ensuite le coût d'apprentissage est réduit.
Il n'est pas nécessaire de comprendre en profondeur les dispositions d'interface Android, nous pouvons simplement couvrir l'écran avec un WebView. (Bien sûr, dans les applications réelles, il faut ajouter quelques contrôles natifs pour améliorer l'expérience utilisateur).
Définissons les objectifs d'apprentissage de cette partie :
- Apprendre les fonctionnalités de base de WebView
2. Appeler du code JavaScript à partir de WebView
3. Permettre au code JavaScript de l'application d'appeler du code C# à l'arrière-plan
Image d'illustration :
Contenu principal1. Construire une architecture de base avec WebView
Nous ouvrons d'abord l'interface créée dans l'article précédent qui contient uniquement un bouton.
Dans la barre d'outils de gauche, trouvez WebView et glissez-le dans votre interface, puis agrandissez-le pour couvrir toute la page. La position est illustrée sur la figure :
Ensuite, écrivez le fichier MainActivity.cs, obtenez votre webView dans la méthode OnCreate() et configurez les paramètres de base.
Code suivant :
// Obtenir l'objet WebView
var webView = FindViewById<WebView>(Resource.Id.webView1);
// Déclarer la configuration WebView
WebSettings settings = webView.Settings;
// Activer l'exécution de JS
settings.JavaScriptEnabled = true;
// Permettre à JS d'ouvrir automatiquement des fenêtres
settings.JavaScriptCanOpenWindowsAutomatically = true;
// Classe client WebView personnalisée
var webc = new CustomWebViewClient();
// Définir le client WebView personnalisé
webView.SetWebViewClient(webc);
Les commentaires expliquent déjà tout.
Passons maintenant à la classe MyCommWebClient mentionnée précédemment.
Il s'agit d'une classe client personnalisée utilisée pour intercepter les liens de navigation (sinon, le navigateur natif Android charge l'URL), et charger l'URL dans ce contrôle. Code suivant :
class CustomWebViewClient: WebViewClient
{
// Redéfinir la méthode de chargement de page
public override bool ShouldOverrideUrlLoading(WebView view, String url)
{
// Charger l'URL dans ce contrôle
view.LoadUrl(url);
// Retourner true
return true;
}
}
Ainsi, lorsqu'il y a un lien dans la page, il ne lancera pas le navigateur natif Android.
Enfin, ajoutez une ligne de code dans MainActivity.cs :
webView.LoadUrl("votre adresse");
Cela redirigera vers la page définie.
À ce stade, la configuration de base de WebView est terminée.
Passons à la prochaine étape...
2. Appeler du code JavaScript à partir de WebView
Étant donné que nous développons une application Web, appeler du JavaScript via WebView est incontournable.
Passons maintenant à l'explication de la méthode.
Tout d'abord, créons un projet Web. J'utilise ici un projet ASP.NET Core.
Pour rendre votre projet Web accessible en local, je ne vais pas vous expliquer en détail, cherchez sur Google.
Modifiez votre page HTML :
<body ontouchstart="">
<button onclick="showmessage('bouton de la page')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">Afficher</button>
<script src="~/js/js/mui.js"></script>
<script src="~/js/examples/hello-mui/js/mui.js"></script>
<script>
// Définir une fonction JS et retourner une chaîne
function showmessage(message) {
mui.alert(message)
return "retour JS"
}
</script>
</body>
Si vous n'avez pas besoin de récupérer la valeur de retour :
Le code est simple :
webView.LoadUrl("javascript:" + "showmessage('clic du bouton Android')");
Cela suffit.
Si vous avez besoin de récupérer la valeur de retour, continuez à lire.
Nous utilisons la fonction EvaluateJavascript de WebView.
Cette fonction a deux paramètres, une méthode JS à appeler et un IValueCallback.
Créez une classe qui hérite de IValueCallback et fournissez la valeur de retour.
Code suivant :
public class ValueCallback : Java.Lang.Object, IValueCallback
{// Définir un delegate
public delegate void TestEventHandler(string message);
// Déclarer l'événement avec le mot-clé event
public event TestEventHandler TestEvent;
public void Dispose()
{
}
// Redéfinir la méthode pour obtenir la valeur de retour
public void OnReceiveValue(Java.Lang.Object value)
{
string a = value.ToString();
TestEvent(a);
}
}
Ici, nous utilisons un rappel d'événement pour retourner la valeur obtenue (remarque : vous avez sûrement remarqué que nous héritons de Java.Lang.Object, car cette interface est un objet Java, donc il faut l'hériter, sinon il y aura une erreur de conversion de type).
Retournons dans MainActivity.cs.
Définissez une fonction ShowMessage comme suit :
public void ShowMessage(string message)
{
// Afficher simplement la valeur de retour
Toast.MakeText(this.ApplicationContext, message, ToastLength.Short).Show();
}
Modifiez le code dans la méthode OnCreate :
// Obtenir le bouton
var btn = FindViewById<Button>(Resource.Id.button1);// Ajouter un événement de clic
btn.Click += delegate
{
ValueCallback vc = new ValueCallback();
// Ajouter l'événement de retour
vc.TestEvent += ShowMessage;
// Appeler JS
webView.EvaluateJavascript("showmessage('clic du bouton Android')", vc);
};
Ainsi, nous avons terminé le processus d'appel de code JS et de récupération de la valeur de retour.
3. Permettre au code JavaScript de l'application d'appeler du code C# à l'arrière-plan
Passons maintenant à l'explication de la méthode d'appel du code C# depuis JS.
Tout d'abord, déclarez une classe comme suit :
public class JSInterface : Java.Lang.Object
{
Context context;
// Pour afficher un message, le constructeur doit avoir un contexte
public JSInterface(Context context)
{
this.context = context;
}
// Notez qu'il faut ajouter deux attributs
[Export]
[JavascriptInterface]
public void Greeting(string message)
{
Toast.MakeText(context, message, ToastLength.Short).Show();
}
}
C'est simple, créez une fonction et ajoutez deux attributs, ce qui permet à JS de l'appeler (un peu comme un API Web).
Attention à l'attribut Java.Interop.ExportAttribute.
Le projet doit importer Mono.Android.Export
Notez que cette référence n'est pas un using, mais une référence de projet.
Retournons dans le fichier MainActivity.cs, ajoutez le code suivant dans OnCreate :
// Ajouter la classe que nous venons de créer et la nommer wv
webView.AddJavascriptInterface(new JSInterface(this), "wv");
// Charger la page de test
webView.LoadUrl("http://192.168.14.134:57870/");
Modifiez le code de la page de test :
<body ontouchstart="">
<button onclick="showmessage('bouton de la page')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">Afficher</button>
<button onclick="callCSharp()" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">Appeler le C#</button>
<script src="~/js/js/mui.js"></script>
<script src="~/js/examples/hello-mui/js/mui.js"></script>
<script>
function showmessage(message) {
mui.alert(message)
return "retour JS"
}
function callCSharp() {
// alert(wv);
wv.Greeting("Ceci est un appel du JS au C#");
}
</script>
</body>
Nous avons ajouté un bouton et appelé la fonction via l'objet wv...
Le message s'affiche correctement. Ainsi, l'appel du code C# depuis JS est terminé.
Conclusion Le code n'est pas long, mais très pratique.
Après avoir compris ces éléments, nous pouvons commencer le développement de base de notre application Web.
Bien sûr, ce sont seulement les bases. Pour créer une application commerciale, nous devons nécessairement accéder aux périphériques matériels comme le gyroscope ou la caméra.
Cela fera l'objet d'une prochaine explication, à suivre...