微信小程序页面跳转三种方式(带有中文的参数)

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

1.wx.navigateTo 传参示例代码(无中文):

// 在当前页面进行跳转,同时传递参数 param1 和 param2
wx.navigateTo({
  url: '/pages/myPage/myPage?param1=value1&param2=value2'
})

 1.wx.navigateTo 传参示例代码(有中文):

 传:

wx.navigateTo({
  url: '/pages/detail/detail?id=' + encodeURIComponent("带中文的参数")       
})

 接:

 onLoad: function (options) {
    console.log(decodeURIComponent(options.id)) // 输出 "带中文的参数"
 }

 2.wx.redirectTo 传参示例代码:

// 关闭当前页面,直接打开 pages/index/index 页面,并传递参数 id=1
wx.redirectTo({
  url: '/pages/index/index?id=1'
})

 3.wx.reLaunch 传参示例代码:

// 关闭所有页面,直接打开 pages/login/login 页面,并传递参数 username='John' 和 password='123'
wx.reLaunch({
  url: '/pages/login/login?username=John&password=123'
})

在这些示例代码中,url 参数指定了需要打开的页面路径,同时在路径后面通过 ? 带上需要传递的参数。在被导航到的页面中可以通过 onLoad 方法获取传递过来的参数。例如,在 myPage 页面中可以这样获取传递过来的参数值:

onLoad: function(options) {
  console.log(options.param1) // 输出 value1
  console.log(options.param2) // 输出 value2
}

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

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

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

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

相关文章

  • 微信小程序中的两种页面跳转方式

    方式一(声明式导航): 利用navigator/navigator url:要跳转页面的地址 open-type:要打开的页面的类型 (不在底部导航中添加的为非导航页面,在的为导航页面)  非导航页面跳转过去后左上角会出现返回箭头,导航页面则没有 index页面   home页面  方式二(编程式导航): 通过触摸事件

    2024年01月19日
    浏览(82)
  • 【微信小程序】通过使用 wx.navigateTo方法进行页面跳转,跳转后的页面中通过一些方式回传值给原页面

    以下是几种常见的回传值的方式: 使用 wx.navigateTo 方法传递参数: 在跳转时,可以在目标页面的 URL 中携带参数,然后在目标页面的 onLoad 方法中获取参数,并在目标页面中进行处理。例如: 在目标页面的 onLoad 方法中获取参数: 使用 wx.navigateBack 方法回传值: 在目标页面中

    2024年02月13日
    浏览(61)
  • H5页面跳转小程序的三种方式

    实际开发中,小程序和H5往往有很多业务场景需要来回跳转,这里主要介绍三种跳转方式供大家参考。 场景:微信小程序登录有时候需要和公众号进行绑定,获取公众号code和appid传给后台进行绑定 该接口用于获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起

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

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

    2024年02月12日
    浏览(100)
  • 微信小程序:跳转页面

    实际调用需要根据自己业务实际情况决定,虽然各种方式一定程度上能减少内存损耗,但是业务上面流转优化才是最终要满足的,一定要从业务流转去优化去考虑,不要为了性能增加了流转复杂度 1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面。可以通过调用  wx.na

    2024年02月03日
    浏览(67)
  • 微信小程序之页面跳转

    1、wx.navigateTo( ): 功能:保留当前页面,跳转到应用内的某个页面。 特点:跳转后原页面保留在后台,可以通过 wx.navigateBack() 返回到原页面,新页面显示在原页面之上,有返回按钮。 2、wx.redirectTo( ): 功能:关闭当前页面,跳转到应用内的另一个页面。 特点:跳转后原页面

    2024年04月23日
    浏览(60)
  • 微信小程序(四)页面跳转

    注释很详细,直接上代码 上一篇 新增内容 1.相对路径页面跳转 2. 绝对路径页面跳转 index.wxml 效果演示: 跳转之后 下一篇

    2024年01月19日
    浏览(49)
  • 微信小程序如何跳转页面

    微信小程序跳转页面可以通过 wx.navigateTo 函数来实现。具体步骤如下: 首先,在app.json文件中配置需要跳转的目标页面,例如: 在原始页面的js文件中,调用 wx.navigateTo 函数,跳转到目标页面,例如: 其中, url 参数指定要跳转的目标页面路径。 如果要在目标页面接收传递参

    2024年02月09日
    浏览(53)
  • 微信小程序页面跳转方法

    微信小程序页面跳转的各种方法总结,备查。 保留当前页面,跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头,点击后可返回原本页面。示例代码: 使用场景 适用于需要跳转到新页面并保留原页面状态的情况,比如从列表

    2024年02月04日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包