微信小程序页面常见的传参方式

微信小程序页面常见的传参方式

今天一个朋友去面试，问到了小程序传参的问题，看似很简单的问题而且还天天写，但是就是记不住问到说不出来。

HHX:
兄弟再不
小程序传值传参，面试时候怎么回答
还有几种跳转方式
我都不知道咋好
还有组件之间的传值
还有什么全局传值
卧槽，都蒙蔽了，问的我
每次都忘了传参，还有跳转方式的区别
还有就是有跳转，什么关闭当前页面

一、页面间参数传递

常见功能比如：列表页点击跳转到具体的详情页面

1.通过页面url拼接传递

小程序中我们通过 wx.navigateTo()方法或 组件进行页面跳转，再跳转前可以将需要传递的参数拼接到url后面。

传递参数：

// 方法一：wx.navigateTo() 方法

<view>
  <text bindtap='goDetail' data-id="1">元素1</text>
</view>

Page({
  goDetail() {
    var curId = e.currentTarget.dataset.id;
 
    wx.navigateTo({
      url: '/pages/detail/detail?id='+curId
    });
  },
})


// 方法二：<navigator> 组件方法
<navigator url="/pages/detail/detail?id=1">
    <view>
      <text>元素1</text>
    </view>
</navigator> 

接收参数：

Page({
  onLoad (query) {
    // 这里的 query 将是 url 中，问号(?) 后面的键值对组成的一个对象 
    this.setData({
      curId: query.id
    });
  }
});

2.通过全局变量getApp()传递

小程序可以通过 getApp() 这个全局函数获取到当前小程序的实例；
在开发之前，我们可以将全局的数据放到根目录下的 app.js 文件，然后在其他页面可以通过 getApp() 来获取这些数据。

我们一般把传递数据多，可能要跳转好几个页面的数据放在全局变量中传递。

传递参数：

<view>
  <text bindtap='goDetail' data-id="1">元素1</text>
</view>

const app = getApp();
Page({
  goDetail() {
    var curId = e.currentTarget.dataset.id;
    app.detail = {
      id: curId
    };
 
    wx.navigateTo({
      url: '/pages/detail/detail'
    });
  },
})

接收参数：

const app = getApp();
Page({
  onLoad () {
    this.setData({
      curId: app.detail.id
    });
  }
});

3.将数据放入本地缓存中

缓存的数据，我们可以在任何页面随意调用，有点类似全局变量，只要设置了一次之后，在其他页面都可以随意调用；

我们一般只把一些长期不会改变的数据放在本地缓存中。

传递参数：

Page({
  onLoad () {
    wx.setStorage({
      key: "authData",
      data: {
        appId: 'xxxxx'
      }
    })
  }
})

接收参数：

Page({
  onLoad () {
    wx.getStorage({
      key: 'authData',
      success: function (res) {
        console.log(res.data)
      }
    })
  }
}); 

二、事件函数参数传递

在小程序中触发事件调用函数时，不能像 js 那样使用圆括号 () 来传递参数，这个时候可以使用 dataset 属性把需要传递的参数放到组件中：

// index.wxml
<view>
  <text bindtap='changeName' data-name="管理员">{{name}}</text>
</view>

// index.js
Page({
  data: {
    name: ''
  },
  changeName (e) {
    this.setData({
      name: e.currentTarget.dataset.name
    })
  }
});

三、组件传参

实际开发中需要可能很复杂，比如封装组件、模板，对于组件的传参方式很复杂具体可参考官方文档。微信官方文档

最后我还是得哔哔一句，像小程序、vue等都是基于MVVM思想，这不同于传统的html、js方式一定要改变思想、思维方式，遇到复杂的需求才能选择适合的解决方案。