网站建设代码怎么导入图片,网络服务器与网站建设,百度竞价开户公司,公司网站设计注意什么#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、页面导航1、什么是页面导航一、声明式导航1、导航到 tabBar 页面2、导航到非 tabBar 页面3、后退导航总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第22篇文章; 今天开始学习微信小程序的第十三天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、页面导航 前面对学到的模板语法与配置进行了一个总结通过栗子了解到各个模板语法的使用。接下来就来讲解一下小程序的视图与逻辑–页面导航。话不多说让我们原文再续书接上回吧。 1、什么是页面导航 首先来了解一下页面导航的概念。页面导航顾名思义指的就是页面之间的相互跳转比如浏览器中实现页面导航的方式有如下两种
a 链接location.href 而在小程序中是不一样的想要实现页面导航有以下两种方式 声明式导航 所谓的声明式导航就是先在页面上声明一个 navigator 导航组件然后通过点击 navigator 组件实现页面跳转。 编程式导航 而编程式导航是直接调用小程序提供的导航 API实现页面的跳转。
一、声明式导航 接下来先学习在小程序中声明式导航如何进行跳转。
1、导航到 tabBar 页面 前面也学到了什么是tabBar 这里就再来复习一下所谓的 tabBar 页面指的是被配置为 tabBar 的页面。 在小程序中可以通过使用 跳转到指定的 tabBar 页面需要指定 url 属性和 open-type 属性如下
属性说明url表示要跳转的页面的地址必须以 / 开头open-type表示跳转的方式必须为 switchTab其中如果在编程过程中忘记填写 open-type 属性与其对应的值则navigator 组件不会生效通过下面栗子来学习一下。
home.wxml 这里想要从首页页面跳转到消息页面需要跳转的路径可以在 app.json 里进行查找。
navigator url/pages/message/message open-typeswitchTab点我跳转到消息页面/navigator注意这里一定要指定 open-type 属性。可以来看下运行效果 当不指定 open-type 属性时则不会生效看下运行效果 可以发现怎么点击都没有生效。
2、导航到非 tabBar 页面 非 tabBar 页面指的是没有被配置为 tabBar 的页面。比如现在的 home、message和contact 页面就是被配置为 tabBar 的页面而 info 页面就是属于非 tabBar 页面。 在小程序中可以使用 navigator 组件跳转到普通的非 tabBar 页面时则需要指定 url 属性和 open-type 属性
属性说明url表示要跳转的页面的地址必须以 / 开头open-type表示跳转的方式必须为 navigate通过下面的栗子进行学习
home.wxml 这里想要从首页页面跳转到 info 页面需要跳转的路径可以在 app.json 里进行查找。
navigator url/pages/info/info open-typenavigate点我跳转到info页面/navigator可省略 open-type 属性
navigator url/pages/info/info点我跳转到info页面/navigator注意为了简便在导航到非 tabBar 页面时open-typenavigate 属性可以省略。 可以来看下运行效果
3、后退导航 最后学习的就是如果通过声明式导航来实现后退效果。如果要后退到上一页面或多级页面则需要指定 open-type 属性和 delta 属性
属性说明open-type其值必须是 navigateBack表示要进行后退导航delta其值必须是数字表示要后退的层级注意为了简便如果只是后退到上一页面则可以省略 delta 属性因为其默认值就是 1。通过下面的栗子来学习一下
info.wxml
navigator open-typenavigateBack delta1返回上一页/navigator这样的话当点击跳转到 info 页面可以通过该组件返回到上一页可以来看一下运行效果 在实际开发过程中只要返回上一页效果的话只写 open-type 属性即可。 总结 感谢观看这里就是页面导航 – 声明式导航的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
