微信小程序页面跳转传递参数(实体,对象)

Posted 嘻嘻的妙妙屋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序页面跳转传递参数(实体,对象)相关的知识,希望对你有一定的参考价值。

场景

在一个列表中点击了某个 item,跳转到详情界面,那么我就需要把 item 的实体数据从列表页面传递到详情页面。

实现方法

那么我们来看看微信小程序给我们提供的API:

这里大家可以清楚看到 api 中说到的如何传递参数,其实它这里指的参数仅仅是一些普通的数据类型,我们要传递的实体是 object 类型,那么我们需要先把实体转成 string 类型进行传递,在详情页面接受到在逆向转成实体,如下面这段示例:

/**
 * 进入文章详情界面
 */
gotoArticleDetail: function (event) 
  // 拿到点击的index下标
  const index = event.currentTarget.dataset.index;
  // 将对象转为string
  const details = JSON.stringify(this.data.ArticleList[index]);
  // console.log('details', details);
  // 当前要跳转到另一个界面,但是会保留现有界面
  wx.navigateTo(
    url: `../article-detail/article-detail?details=$details`
  );
,

这里我们用 JSON.stringify() 函数将实体转成 string 类型进行传递,那么我们在看看接收参数:

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) 
  // console.log(options)
  const details = JSON.parse(options.details);
  console.log('details', details);
  this.setData(
    ArticleDetails: this.data.ArticleDetails.concat(details)
  );
  console.log('details', this.data.ArticleDetails);
,

这里我们在生命周期函数 onLoad 中获取我们传递的实体转的字符串,然后用 JSON.parse() 转成实体,最后赋值给我们的全局变量。

如果我们想要传递 Json 对象,也可以通过这样的方式进行传递。

遇到问题

小程序经常有跳转传参的功能,一般带一个 id 或者 name,title 之类很短的字段;但是如果带很多数据的话,很多人喜欢使用 json 转换,传参传一个对象过去,但这样仅限于很少的字段,不然就会出现报错:SyntaxError: Unexpected end of JSON input

产生原因

这是因为 navigateTo 方法携带的参数是有字符串长度限制的,超出部分就无法携带了,这就回导致传递过去的对象不闭合,使用 json 解析的时候就产生了报错。

解决方法

1、如果业务场景是从列表页面跳转到详情页面,那么推荐只携带少量字段,如 id,然后在详情页面使用 id 请求详情,这样就不用烦心字符长度超出的问题了(强烈推荐)。

2、如果不想请求新的数据,就用列表本身的字段,但是字符串超出的话,可以考虑下面方法。

使用 decodeURIComponent 和 encodeURIComponent 函数进行操作;

列表页面代码如下:

/**
 * 进入文章详情界面
 */
gotoArticleDetail: function (event) 
  // 拿到点击的index下标
  const index = event.currentTarget.dataset.index;
  // 将对象转为string
  const details = encodeURIComponent(JSON.stringify(this.data.ArticleList[index]));
  // console.log('details', details);
  // 当前要跳转到另一个界面,但是会保留现有界面
  wx.navigateTo(
    url: `../article-detail/article-detail?details=$details`
  );
,

详情页面代码:

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) 
  // console.log(options)
  const details = JSON.parse(decodeURIComponent(options.details));
  console.log('details', details);
  this.setData(
    ArticleDetails: this.data.ArticleDetails.concat(details)
  );
  console.log('details', this.data.ArticleDetails);
,

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 需要编码传送,解码接收,这样就可以解决字符串长度的问题。

以上是关于微信小程序页面跳转传递参数(实体,对象)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序页面跳转url传参,对象、数据过长、特殊字符问题

微信小程序页面跳转参数怎么传递

微信小程序页面返回传递参数

微信小程序详解——页面之间的跳转方式路由和参数传递

微信小程序 页面跳转navigator与传递参数

微信小程序--页面的生命周期和参数传递