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


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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
解析php中获取url与物理路径的总结
2013/06/21 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python 利用toapi库自动生成api
2020/10/19 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
《中国的气候》教学反思
2014/02/23 职场文书
2014春晚主持词
2014/03/25 职场文书
学校工作推荐信范文
2014/07/11 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
Golang中异常处理机制详解
2021/06/08 Golang