微信小程序路由以及跳转页面传递参数

这篇具有很好参考价值的文章主要介绍了微信小程序路由以及跳转页面传递参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

路由

在app.json的pages里面写

"pages/页面/页面" 直接保存pages直接生成非常方便

微信小程序路由以及跳转页面传递参数,微信小程序,小程序

 跳转页面

wx.navigateTo() 保留当前页面,跳转到应用内的某个非tabBar页面。

<text bindtap="daka">点击</text>

 daka:function () {
    wx.navigateTo({
      url: '../daka/daka',
    })
  },

微信小程序路由以及跳转页面传递参数,微信小程序,小程序会保留返回箭头

底部导航跳转在app.json写入即可
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/home/home",
      "text": "日志"
    }]
  },
传参以及接收参数

1、本地存储

使用方法:和js差不多一样

    wx.setStorageSync()

2、wx.getStorage

从本地缓存中异步获取指定 key 的内容

3、wx.removeStorage

从本地缓存中移除指定 key

4、wx.clearStorage

清除所有缓存

跳转传参

<view bindtap="title_tiaozhuan" data-id="{{item.id}}">点击</view>

  title_tiaozhuan:function (e) {
    let {id} = e.target.dataset;
    console.log(e.currentTarget.dataset.id);
    wx.setStorageSync('daka_l',e.currentTarget.dataset.id)//地图要用到的数据
    wx.navigateTo({
      url: '../liebiao/liebiao',
    })
  },

接收参数:取出来直接用就可以了

  let ssr = wx.getStorageSync('daka_l');


 文章来源地址https://www.toymoban.com/news/detail-668925.html

到了这里,关于微信小程序路由以及跳转页面传递参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数

    本文是uniapp打包成安卓App。 一、注意事项 1、用到了分享功能,在打包App时,需要配置manifest.json:App 模块配置-Share。按照提示填写微信分享的信息,appid的获取参考我的另一篇文章:uniapp项目 App端实现微信登录、QQ登录 2、因为涉及到第三方 SDK 的配置,需要打包自定义基座

    2024年02月09日
    浏览(58)
  • 微信小程序 - 实时监听路由发生变化,当页面跳转发生变化时执行一段代码或函数,可获取目标页面的路径 URL 、路由参数、跳转方式、该页面的配置等(支持 “全局“ 和 “局部“ 两种写法)

    有时候,我们需要实时监听页面的跳转,并且拿到路由地址及参数。 实现了 在微信小程序开发中,每次切换页面时都触发一个函数,当路由发生变化后执行一段代码, 简单来说,相当于一个 “路由监听器”,当页面跳转时立即触发,然后拿到路由的 URL 和携带的参数,进行

    2024年02月12日
    浏览(100)
  • 微信小程序页面传递参数方法

            页面跳转方法有很多中,但经常会通过一个页面传递参数给另一个页面,非常的常见。但数据量大的时候,通常用字符串传递,但会显得过于臃肿,下面介绍页面传递参数的各种方式。 例如:A跳转到B页面携带参数 特点:只能传递单个页面,数据量少 当然,如果过

    2024年02月03日
    浏览(79)
  • 微信小程序如何实现页面传参和页面传递多个参数

    只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。 下面时多个参数页面传参的方式   通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 分隔;如 ‘path?key=valuekey2=value2’。 案例:

    2024年02月11日
    浏览(80)
  • 微信小程序携带参数的页面跳转

    日常我们在手机app购物的时候,点击app主页琳琅满目的商品,就会跳转到商品的具体页面。 无论我们点击哪个商品,跳转到商品具体页面的布局都是一样的,但页面内的数据不一样,比如说商品名称,图片等等不一样。这就是在点击商品的时候,在跳转到具体页面时候传递了

    2024年02月09日
    浏览(70)
  • 微信小程序与内嵌h5页面之间的参数传递

    小程序是采用vue+taroui技术栈 h5页面 所在文件:h5.vue 小程序页面:wx.vue,这里我用的是taro获取当前页面栈,大家可以用wx 这里的this.routerParams==={params:1} 小程序页面:wx.vue,首先向内嵌h5的webview所在页面跳转并携带所传参数。 webview页面—/pages/processLink/index。index.vue,由该页面

    2024年02月15日
    浏览(82)
  • 微信小程序页面跳转时URL获取不到参数

    原因: 在跳转的url参数中添加了包含特殊字符?的情况下 ,会出现参数丢失的情况 1.最近在小程序开发过程中,发现之前可用的某个功能字段展示为了undefined,后来查看参数发现 页面跳转时参数丢失了 导致的 此时获取到的参数都是正常的,在上线一段时间后,其它同学在 图

    2024年02月11日
    浏览(68)
  • 【微信小程序】使用页面跳转并携带多个特定参数

    在我们项目的搭建时常常会用到页面跳转,在微信小程序中也支持多个跳转类型。如( wx.switchTabwx.reLauchwx.redirectTowx.navigateTowx.navigateBack )等等, 每一个路由API都是有相对应的特定跳转功能 ,在这里我就不赘述了。 微信开发者文档关于路由的知识点 这里我们 项目的需求 是

    2023年04月18日
    浏览(61)
  • 微信小程序中如何携带参数跳转到tabBar页面

    在小程序中使用了tabBar组件之后就不能用wx.navigateTo跳转到tabBar页面了 , 能跳转到tabBar页面的方法有以下两种   但是使用第一种方法时,会因为这种方法在路径后不能携带参数,所以行不通 那么就只能用第二种方法 , 用wx.reLaunch进行跳转 , 地址后跟上自己想要的参数 , 或者用wx

    2024年02月11日
    浏览(72)
  • 微信小程序路由跳转,API调用,页面传值

    wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。 wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。 wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包