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


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学习笔记6 prototype的提出
Jan 11 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
JSONP基础知识详解
Mar 19 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
浅析Python编写函数装饰器
2016/03/18 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python爬虫基础之urllib的使用
2020/12/31 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
《爱如茉莉》教后反思
2014/04/12 职场文书
人事任命书怎么写
2014/06/05 职场文书
行政求职信
2014/07/04 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB