首页 > 编程语言 >【微信小程序】页面导航

【微信小程序】页面导航

时间:2022-09-01 17:03:18浏览次数:60  
标签:info 微信 tabBar 跳转 home 导航 页面

1 含义

页面导航就是指页面之间的一个跳转

1.1 导航的实现方式

  • Web网页端

  • 微信小程序

1.2 声明式导航

1.2.1 导航到tabBar页面

使用<navigator>组件跳转到指定的tabBar页面

  • url:以/开头,标识要跳转的页面地址
  • open-type:必须为switchTab,表示跳转到tabBar的方式
    XXX.wxml文件
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

效果

1.2.2 导航到tabBar页面

依旧是使用<navigator>组件。

  • open-type:必须为navigate,也可以不写,默认表示跳转非tabBar页面的方式
    XXX.wxml文件
<navigator url="/pages/info/info" open-type="navigate">导航到信息页面</navigator>

效果

1.2.3 后退导航

使用<navigator>组件

  • open-type:必须为navigateBack,表示要进行后退导航
  • delta:必须为数字,表示要后退的层数,如果只是想返回上一页的话,这个delta可以省略,默认数字为1
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

效果

1.3 编程式导航

1.3.1 跳转到tabBar页面例子

home.wxml

<button bindtap="gotoMessage">跳转到message页面</button>

home.js

    //通过编程式导航跳转到tabBar页面
    gotoMessage(){
        wx.switchTab({
          url: '/pages/message/message',
        })
    },

效果

1.3.2 导航到非tabBar页面例子

home.wxml

<button bindtap="gotoInfo">跳转到info页面</button>

home.js

    gotoInfo(){
        wx.navigateTo({
          url: '/pages/info/info',
        })
    },

效果

1.3.2 后退例子

info.wxml

<button bindtap="gotoBack">后退</button>

info.js

    gotoBack(){
        wx.navigateBack({
          delta: 1,
        })
    },

效果

1.4 导航传参

<navigator>组件的url属性可以用来指定要跳转的页面路径,并且可以在该路径后面携带参数,格式如下:

  • 参数与路径之间使用?分隔
  • 参数键与参数值用 = 相连
  • 不同参数用 & 分隔

1.4.1 传参到信息页面(声明式)

点击微信开发者工具左下角的页面参数

home.wxml

<navigator url="/pages/info/info?name=zs&age=20">导航并传参给info页面</navigator>

测试

1.4.2 传参到信息页面(编程式)

home.wxml

<button bindtap="gotoInfo2">跳转到info页面</button>

home.js

    gotoInfo2(){
        wx.navigateTo({
          url: '/pages/info/info?name=ls&age=18',
        })
    },

测试

1.4.3 在onLoad中接收导航参数

通过声明式导航传参编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到
info.js:直接通过options获取即可

    /**
     * 生命周期函数--监听页面加载
     */
    onl oad(options) {
        console.log(options)
    },

测试

1.4.4 参数赋值

info.js

    /**
     * 页面的初始数据
     */
    data: {
        //导航传递过来的空对象
        query:{}
    },

    onl oad(options) {
        console.log(options)
        this.setData({
            query:options
        })
    },

测试

点击AppData看跳转传的参数

标签:info,微信,tabBar,跳转,home,导航,页面
From: https://www.cnblogs.com/PaturNax/p/16644943.html

相关文章

  • cookies加密__搜狗微信
    #coding=utf-8importrequestsfromlxmlimportetreeimportreimportrandomimportjsonfromurllibimportparsedefget_cookie(response1,uigs_para,UserAgent):......
  • 浏览器从输入URL到渲染完页面的整个过程
    从输入URL到渲染出整个页面的过程包括三个部分:1、DNS解析URL的过程2、浏览器发送请求与服务器交互的过程3、浏览器对接收到的html页面渲染的过程一、DNS解析URL的......
  • 微信开发者工具拉取gitlab远程代码报Pull failed原因分析:
    可能出现的原因:本地主机上没有安装nodenode下载地址:1https://nodejs.org/zh-cn/download/ 没有保存gitlab的用户名和密码  ......
  • 微信怎么设置待办事项定时提醒?
    很多人在交流、传达各种信息时,都会使用手机微信这款APP,所以大家一般是不会忽视微信消息的。于是就有网友表示,自己每天要处理的生活、工作等待办事项是比较多的,经常会忘记......
  • html+php 分类页面展示
    根据分类 展示不同页面:案例一:  案例二:   同宽度展示不同页面:if($child_cate_id){$hangye_pid=M("hangye")->where("status=1andcate......
  • vue 多页面应用
    1,认识vue页面加载过程在创建多页面之前,还是要先简单地了解一下,vue页面时怎么加载的。我们知道,在Vue-cli中默认目录结构如下:1.项目的依赖模块目录,这个目录很大,因此一......
  • 用Vue框架实现 - JSON数据渲染页面
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="referrer"content="no-referrer"/><metahttp-equiv="X-UA-Compatibl......
  • js 获取缓存渲染到页面里面
    $('#code').change(function(){console.log($(this).val())localStorage.setItem("code",JSON.stringify({"sn":$(this).val(),"gs":$("#select").val()}));});$('......
  • C++ 地形导航系统之确定峰点的位置
    #include<iostream>#include<string>#include<fstream>#defineN64boolisPeak(intgrid[][N],intr,intc);intmain(){intnrows,ncols;intm......
  • js关闭微信浏览器页面
    在关闭微信某个H5网页时,window.close()有时候并不好使 【解决方案】://这个可以关闭安卓系统的手机document.addEventListener('WeixinJSBridgeReady',function(){W......