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


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 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
另类调用flash无须激活的方法
2006/12/27 Javascript
javascript的对话框详解与参数
2007/03/08 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
extjs render 用法介绍
2013/09/11 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
大学总结自我鉴定
2014/01/18 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书