微信小程序传参解决方案

ゝ一纸荒年。 2024-04-18 17:33 82阅读 0赞

最近要开发一个公司内部使用的微信小程序，但是遇到页面传参的时候遇见了问题。

微信小程序中只有**onload**是可以接受参数的，而且官方文档中说的是，只有第一次加载的时候才会触发，导致我认为onLoad这个方法可能用不太上，因为页面复用之后，只加载一次，肯定是无法应用。

于是接下来我就考虑使用全局变量，来传递参数，然后再onShow里面用来获取全局变量，这样应该会得到效果。

但是，直到我发现，其实，onLoad方法其实在我们点击左上角的返回按钮之后再次进入，会重新执行，好吧，怪我没有仔细阅读官方文档，而且想一下，也不可能出现一个只能执行一次的智障方法啊。

上面全是废话，下面让我用代码来实践。

# 1、使用onLoad #

跳转页面

queryMerOfSales: function (e){
        var merId = e.currentTarget.dataset.number;
        app.globalData.merDate.merId = merId;
        console.log(merId);
        wx.navigateTo({
          url: '/pages/merchantsDetail/merchantsDetail?merId=' + merId,
          success: function () {
            console.log('跳转到/pages/merchantsDetail/merchantsDetail成功');
          }
        })
      }

页面获取值：

onLoad: function(e){
        console.log("pages/merchantsDetail/merchantsDetail---->ononLoad事件触发");
        console.log("获取参数为：e.merId: " + e.merId);
    },

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqeTk1MDkxNA_size_16_color_FFFFFF_t_70][]

实践后，如果点击页面左上角的返回按键，再次进入页面，确实会执行onLoad事件，那么为什么呢？

其实官方文档已经给出了我们原因

![20190911092418166.png][]

以及我们每次打开新页面的跳转方法[wx.navigateTo][]，也给出了路由方式

![20190911092642609.png][]

所以只怪自己不细心，唉。如果想看详细信息，请自行百度微信开发文档，或者[点击这里][Link 1]

# 2、使用全局变量 #

这种的话，就比较简单了，而且如果已经有了上面的onLoad，我感觉这种方式就很少会使用了吧。

获取全局变量

const app = getApp()

更改参数

var merId = e.currentTarget.dataset.number;
        app.globalData.merDate.merId = merId;

获取参数

merId = app.globalData.merDate.merId;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqeTk1MDkxNA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c9bd212ad1514d2a91f390e355fa047e.png
[20190911092418166.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8a4a20b28720400e8b985c1ce12fcb15.png
[wx.navigateTo]: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
[20190911092642609.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/925f4108880c485c8ba78dcda26411d6.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html