精华内容
下载资源
问答
  • 小程序页面跳转
    千次阅读
    2022-04-21 11:21:27

    方法1 对标签绑定点击事件

    <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view>
    
    Page({
    ...
    /**
    * 点击绑定的事件
    */
    clickMe:function(e){
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
    }
    })

    方法2 页面跳转

    这里是指函数接收一个字典,其中 url 对应的值是一个 String 就是我们要跳转的页面地址。

    wx.navigateTo({
    url: '/pages/redirect/redirect?id='+nid
    })

    同时在对应页面也需要编写相应的 js 方法接受参数。也就是监听页面加载的生命周期函数 -- onload: function (options),页面跳转过来之后自动执行该方法。参数 options 就是我们传递的参数

    redirect.js

    Page({
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    console.log(options);
    }
    })

    注意此种页面跳转只能跳转到非tabbar的页面噢

    方法3 通过标签跳转

    这种方式有点类似于 html 中的 a 标签

    <navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>
    

    以上就是目前学习做微信小程序中页面的跳转的知识点啦,欢迎大佬们做出指正!!!

    更多相关内容
  • 微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转。 1、js导航  (1)、wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx....
  • 本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法。分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接...
  • 微信小程序页面跳转方法总结

    万次阅读 2021-08-17 16:08:03
    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。// 注意:调用 navigateTo 跳转时,...

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充):

    1. 利用小程序提供的 API 跳转:

    // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
    // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo 
    wx.navigateTo({
      url: 'page/home/home?user_id=111'
    })
    
    
    // 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
    wx.navigateTo({
      url: 'page/home/home?user_id=111'  // 页面 A
    })
    wx.navigateTo({
      url: 'page/detail/detail?product_id=222'  // 页面 B
    })
    // 跳转到页面 A
    wx.navigateBack({
      delta: 2
    })
    
    
    // 关闭当前页面,跳转到应用内的某个页面。
    wx.redirectTo({
      url: 'page/home/home?user_id=111'
    })
    
    
    // 跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。
    wx.switchTab({
      url: 'page/index/index'
    })
    
    
    // 关闭所有页面,打开到应用内的某个页面。
    wx.reLanch({
      url: 'page/home/home?user_id=111'
    })

    2. wxml 页面组件跳转(可以通过设置open-type属性指明页面跳转方式):

    // navigator 组件默认的 open-type 为 navigate 
    <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
    
    // redirect 对应 API 中的 wx.redirect 方法
    <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
    
    // switchTab 对应 API 中的 wx.switchTab 方法
    <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
    
    // reLanch 对应 API 中的 wx.reLanch 方法
    <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面,打开到应用内的某个页面</navigator>
    
    // navigateBack 对应 API 中的 wx.navigateBack 方法
    <navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面,返回上一级页面或多级页面</navigator>
    <view class="itemWeight" catchtap="jumpToOverMissionList">
    // 在js代码中写:其中,url是跳转的相对路径,?问号后面加的是参数,以key-value的方式,这里传了个value为2的参数过去 
    
    jumpToOverMissionList:function(){ 
        wx.navigateTo({
            url:"mission/missionList/missionList?type=2" 
        }); 
    },

    3、跳转页面技巧(经验交流)

    微信小程序某个页面直接返回首页即微信小程序回退到首页
    打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页
     
    正常 A -> B -> C 都是通过 wx.navigateTo 跳转的,所以 wx.navigateBack 只能返回上一界面,如果要返回到A 界面就会出现 C -> B -> A 的效果。
    如果想实现 A -> B -> C 当 C 点击返回时, 实现直接 C -> A 这种效果, 就只能A -> B 通过 wx.navigateTo 跳转,B -> C 通过 wx.redirectTo 跳转,跳转触发后 B 页面就会被销毁, C 页面再返回 wx.navigateBack 就会直接到 A 了。

    例如:
    第一个页面采用navigateTo, 

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

    在第二个页面中使用redirectTo。

    wx.redirectTo({
        url: '/pages/test/test',
    })

    这里是重点:在第三个页面点击回退时,会直接回到第一个页面。

    wx.redirectTo()跳转到新页面之后,会自动销毁上一个页面,在新页面点击返回按钮时,会直接回到上上一个页面

    这是相当于在这个回退过程中直接销毁第二个页面 

    展开全文
  • 小程序页面跳转的几种方式

    千次阅读 2020-12-21 18:47:28
    小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 我们有两种方式实现小程序页面跳转:用js的方式实现和用navigator组件的方式

    小程序官方文档

    我们有两种方式实现小程序的页面跳转:用js的方式实现和用navigator组件的方式

    1、wx.navigateTo(有返回键,不可以跳转到tabBar页面)

    	//保留当前页面,跳转到应用内的某个页面
    wx.navigateTo({
      url: '/pages/detail/detail?id=1'
    })
    

    2、wx.switchTab (没有返回键,只能跳转到tabBar页面,不可以携带参数)

    wx.switchTab({  
          url: `/pages/detail/detail`,
        })
    

    3、wx.reLaunch(跳转任意页面,没有返回键 ,有首页按钮)

     wx.reLaunch({
          url: '/pages/detail/detail'
        })
    

    4、wx.redirectTo(关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面)

    wx.redirectTo({
       url: `/pages/detail/detail`,
    })
    

    5、wx.navigateBack(关闭当前页面,返回上一页面或多级页面,data值为1,表示跳转上一页,2表示跳两级)

    wx.navigateBack({
           delta:1
        })
    

    区别:

    1wx.navigateTo是开启一个新页面,那个页面是隐藏了,原页面是onHide,所以是可以返回的,但是返回之后,跳转的页面就unload了

    2、wx.redirectTo是当前页面替换成新的页面,所以返回不去onunload(页面被销毁)

    3、tabBar无论跳那个页面都是onHide

    传参注意:

    跳转页面传递数组参数必须序列化

     let  arr=[1,2,3,4,5]
          category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化
         wx.navigateTo({
             url: `/pages/detail/detail/?cate= ${category} `,
            })
    
    onLoad: function (options) {
      let   category = JSON.parse(options.cate);
     console.log(category)
    }
    

    参数值过长接受时候内容不全的问题

    //传参
    wx.navigateTo({//wx.redirectTo、wx.reLaunch
        url: '/pages/details/details?id=' + encodeURIComponent(id)
        })
    
    //接收
    onLoad(options) {
        var id = decodeURIComponent(options.id);
    }
    

    二、navigator组件实现
    小程序官方文档

    1. <navigator url = "/pages/details/details">跳转到新页面</navigator>

    2. <navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>
      对应 wx.redirectTo 的功能

    3. <navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>
      对应 wx.switchTab 的功能

    4. <navigator url = "/pages/details/details" open-type = "reLaunch">跳转到新页面</navigator>
      对应 wx.reLaunch 的功能

    5. <navigator url = "/pages/details/details" open-type = "navigateBack">跳转到新页面</navigator>
      对应 wx.navigateBack 的功能

    展开全文
  • 微信小程序页面跳转如何传递对象参数 1、使用data-名字 = 要传的值 myshop.wxml <van-grid-item use-slot bind:click="hClickDetails" wx:for="{{ shopList }}" data-nowdata="{{item}}" wx:key="index"&...

    前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

    微信小程序页面跳转如何传递对象参数

    1、使用data-名字 = 要传的值

    myshop.wxml

    <van-grid-item
              use-slot 
              bind:click="hClickDetails"
              wx:for="{{ shopList }}" 
              data-nowdata="{{item}}"
              wx:key="index">
                <image
                class="imgShop"
                mode='aspectFill' 
                src="{{item.lbtImg[0]}}"
                />
                <view class="textContent">
                  <text class="titleShop">{{ item.shopTitle }} \n</text>
                  <text class="priceShop">{{ item.integral }}积分</text>
                  <van-icon class="iconShopThree" name="ellipsis" />
                </view>
              </van-grid-item>
    

    2、绑定点击事件,e.currentTarget.dataset.名字就是你刚点击内容的所有数据,将这个数据转成JSON字符串拼上去

    myshop.js

    // 点击商品进入详情页
      hClickDetails(e){
        // 被点击商品的信息
        var nowdata = e.currentTarget.dataset.nowdata
        //将对象转为string
        var queryBean = JSON.stringify(nowdata)
    
        wx.navigateTo({
          url:'../../shop/details/details?queryBean=' + queryBean,  
        })
      },
    

    3、通过JSON.paras再转成对象使用

    details.js

    onLoad: function (options) {
        var queryBean = JSON.parse(options.queryBean)
        this.setData({
          detailsData: queryBean
        })
        console.log(this.data.detailsData);
      },
    
    展开全文
  • 小程序页面跳转后一直白屏

    千次阅读 2021-10-09 16:48:38
    新加了页面,然后修改了pagas配置文件,页面是正常跳转页面白屏未加载。 需要在uniapp停止小程序模拟器,重新运行,就正常了
  • 小程序页面跳转然后刷新

    千次阅读 2020-08-20 14:12:36
    我们一般在A页面跳到B页面,在B页面做完缓存需要再次跳回A页面。这时候会发现,是退回A页面,而且页面没有刷新该怎么办呢? //存储到本地 uni.setStorage({ key: '键', data: '值', success: function () { ...
  • 微信小程序页面跳转传值

    千次阅读 2020-08-24 20:28:58
    原文链接 前言这个需求有很多种实现方式,这里只谈 路由跳转携带参数 的 2 种方式。// 假设要从 A页面 带参跳转到 B页面 【A页面
  • 小程序页面跳转传参长度限制

    千次阅读 2021-01-27 22:32:26
    我们在开发小程序的过程中,有时候会在小程序页面跳转的时候传参,这个参数的长度还特别的长(如下),url就会被截断。 //我需要传递的参数 let videoDetail = ...
  • 小程序页面跳转传递对象

    千次阅读 2020-02-09 14:41:11
    背景:今天在做小程序页面跳转时,遇到一个需要传递对象的情况。在这里记录一下。 基本方法:先把对象转换成JSON格式,然后跳转之后又从JSON转换回来。 使用的函数:JSON.stringify():对象–>JSON JSON.parse():...
  • 微信小程序页面跳转限制问题

    千次阅读 2020-05-06 15:18:41
    微信小程序页面跳转,如果使用wx.navigateTo或者navigator标签进行跳转,最多只能跳转10次 (超过10次,在怎么点也不会跳转),这很不利于用户的体验。那么就来解决这个问题(小声比比)。 先来看下小程序的5种路由...
  • 跳转事件 jump:function(e){ let array = { id:1, name:'张三' } ...跳转页面 onLoad:function(options){ console.log('跳转事件参数',JSON.parse(options.array)) }, 遇到问题可以看我主页加
  • 原文:小程序页面跳转的方式(以钉钉为例) 页面的跳转: dd.navigateTo({ 保留当前页面,跳转到应用内的某个指定页面 url: ‘new_page?count=100‘ }) dd.redirectTo({ 关闭当前页面,跳转到应用内的某个指定页面。 ...
  • 传递参数为对象格式 若参数为对象则需先使用 JSON.stringify()进行转换 , 接收后使用JSON.parse()转为对象 ...小程序页面跳转传递url地址 let url = 'https://opendocs.alipay.com/mini/api/
  • 微信小程序页面跳转刷新方式

    千次阅读 2021-04-23 14:49:47
    1、switchTab跳转刷新 uni.switchTab({ url: '/pages/staffWork/staffWork', success: function(e) { var page = getCurrentPages().pop(); if (page == undefined || page == ...
  • 小程序页面跳转传参

    千次阅读 2019-04-29 17:42:40
    微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看demo来的快和方便。 先看一下官方给出的文档: ... index.wx...
  • 微信小程序页面跳转

    千次阅读 2020-11-03 00:29:30
    url表示跳转到某页面的路径,如果没有,跳转不成功。 wxml: <navigator url="/pages/1/1"> <button >点我,跳转的第1页</button> </navigator> 2.API:wx.navigateTo 这个API的功能是...
  • 小程序页面跳转的四种方法

    万次阅读 2018-12-22 09:40:51
    今天因为业务需求,需要在小程序的pages目录下添加新的页面,按照其他文件的样式,我添加了如下图的新文件夹buyprotocol 这个文件的目的是渲染文章的,在用户填写信息的时候,会提示是否已经阅读购买协议,然后...
  • 报错 微信小程序设置跳转页面报错: navigateTo:fail can not navigateTo a tabbar page 原因 很有可能是在底部tabbar里面定义了同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此...进行页面跳转 ...
  • 本文实例讲述了微信小程序出现wx.navigateTo页面跳转问题的解决方法。分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程。流程是这样的: 商品展示–>商品详情–>下单页面–>下单详情...
  • 微信小程序页面跳转失败常见原因

    千次阅读 2020-01-20 22:10:04
    wx.switchTab 只能跳转到 tabBar 页面,并关闭其它所有非 tabBar 页面。且路径后面不能带参数 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。既能跳转到标签页,又能跳转到非标签页,且路径后可带参数 ...
  • 微信小程序页面跳转/返回

    千次阅读 2020-11-17 23:26:29
    微信小程序——页面跳转及传参 路由 API 文章目录navigateTo 跳转到应用内的某个页面wx.redirectTo 关闭当前页面wx.switchTab 跳转到 tabBar 页面navigateBack 返回上一页面wxml 页面组件跳转 navigateTo 跳转到应用...
  • 小程序页面跳转、传参及参数获取

    千次阅读 2018-11-19 14:27:11
    //跳转到classify 页面 wx.navigateTo({ url: '../classify/classify?id=' + id }) } //classify 页面 获取参数 onLoad: function (opts) { console.log(opts.id) console.log(this.options.id) }  
  • 1.页面跳转方式(1)标签跳转open-type的属性值对应api里的用法即wx.的用法1 跳转到新页面(2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面1 wx.navigateTo({2 url: 'pages/a/a'3 })(3)wx.switchTab...
  • 在微信小程序的开发中,页面之间的跳转传参是非常常见的。一般参数较少的时候,这样的传参方式很简单。但是有的时候,我们需要传递的参数可能是一个对象,但是这个对象属性很多, 通常的做法是需要先转成字符串...
  • 微信小程序页面跳转后不显示内容

    千次阅读 2020-12-02 16:19:23
    调用wx.navigateTo()函数,跳转页面后本应有内容的页面变成一片空白,大体上的原因如下。 1、app.json 中未配置相应的页面路径,出现这个的原因很大概率与版本控制有关,当出现冲突后,会发生这种问题,重新手动生成...
  • 微信小程序页面跳转后定时器如何关闭 1.在页面中定义,定时器形参,并在跳转到其它页面后,在隐藏和未加载中删除定时器 Page({ data: { timer:'',//定义定时器形参,为空字符在这里插入代码片 }, onHide: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 171,334
精华内容 68,533
关键字:

小程序页面跳转