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


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 对象模型 执行模型
Dec 06 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
Javascript的无new构建实例详解
May 15 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
浅谈Express异步进化史
Sep 09 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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
在html文件中也可以执行php语句的方法
2015/04/09 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python切换pip安装源的方法详解
2016/11/18 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python容器类型公共方法总结
2020/08/19 Python
Python random模块的使用示例
2020/10/10 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
一套SQL笔试题
2016/08/14 面试题
DataReader和DataSet的异同
2014/12/31 面试题
外贸业务员求职信范文
2013/12/12 职场文书
高一地理教学反思
2014/01/18 职场文书
项目申请汇报材料
2014/08/16 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
买房协议书范本
2014/10/23 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
python元组打包和解包过程详解
2021/08/02 Python
Redis的字符串是如何实现的
2021/10/24 Redis