Implémentation de la boîte de message d'invite de l'applet WeChat

Cet article présente principalement la boîte d'invite d'applet WeChat. Maintenant, je la partage avec vous et la donne comme référence. Les amis intéressés peuvent s'y référer.

Je connais très bien Toast lorsque je travaille sur Android. Toast est également une méthode de rappel de message importante dans le développement d'applets WeChat

Boîte d'invite :

wx.showToast(OBJECT)

Afficher la boîte d'invite de message

Description du paramètre OBJECT :

Exemple de code :

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

wx.hideToast()

Masquer la boîte d'invite de message

wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 10000
})

setTimeout(function(){
 wx.hideToast()
},2000)

wx.showModal(OBJECT)

Afficher la fenêtre contextuelle modale

Description du paramètre OBJET :

Exemple de code :

wx.showModal({
 title: '提示',
 content: '这是一个模态弹窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用户点击确定')
  }
 }
})

wx. showActionSheet (OBJECT)

Menu d'opération d'affichage

Description du paramètre OBJECT :

Description du paramètre de retour de succès :

Exemple de code :

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
  if (!res.cancel) {
   console.log(res.tapIndex)
  }
 }
})

Définir la barre de navigation

wx.setNavigationBarTitle(OBJECT)

Définir dynamiquement le titre du page actuelle.

Description du paramètre OBJECT :

Exemple de code :

wx.setNavigationBarTitle({
 title: '当前页面'
})

wx.showNavigationBarLoading()

Afficher l'animation de chargement de la barre de navigation sur la page actuelle.

wx.hideNavigationBarLoading()

Masquer l'animation de chargement de la barre de navigation.

Saut de page :

wx.navigateTo(OBJECT)

Conserver la page actuelle et accéder à une page de l'application, utilisez wx.navigateBack pour revenir à la page d'origine.

Description du paramètre OBJET :

Exemple de code :

wx.navigateTo({
 url: 'test?id=1'
})

//test.js
Page({
 onLoad: function(option){
  console.log(option.query)
 }
})

Remarque : Afin de ne pas causer de problèmes aux utilisateurs lors de l'utilisation du mini programme, nous stipulons que le chemin de la page ne peut comporter que cinq niveaux, essayez donc d'éviter les interactions à plusieurs niveaux.

wx.redirectTo(OBJECT)

Fermez la page actuelle et accédez à une page de l'application.

Description du paramètre OBJECT :

Exemple de code :

wx.redirectTo({
 url: 'test?id=1'
})

wx.navigateBack(OBJECT)

Fermez la page actuelle et revenez à la page précédente ou à la page multi-niveaux. Vous pouvez obtenir la pile de pages actuelle via getCurrentPages()) et décider du nombre de niveaux à renvoyer.

Description du paramètre OBJECT :

Animation :

wx.createAnimation(OBJECT)

Créer un Animation d'instance d'animation. Appelez les méthodes de l'instance pour décrire l'animation. Enfin, les données d'animation sont exportées via la méthode d'exportation de l'instance d'animation et transmises à la propriété d'animation du composant.

Remarque : chaque fois que la méthode d'exportation est appelée, l'opération d'animation précédente sera effacée.

Description du paramètre OBJECT :

var animation = wx.createAnimation({
 transformOrigin: "50% 50%",
 duration: 1000,
 timingFunction: "ease",
 delay: 0
})

animation

L'instance d'animation peut appeler la méthode suivante pour décrire l'animation. Une fois l'appel terminé, elle reviendra à elle-même et prendra en charge l'écriture d'appels en chaîne.

Style :

Rotation :

Échelle :

Décalage :

Inclinaison :

Déformation matricielle :

File d'attente d'animation

Après avoir appelé la méthode d'opération d'animation, appelez step( ) pour indiquer l'achèvement d'un ensemble d'animations. Vous pouvez appeler n'importe quel nombre de méthodes d'animation dans un ensemble d'animations. Toutes les animations d'un ensemble d'animations démarreront en même temps et l'ensemble d'animations suivant ne se poursuivra pas avant une. l'ensemble des animations est terminé. Cette étape peut transmettre un paramètre de configuration similaire à wx.createAnimation() pour spécifier la configuration de l'animation de groupe actuelle.

Exemple :

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

Page({
 data: {
  animationData: {}
 },
 onShow: function(){
  var animation = wx.createAnimation({
   duration: 1000,
    timingFunction: 'ease',
  })

  this.animation = animation

  animation.scale(2,2).rotate(45).step()

  this.setData({
   animationData:animation.export()
  })

  setTimeout(function() {
   animation.translate(30).step()
   this.setData({
    animationData:animation.export()
   })
  }.bind(this), 1000)
 },
 rotateAndScale: function () {
  // 旋转同时放大
  this.animation.rotate(45).scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateThenScale: function () {
  // 先旋转后放大
  this.animation.rotate(45).step()
  this.animation.scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateAndScaleThenTranslate: function () {
  // 先旋转同时放大，然后平移
  this.animation.rotate(45).scale(2, 2).step()
  this.animation.translate(100, 100).step({ duration: 1000 })
  this.setData({
   animationData: this.animation.export()
  })
 }
})

wx.hideKeyboard()

Masquer le clavier.

wx.stopPullDownRefresh()

Arrêter l'actualisation du menu déroulant de la page actuelle. Pour plus de détails, consultez les fonctions de gestion des événements liées à la page.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment définir dynamiquement le texte de l'invite d'espace réservé et le statut de sélection/annulation des boutons dans le mini-programme WeChat

Une brève introduction aux onglets du mini-programme WeChat

Mise en œuvre de la fonction de téléchargement de plusieurs images dans le mini-programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!