微信小程序 - 携带本页面参数跳转到其他页面（不同页面传值）

た入场券 2023-03-02 13:29 73阅读 0赞

## 前言 ##

这个需求有很多种实现方式，这里只谈 **`路由跳转携带参数`** 的 2 种方式。

// 假设要从 A页面 带参跳转到 B页面
    
    【A页面】 → 【B页面】

## 第一种 ##

通过绑定 `事件对象自定义属性传参`，即 `data-*`，不懂的话请移步 [这篇文章][Link 1]。

--------------------

**第一步（A页面）：本页面绑定数据并由路由获取**

<button bindtap="go" data-flag="{ { data }}" >
    确定跳转
    </button>

// 当前文件：A.js
    
    go: function (e){ //event对象
    	
    	// 这个就是 flag 值(要带走的参数)
    	let flag = e.currentTarget.dataset.flag
    	
    	// 路由跳转并带参数(跳转到 B 页面)
    	wx.navigateTo({ 
          url: '/pages/B?flag =' + flag 
        })
    }

**第二步（B页面）：利用 options 对象接收，然后就可以使用 A页面 的 flag 了**

// 当前文件：B.js
    
    data: { 
    	flag: ''//准备接收
    },
    
     /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { //数据在options对象身上
    	this.setData({ //这里必须使用setDate(不懂请查阅api问昂)
          flag: options.flag
        })
      },

这时，传递过来的数据就挂载到 `data` 身上了，可在页面直接使用。

## 第二种 ##

直接跳转。这种方式适合携带参数较少且不复杂的数据。

> 有了前面的基础，这里就直接放代码了，相信都看得懂。

**接收页面 JS：**

data: { 
    	id:'',
    	title:''
    },
    
    onLoad: function (options) { 
        this.setData({ 
          id: options.id,
          title: options.title，
        })
      },

## 关于参数 ##

携带多个且复杂的参数，最好以下面的形式写，但 `ES6 ${变量}` 测试不行，也不知道为什么。  
![在这里插入图片描述][20200731195412144.png]

[Link 1]: https://blog.csdn.net/weixin_44198965/article/details/107591993
[20200731195412144.png]: /images/20230208/5309bc723f574fe1892bb77b969eec32.png