微信小程序之页面带参跳转

页面跳转参数传递有很多中方式，这里只说一种非常简单的。

一、单一参数传递

第一个页面跳转代码：

  Click: function () {console.log("我来啦")let name = '传递的数据'; // 跳转传参的参数wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值url: '../test2/my?name=' + '我就是要传递的数据'//此处注意中文符号与引文符号的？})

第二个.JS页面的接收代码：

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options.name)this.setData({// 把从index页面获取到的属性值赋给详情页的my，供详情页使用name:options.name})},

在第二个WXML页面渲染出数据

<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>

二、多参数传递

第一个跳转页面代码：

Click: function () {console.log("我来啦")var name = '传递的数据'; // 跳转传参的参数var name2 = '传递的数据2';var name3 = '传递的数据3';wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值url: '../test2/my?name=' + name + "&name2=" + name2+ "&name3=" + name3 //此处注意中文符号与引文符号的？})

跳转后的.JS页面中接收

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options.name)this.setData({// 把从index页面获取到的属性值赋给详情页的my，供详情页使用name:options.name,name2:options.name2,name3:options.name3})      },

跳转后的.WXML页面

<!--pages/test2/my.wxml-->
<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>
<view> 显示内容：{{name2}}</view>
<view> 显示内容：{{name3}}</view>

三、带参数传参长度超过限制被截取时，需要使用encode ,

例如：图片

第一个.js页面代码

// xxxx是跳转传照片的数组，先转字符串，再encode
let xxxx = posters.toString()
console.log( encodeURIComponent(xxxx))
wx.navigateTo({url: '../test2/my?posters=' + encodeURIComponent(xxxx)
})

第二个.js页面接收代码

// onload接收传参数据
onLoad: function (options) {let xxxx = decodeURIComponent(options.posters) // 先decode再把字符串转数组let photo = xxxx.split(",");console.log(photo)this.setData({photo: photor})},

四、switchTab无法携带参数跳转

wx.switchTab({url: '../test2/my'
})

DEMO

-END

微信小程序之页面带参跳转相关推荐

微信小程序路由，带参数跳转及接收
微信小程序的跳转形式有多种 1.wx.navigateTo 保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面带参数跳转,以下都是一样. wx.navigateTo({url: ...
微信小程序原生开发技巧及跳坑心得
常用功能 1.事件带参在微信小程序中,给事件的回调函数内部传递参数不是通过函数调用传递实参的方式传递的,而是通过在view上绑定属性,然后在回调函数的事件对象的currentTarget属性中的da ...
微信小程序实现界面之间的跳转
说到微信小程序之间的跳转主要归为三类: 1,跳转到指定页面,保存当前页面wx.navigateTo 2,跳转到指定页面,关闭当前页面 wx.redirectTo 3,返回之前页面,跳转之前的页面wx. ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
微信小程序：页面跳转时传递数据到另一个页面
一.功能描述页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
微信小程序web-view环境下H5跳转小程序页面方法
web-view页面内的H5页面跳转至小程序页面一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰 ...
扫描普通二维码跳转到微信小程序指定页面
登陆微信公众平台 - 开发管理 - 开发设置添加如下配置: 二维码规则这里写上一个自己拥有的域名,如我这里写了https://wa.al.com.cn是我的域名地址,wechat/test是我的服务 ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...

微信小程序之页面带参跳转

微信小程序之页面带参跳转相关推荐

最新文章

热门文章