草庐IT

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

嘻嘻的妙妙屋 2023-04-17 原文

场景

在一个列表中点击了某个 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 组件进行编码。 需要编码传送,解码接收,这样就可以解决字符串长度的问题。

有关【微信小程序】页面跳转传递参数(实体,对象)的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后,我想到了这种方法,可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法,但它确实有效。有没有人有更好的建议,或者这是一个很好的方法?#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe? - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗?我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe,无需等待进程完成是否有任何ruby​​gems会支持我的问题? 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  4. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码,如下所示:Something.createdo|x|x.foo=barend我想编写一个测试,它使用double代替block参数x,这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗? 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  5. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单,其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在?solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  6. Ruby 写入和读取对象到文件 - 2

    好的,所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象?所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是,我该如何再次将这个id变回一个对象?我知道我可以自己挑选信息并制作一个接受该信

  7. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  8. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样?我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗? 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时,它将引发ArgumentError。defmy_method(number)

  9. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  10. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议?谢谢,马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单,因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法,但您没有调

随机推荐