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
})
Copier après la connexion
wx.hideToast()
Masquer la boîte d'invite de message
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 10000
})
setTimeout(function(){
wx.hideToast()
},2000)
Copier après la connexion
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('用户点击确定')
}
}
})
Copier après la connexion
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)
}
}
})
Copier après la connexion
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: '当前页面'
})
Copier après la connexion
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'
})
Copier après la connexion
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
Copier après la connexion
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'
})
Copier après la connexion
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
})
Copier après la connexion
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>
Copier après la connexion
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()
})
}
})
Copier après la connexion
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!