【小程序开发教程系列7】入门篇之小程序组件——导航

春哥技术团队虎子关于小程序开发教程继续更新中,截止到上一篇文章,已经把小程序配置讲解完毕,接下来说明小程序组件 。

导航

1. navigator--导航(页面链接,相当于a链接)

在小程序中,页面跳转链接为navigator。

1)属性--url

url为应用内的跳转链接,不允许跳外链。

依旧使用test页面,test.wxml文件(也可以自行新建页面进行测试):

编译预览:

【小程序开发教程系列7】入门篇之小程序组件

点击链接,跳转到日志页面:

【小程序开发教程系列7】入门篇之小程序组件

2)属性--open-type

open-type属性的属性值有:

【小程序开发教程系列7】入门篇之小程序组件

①redirect--重定向

设置open-type属性的值为redirect。

【小程序开发教程系列7】入门篇之小程序组件

编译预览,加open-type属性对链接的展示样式不影响:

【小程序开发教程系列7】入门篇之小程序组件

点击链接,跳转到日志页面:

【小程序开发教程系列7】入门篇之小程序组件

页面进行重定向,没有可以点击的返回按钮。

redirect重定向可以用在检测用户登录信息是否失效,如果失效跳转到登录页面,那么这个登录页面就不能有返回按钮。

②switchTab--跳转tab栏页面使用

当不设置open-type属性时,跳转的页面为tabBar栏中的页面时,是不好使的。

跳转到首页页面,首页页面在tabBar栏。

编译预览:

【小程序开发教程系列7】入门篇之小程序组件

点击链接,跳转到首页,无任何反应,跳转失败。

注意:在小程序中,当需要跳转到tabBar栏中存在的页面时,需要将open-type属性值设为switchTab。

设置open-type属性:

【小程序开发教程系列7】入门篇之小程序组件

小程序还有很多组件,其他组件自行学习。

春哥团队独家打造的春哥小程序开发平台V1.1源码系统已经正式发布了,用此款源码系统可以分分钟搭建出强大的小程序开发平台,无需编程,小白也可以开发小程序,轻轻松松接单赚钱


 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:价值999元的《8小时搞定微信小程序开      下一篇:【小程序开发教程系列8】入门篇之小程