Expérience d'apprentissage personnelle pour un démarrage rapide de l'applet WeChat (2)
1. Saut de page
Questions nécessitant une attention particulière
Lors de l'exécution de sauts de page, d'abord le fichier json correspondant ne peut pas être vide, au moins un {} est requis , puis le fichier js correspondant doit avoir des attributs page {} .
Description: le navigateur est une étiquette de saut de page fournie par l'applet.
<navigator url="../demo2/demo2">go demo2</navigator>
Correspondant à json: (Il doit y avoir quelque chose, au moins une accolade vide, bien sûr, vous pouvez aussi supprimer directement le fichier json)
Correspondant à js: (Bien qu'il n'y ait rien, écrivez la page)
<!--pages/demo2/demo2.wxml-->
<navigator url="../demo3/demo3">
<image src="../../image/poster.jpg"></image>
</navigator>
Exécutez comme suit:
2. Valeur de transfert de page
Le transfert des paramètres entre les pages est divisé en transfert et réception:
transfert: ajouter un paramètre de point d'interrogation à la connexion de saut
<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
<navigator url="../demo2/demo2?name=小红">小红</navigator>
Recevoir: recevoir le premier paramètre (objet) de onload
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
},
3. Cliquez pour mettre en évidence
Il existe un attribut de classe de survol dans le navigateur. S'il est remplacé par aucun, il n'y a pas de mise en évidence. Définissez-le sur le style souhaité.
Pour des images comme celle-ci, il existe deux méthodes: la première consiste à les envelopper avec une balise de navigateur. Le second est de le concevoir comme un curseur: pointeur;
<navigator hover-class="my-hover">点击高亮</navigator>
<navigator hover-class="none">点击高亮</navigator>
<image class="image-hover" src="../../image/poster.jpg" ></image>
.my-hover{
color: brown;
}
.image-hover{
cursor: pointer;
}
4. API de saut de page
Déclenchez l'événement via le bouton, puis appelez la méthode et l'API dans js pour effectuer le saut.
Écrivez un bouton sur la page demo1 et liez l'événement de clic.
<button type="primary" bindtap="tapHandle">跳转</button>
JS a écrit sur la méthode correspondante, la méthode est passé par valeur ? Atteignez
Page({
tapHandle: function () {
//当我们点击绑定的按钮，系统就会找到并执行这里的代码
wx.navigateTo({
url: '../demo2/demo2?name=123'
})
}
})
Ajouter un bouton dans demo3
<button bindtap="backHandle">返回</button>
Écriture de la méthode dans les js correspondants
Page({
backHandle: function () {
wx.navigateBack({
//这里的值是控制返回到哪里，不加的话默认是上一页，加的话是多少就往前面返回多少页。
delta: 2,
})
}
})
Fin ~