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

 更新时间:2018年11月26日 09:41:15   作者:超超_1号  
这篇文章主要介绍了微信小程序-页面间值传递的2种方法,每种方法通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

一:url带参数传递

          与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面。

index.wxml:

<!--index.wxml-->
<view class="container">
 <!-- 使用navigator组件 -->
 <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>
</view>

demo.js

// pages/demo/demo.js
Page({

 data: {
 title:''
 },

 onLoad: function (options) {
 console.log(options) //打印options,可以看到title的值可以获取到
 this.setData({
 title:options.title //为页面中title赋值
 })
 },
})

demo.wxml

<!--pages/demo/demo.wxml-->
<view class='container'>
 {{title}}
</view>

效果图:            

二:将值存入全局变量

         我们同样可以将需要的值存入全局变量中,在需要的地方直接引用就好了。

app.js

//app.js
App({
 globalData: {}
})

index.wxml

<!--index.wxml-->
<!-- 点击触发goto_demo函数 -->
<view class="container" bindtap='goto_demo'> 
 title=参数传递
</view>

index.js

//index.js
//获取应用实例
const app = getApp()
Page({
 data: {
 title:'参数传递'
 },
 goto_demo: function() {
 app.globalData.title = this.data.title
 wx.navigateTo({
 url: '../demo/demo',
 })
 }
})

demo.js

// pages/demo/demo.js
//获取应用实例
const app = getApp()
Page({
 data: {
 title:''
 },
 onLoad: function (options) {
 console.log(app.globalData.title) //打印options,可以看到title的值可以获取到
 this.setData({
 title: app.globalData.title //为页面中title赋值
 })
 },
})

需要用到全局变量时记得要先获取应用实例:const app = getApp()

效果图同上。

总结

以上所述是小编给大家介绍的微信小程序页面间值传递的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js实现获取最新本周周一开始的日期(单周日历卡)

    js实现获取最新本周周一开始的日期(单周日历卡)

    这篇文章主要为大家介绍了js实现获取最新本周周一开始的日期(单周日历卡)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • JavaScript中使用Async实现异步控制

    JavaScript中使用Async实现异步控制

    async提供了很多函数用于异步流程控制,下面是async核心的几个函数,大家通过本文学习下,对使用async 实现异步控制相关知识,感兴趣的朋友一起看看吧
    2017-08-08
  • 常用DOM整理

    常用DOM整理

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”。
    2015-06-06
  • JS实现的简单鼠标跟随DiV层效果完整实例

    JS实现的简单鼠标跟随DiV层效果完整实例

    这篇文章主要介绍了JS实现的简单鼠标跟随DiV层效果,涉及JavaScript基于时间函数动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript函数封装随机颜色验证码(完整代码)

    JavaScript函数封装随机颜色验证码(完整代码)

    这篇文章主要介绍了JavaScript函数封装随机颜色验证码(完整代码),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 微信小程序wx:for 的使用及wx:key绑定两种方式

    微信小程序wx:for 的使用及wx:key绑定两种方式

    wx:for是微信小程序中的一个列表渲染指令,用于循环渲染一个数组或对象中的数据,它类似于JavaScript中的for循环,可以根据数据的长度自动渲染相应的列表项,本文给大家介绍微信小程序wx:for 的使用及wx:key绑定两种方式,感兴趣的朋友一起看看吧
    2023-12-12
  • Bootstrap字体图标无法正常显示的解决方法

    Bootstrap字体图标无法正常显示的解决方法

    这篇文章主要为大家详细介绍了Bootstrap字体图标无法正常显示的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 前端防止用户重复提交js实现代码示例

    前端防止用户重复提交js实现代码示例

    这篇文章主要给大家介绍了关于前端防止用户重复提交js实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
    2018-09-09
  • 基于js实现的图片拖拽排序源码实例

    基于js实现的图片拖拽排序源码实例

    这篇文章主要给大家介绍了关于如何基于js实现的图片拖拽排序的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • bootstrap轮播图示例代码分享

    bootstrap轮播图示例代码分享

    这篇文章主要为大家详细介绍了bootstrap轮播图示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论