Experiencia de aprendizaje personal para un inicio rápido del subprograma WeChat (2)
1. Salto de página
Asuntos que necesitan atención
Al realizar saltos de página, primero el archivo json correspondiente no puede estar vacío, se requiere al menos un {} y luego el archivo js correspondiente debe tener atributos de página {} .
Descripción: navegador es una etiqueta para saltar de página proporcionada por el subprograma.
<navigator url="../demo2/demo2">go demo2</navigator>
Correspondiente a json: (Debe haber algo, al menos una llave vacía, por supuesto, también puede eliminar directamente el archivo json)
Correspondiente a js: (Aunque no hay nada, escriba la página)
<!--pages/demo2/demo2.wxml-->
<navigator url="../demo3/demo3">
<image src="../../image/poster.jpg"></image>
</navigator>
Ejecutar de la siguiente manera:
2. Valor de transferencia de página
La transferencia de parámetros entre páginas se divide en transferencia y recepción:
transferencia: agregue un parámetro de signo de interrogación a la conexión de salto
<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
<navigator url="../demo2/demo2?name=小红">小红</navigator>
Recibir: recibe el primer parámetro (objeto) de carga
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
},
3. Haga clic para resaltar
Hay un atributo de clase flotante en el navegador. Si se cambia a ninguno, no hay resaltado. Configúrelo con el estilo que desee.
Para imágenes como esta, hay dos métodos: el primero es envolverlas con una etiqueta de navegador. El segundo es diseñarlo como un cursor: puntero;
<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 salto de página
Active el evento a través del botón y luego llame al método y la API en js para lograr el salto.
Escriba un botón en la página demo1 y vincule el evento de clic.
<button type="primary" bindtap="tapHandle">跳转</button>
JS escribió en el método correspondiente, el método se pasa por valor ? Lograr
Page({
tapHandle: function () {
//当我们点击绑定的按钮，系统就会找到并执行这里的代码
wx.navigateTo({
url: '../demo2/demo2?name=123'
})
}
})
Agregar un botón en demo3
<button bindtap="backHandle">返回</button>
Método de escritura en js correspondiente
Page({
backHandle: function () {
wx.navigateBack({
//这里的值是控制返回到哪里，不加的话默认是上一页，加的话是多少就往前面返回多少页。
delta: 2,
})
}
})
Fin ~