手机版

微信小程序页面间价值传递的两种方式

时间:2021-08-28 来源:互联网 编辑:宝哥软件园 浏览:

1.url与参数一起传递

像前端语言一样,小程序页面之间的传输可以通过使用参数跟踪路由url来完成,这些参数将在路由的同时传输到新页面。

index.wxml:

!-index . wxml-view class=' container '!-使用导航器组件-导航器URL='./演示/演示?Title=参数传递' title=参数传递/navigator/viewdemo.js

//pages/demo/demo . js page({ data : { title : ' ' },onload : function(options){ console . log(options)//print options,可以看到title的值可以得到这个. setdata({ title : options . title//为页面中的标题赋值})},}) demo.wxml。

!-pages/demo/demo . wxml-view class=' container ' { title } }/view renders:

二:将值存储在全局变量中

我们还可以将所需的值存储在全局变量中,只需在需要的地方直接引用它。

app.js

//app . JSapp({ GlobalData: } })index . wxml

!- index.wxml -!-单击以触发goto_demo函数-view class=' container ' bind tap=' goto _ demo ' title=参数传递/viewindex.js。

//index.js//get应用程序实例const app=getapp()page({ data : { title : '参数传递' },goto _ demo:function () {app。global data . title=this . data . title wx . navigateto({ URL 3360 ')

//pages/demo/demo.js//获取应用程序实例constapp=getapp()页面({data: {title:''},Onload:函数(选项){ console . log(app . global data . title)//打印选项。可以看到,this.setdata可以从title的值中获得({ title : app . global data . title//为页面中的标题赋值})。})当需要使用全局变量时,记得先获取应用实例:const app=getApp()

渲染同上。

摘要

以上是边肖介绍的两种微信小程序页面间价值传递的方法。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:微信小程序页面间价值传递的两种方式是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。