微信小程序跳转传参路径拼接与通过ID跳转对应页面

微信小程序传参路径拼接

这种的前后端交接是这种是formdata格式可以这种传

使用路由跳转url带值传值 https://blog.csdn.net/qq_43201350/article/details/108508791 navigator标签传值 https://blog.csdn.net/qq_31383345/article/details/52795212
缓存设置传值 https://blog.csdn.net/Cituses/article/details/79565433 全局App对象传值 https://blog.csdn.net/qq_39109182/article/details/96433444
小程序通过data-xxxx的方式进行传值 https://blog.csdn.net/m0_38134431/article/details/88788032

页面之间跳转并带参传递(url带参传递)

效果图

在这里插入图片描述
这个是使用路由跳转url带值传值案例
这个是+拼接 有兴趣的可以看下es6的拼接 ``

代码

A页面
wxml

<view>
<view>我是a页面</view>
<text>你的名字{
    
    {
    
    name}}</text>
</view>
<view>
<text>你的年龄{
    
    {
    
    age}}</text>
</view>
<button bindtap='buttonListener'>数据跳转</button>
 

js

Page({
    
    
 
  /**
   * 页面的初始数据
   */
  data: {
    
    
    name:'Tom',
    age:'12'
  
  },
 
  buttonListener:function(){
    
    
    let that = this
    wx.navigateTo({
    
    
      url: '/pages/2/2?nameData=' + that.data.name + '&ageData=' + that.data.age
      // 一般传多个参的话可以拼接 拼接用&来进行拼接   只传1个的话之间?拼接           大于1个用&拼接
      // ?跟的是你自定义的属性 这个页面定义这个属性 下个页面也要保持一致
    })
  }
})

B页面
wxml

<view>
<view>我是b页面</view>
<text>姓名为:{
    
    {
    
    name}}</text>
</view>
<view>
<text>年龄为:{
    
    {
    
    age}}</text>
</view>
  

js


Page({
    
    
 
  /**
   * 页面的初始数据
   */
  data: {
    
    
    name:null,
    age:null
  
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    var that = this
    that.setData({
    
    
      name:options.nameData,
      age:options.ageData
    })
  
  }
})

在这里插入图片描述

页面之间跳转并带参传递(动态参)

通过ID跳转不同页面

参考1

参考2
参考3
参考4 这个有源码参考

猜你喜欢

转载自blog.csdn.net/m0_53912016/article/details/113802182
今日推荐