Continuación del artículo anterior:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869
Contenido de esta sección: Agregue la página de capacitación y realice el salto mutuo entre ella y la página principal
Dirección del almacén de origen:https://gitee.com/zhaoquan/harmonyoswatchdemo
Crear página de formación
Puntos de conocimiento:
Crear
salto de página: la gestión de la página de páginas en router.replace
config.json
Modificar el código de la página de formación.
El marco de la página aquí es exactamente el mismo que la página de inicio, así que copie el código correspondiente y luego modifíquelo ligeramente
<!--xunlian.hml-->
<div class="container">
<text class="title">
<!-- Hello {{title}}-->
训练页面
</text>
<input type="button" class="btn" value="返回" onclick="clickAction"></input>
</div>En el código predeterminado generado cuando se crea la página en xunlian.hml, cambie:
Hola {{título}} a: Cambie
el punto de la página de entrenamiento para devolver: <input type = "button" class = "btn" value = "Return" onclick = "clickAction"> </input>
La página de entrenamiento xunlian.css tiene el mismo estilo que el index.css de la página principal, así que cópielo sin modificaciones
//xunlian.js
import router from '@system.router'
export default {
data: {
// title: 'World'
},
clickAction(){
// console.log("我被点击了")
router.replace({
uri:'pages/index/index',
});
}
}El código predeterminado generado cuando xunlian.js crea la página será:
-
Hola, {{title}} comenta, la página de formación no utiliza esto.
-
Importar enrutador desde enrutador del sistema: importar enrutador desde'@system.router '.
- Utilice router.replace para lograr el salto de página: router.replace ({uri: 'pages / index / index',});
La página / xxx / xxx rellenada en uri está controlada por config.json en el lado del proyecto. En DevEco Studio 2.0 beta, haga clic con el botón derecho en el directorio Páginas -> Nuevo -> Página JS para crear la página. La parte de matriz de páginas en config.json Se completará automáticamente
El archivo index.js en la página principal se modifica en consecuencia:
El index.js en la página principal se modifica a:
- En el código predeterminado de js, comenta: Hola, {{title}}, la página de entrenamiento no usa esto.
- Importar enrutador desde el enrutador del sistema: ʻimportar enrutador desde'@system.router '.
- Utilice router.replace para lograr el salto de página: router.replace ({uri: 'pages / xunlian / xunlian',});
Inicie el emulador
La edición anterior parece estar guardada y actualizada. Esta vez parece que no. Mi operación es hacer clic en depurar nuevamente, la entrada de operación: Ejecutar -> Debug'entry '
Próximo:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203357560569140833&fid=0101303901040230869
Enlace original:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid=0101303901040230869
Autor: chatterzhao