微信小程序实现两个页面传值的方法分析


Posted in Javascript onDecember 11, 2018

本文实例讲述了微信小程序实现两个页面传值的方法。分享给大家供大家参考,具体如下:

需求:发送页面通过url传值,接收页面获取值。

发送页面的js

var nowid='10';
wx.navigateTo({
  url: '../index/index?id='+nowid,
})

或者发送页面用navigate 组件:

<navigate url="xxx?id=10"></navigate >

如果id是page里面data的数据。是动态的,那么可以写成:

<navigate url="xxx?id={{pid}}"></navigate >

这种方式也是通过接收页面的onload来获取id的

接收页面的js

在接收页面onload的函数里就可以获取到值:

onLoad: function (options) {
  var _obj=options.id;
  console.log(_obj)
}

(1) 接收页面获取到的 options 就是发送页面的 url 中 问号后面传过来的值

(2) 如果传过来的值是一个json对象,那么需要现在发送页面把这个对象JSON.Stringfy转化成字符串,然后 接收页面 再使用JSON.parse转化成json对象就行。

还有种方法是通过小程序的本地存储 wx.setStorage()等API接口来实现-----》发送页面存入,接收页面在接受。当然,不需要的时候可以把存入的数据删掉

还有一种方式就是:在app.js中设置数据,然后其它页面在需要的时候,就可以通过  app.数据等形式来获取。当然,需要在接收数据的页面声明:

var app=getApp();

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
js获取form的方法
May 06 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
如何让node运行es6模块文件及其原理详解
Dec 11 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python3中sys.argv的实例用法
2020/04/24 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
后勤服务中心总经理工作职责
2014/03/03 职场文书
cf战队收人广告词
2014/03/14 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
大学新学期计划书
2014/04/28 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
法学自荐信
2014/06/20 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
公司年底活动方案
2014/08/17 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
收入证明范本
2015/06/12 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL