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


Posted in Javascript onNovember 26, 2018

一: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()

效果图同上。

总结

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

Javascript 相关文章推荐
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JS实现拼图游戏
Jan 29 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
ES6 十大特性简介
Dec 09 Javascript
Vue中的methods、watch、computed的区别
Nov 26 #Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 #Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 #Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 #Javascript
vue中tab选项卡的实现思路
Nov 25 #Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 #Javascript
vscode 开发Vue项目的方法步骤
Nov 25 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
简单谈谈favicon
2015/06/10 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
js事件(Event)知识整理
2012/10/11 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python 的AES加密与解密实现
2019/07/09 Python
python数据化运营的重要意义
2019/11/25 Python
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
车间班组长岗位职责
2013/11/13 职场文书
兼职学生的自我评价
2013/11/24 职场文书
音乐器材管理制度
2014/01/31 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
三峡人家导游词
2015/01/31 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
使用pytorch实现线性回归
2021/04/11 Python