小程序开发:跨页面赋值/getCurrentPages()

一.导读

小程序开发的过程当中,页面跳转之间有着参数传递的烦恼。

前倾回顾:

①.在前面我讲过有URL传递参数,接着在接受页面的onLoad中对参数进行读取。

②.在app.js文件中设置globalData,然后在其他js中通过getApp()的方法取值。

那么本篇要介绍的不是传递而是在当前页面的js对要跳转的页面进行赋值修改。

二.问题所在

我们跳转页面有多种,navigateTo跳转到下一页,比如首页是“登录”,跳转到“注册”,这时候我们注册成功之后需要回到登录的页面,这时候如果使用的是navigateTo跳转的话,则会生成一个新“登录页面”,传递参数的方式用url,这样是否有点麻烦了呢。我们何不直接在注册完之后把具体数据给到上一页,直接赋值,那是不是就需要定位页面呢-----这时候需要的就是getCurrentPages()方法。

三.具体步骤

let pages=getCurrentPages();//当前页面栈
let prevPage=pages[pages.length-2];//上一页
let currPage=pages[pages.length-1];//本页

概念:getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

对页面栈给个简单的解释,我们假设现在在A页面进入到B页面,由于是栈的存储形式,当我们进入A 的时候,A就压进栈中,A页面进入B页面时,B随之而来,但栈进出的原则是先进后出,所以在退出或者返回的时候页面B就会出栈,这就是先进后出。

现在我们从A页面进入到B页面当中去,此时A的下标为0,B的下标为1,通过getCurrentPages()我们得到了页面栈的这个对象之后,可以通过下标获取页。前页面栈的长度为2,就有了,pages[pages.length-2],2-2=0,于是定位到页面栈下标为0的页面就是在上一页(现在处于B页面),那么将pages[pages.length-2]赋值给变量prevPage就能对上一页(A),进行数据的赋值,如下:

prevPage.setData({
      account:account,//对要修改的数据进行赋值
    })

 冒号后的account是在B页面的变量,也就是说用B页面的变量对A页面的变量进行赋值,而这里都是account由于个人开发中运用在注册与登录之间的跳转。注册完好之后就会将注册页面的账号传递到用户登录页面的账号填写框当中,于是就方便了用户。

四.结尾

这是一个不错的办法,方便 了传递数据的麻烦,只要对页面之间的关系清晰,就能够对之后的页面进行赋值。如有错误请指正。

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用 `get` 方法获取数据并将 `imageSrc` 赋值为 `http://localhost:8081/img/AllCommodity/${url}`,但是图片无法正常显示,可能是因为你在使用 `get` 方法获取数据时,数据还没有完全加载完成,导致模板中的 `img` 标签中的 `src` 属性值为 `http://localhost:8081/img/AllCommodity/`,而变量 `url` 的值还未被成功赋值。 为了避免这种情况,你可以在获取数据成功之后,再将 `http://localhost:8081/img/AllCommodity/${url}` 赋值给 `imageSrc`,或者在 `imageSrc` 中直接使用完整的图片路径。 以下是两种解决方法: 1. 在获取数据成功之后,再将 `http://localhost:8081/img/AllCommodity/${url}` 赋值给 `imageSrc`。 ``` <template> <div> <img :src="imageSrc" /> </div> </template> <script> export default { data() { return { imageSrc: '', }; }, async created() { const response = await axios.get('your-api-url'); const url = response.data.url; // 假设获取到的数据格式为 { url: 'example.jpg' } this.imageSrc = `http://localhost:8081/img/AllCommodity/${url}`; }, }; </script> ``` 在这个例子中,我们在获取数据成功之后,将 `http://localhost:8081/img/AllCommodity/${url}` 赋值给了 `imageSrc`。这样在模板中使用时,就不会出现无法正常显示图片的问题了。 2. 在 `imageSrc` 中直接使用完整的图片路径。 ``` <template> <div> <img :src="`http://localhost:8081/img/AllCommodity/${url}`" /> </div> </template> <script> export default { data() { return { url: 'example.jpg', }; }, }; </script> ``` 在这个例子中,我们在 `imageSrc` 中直接使用了完整的图片路径。这样在模板中使用时,也不会出现无法正常显示图片的问题了。 希望这些解决方法可以帮助你解决问题。如果问题仍然存在,请提供更多详细信息,我会尽力帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值