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


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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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
php基础知识:类与对象(1)
2006/12/13 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php cli配置文件问题分析
2015/10/15 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
python动态加载变量示例分享
2014/02/17 Python
python实现探测socket和web服务示例
2014/03/28 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python通过format函数格式化显示值
2020/10/17 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
简爱电影观后感
2015/06/10 职场文书
发票退票证明
2015/06/24 职场文书
学校远程教育工作总结
2015/08/11 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang