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


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 相关文章推荐
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
javascript中this用法实例详解
Apr 06 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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
星际争霸兵种名称对照表
2020/03/04 星际争霸
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
Django 前后台的数据传递的方法
2017/08/08 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
应届本科生推荐信范文
2013/12/25 职场文书
主持人演讲稿范文
2013/12/28 职场文书
市场开发计划书
2014/05/07 职场文书
大学新闻系求职信
2014/06/03 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server