微信小程序获取路径参数

电玩女神 2021-09-15 10:40 1115阅读 0赞

微信小程序的路径参数获取跟网站页面路径参数的获取方式有点不一样。

网站页面路径参数的获取方式可参考文章：[https://blog.csdn.net/Charles\_Tian/article/details/78704908][https_blog.csdn.net_Charles_Tian_article_details_78704908]

微信小程序的路径参数获取方式参考链接：[https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html][https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html]

微信小程序的路径参数获取方式示例如下：

wxml代码如下：

js代码如下：

myHistory: function(){
          var userInfo = this.data.userInfo;//userInfo是官网里提供的API，即getUserInfo这个方法就可获取用户的头像昵称等
          var nickName = userInfo.nickName;
          var openid = this.data.openid;//这个openid是用户在登录后，后台会返回的数据，前端进行处理获取后存进setData即可，这里是在setData里取的值。
          console.log(openid)
          if (openid == '' || openid == null ||openid == 'undefined'){
            wx.showToast({
              title: '您还未登录，暂获取不到您的记录',
              icon: 'none'
            })
            return
          }else{
            wx.navigateTo({
              url: 'history?openid=' + openid + '&nickName=' + nickName,//这里是将参数连接在路径的后面
            })
          }
        },

上述代码中主要的是函数里的wx.navigateTo的url部分，这是存路径参数的方式，接下来是取路径参数方法

下面是history页面获取路径参数的方法：

wxml代码如下：

<view class='container'>
      <text class='Title'>{
       {nickName}} 的学习清单:</text>
    </view>

js代码如下：

Page({
      data: {
        nickName: null,
      },
      onLoad: function (options) {
        let openid = options.openid;
        let nickName = options.nickName;//就用这样的方式即可把路径参数的值获取到了，非常方便
        console.log(options)
        console.log(options.openid)
        console.log(options.nickName)
        this.setData({
          openid: openid,
          nickName: nickName,
        })    
      },
    })

上述代码中的三行打印命令输出分别为如下数据：

![70][]

从上面可以看出，微信小程序把获取路径参数的方式极大的简便了，但博主希望的是学习者不仅要学会用，还要明白它的原理，这样才能提升自己，所以，大家应该还要线下去学习onload方法里的options具体是怎么实现的。

[https_blog.csdn.net_Charles_Tian_article_details_78704908]: https://blog.csdn.net/Charles_Tian/article/details/78704908
[https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html
[70]: /images/20210522/7af692cc0185484a8d6263576478597c.png