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

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

需求：发送页面通过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();

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

赞 (0)

相关推荐

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全

  • 微信小程序 传值取值的几种方法总结

    微信小程序 传值取值的几种方法总结

    微信小程序 传值取值 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l

  • 微信小程序自定义组件封装及父子间组件传值的方法

    首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

  • 微信小程序页面间传值与页面取值操作实例分析

    本文实例讲述了微信小程序页面间传值与页面取值操作.分享给大家供大家参考,具体如下: 微信小程序页面间传值 1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值, 实例1: pageSkip :function(){ wx.navigateTo({ url: '/page/login/facte?shopsName='+this.data.shopsName, }) }, 实例2: pageSkip :function(){ wx.navigateTo({ url: '/page

  • 微信小程序页面传值实例分析

    微信小程序页面传值实例分析

    微信小程序页面传值实例分析 最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值 刚开始使用路径传参解决,但是众所周知: 各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0 :url最大长度2083个字符,超过最大长度后无法提交. IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符. firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交. Oper

  • 微信小程序自定义组件传值 页面和组件相互传数据操作示例

    本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作.分享给大家供大家参考,具体如下: 要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫: 用组件事件 triggerEvent! 首先,在页面中定义组件 ,json文件中记得加上: { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后,index.w

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 微信小程序 页面传值详解

    微信小程序 页面传值详解

    微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能

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

    本文实例讲述了微信小程序实现两个页面传值的方法.分享给大家供大家参考,具体如下: 需求:发送页面通过url传值,接收页面获取值. 发送页面的js var nowid='10'; wx.navigateTo({ url: '../index/index?id='+nowid, }) 或者发送页面用navigate 组件: <navigate url="xxx?id=10"></navigate > 如果id是page里面data的数据.是动态的,那么可以写成: &

  • 微信小程序实现动态设置页面标题的方法【附源码下载】

    微信小程序实现动态设置页面标题的方法【附源码下载】

    本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g

  • 微信小程序比较两个数大小的实现方法

    微信小程序比较两个数大小的实现方法

    目录 效果图 wxml代码 wxss代码 index.js代码 总结 效果图 wxml代码 <!--index.wxml--> <view class="demo-box"> <text class="title">请输入第一个数字:</text> <input type="number" bindchange='num1change'/> </view> <view

  • 微信小程序实现滑动切换自定义页码的方法分析

    微信小程序实现滑动切换自定义页码的方法分析

    本文实例讲述了微信小程序实现滑动切换自定义页码的方法.分享给大家供大家参考,具体如下: 效果如下: 这里三个图片使用了swiper组件进行轮播,下方的页码数字1.2.3会随着图片的切换变动位置 在微信小程序中我们是无法操作dom的,那么 var div = document.getElementById('id'); div.setAttribute("class", "className"); 这种方式实现. 然后我们可以考虑使用hidden或者wx:if的方式,

  • 微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 微信小程序：数据存储、传值、取值详解

    小程序界面传值 父级界面:A界面 子级界面:B界面 一.url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面 用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator标签传值 <navigator url="/page/index/index?id=110" >传值&

  • 微信小程序学习笔记之页面配置与路由方式

    最近在学习回顾小程序的开发,将一些学习结果做个笔记.参考微信小程序官方文档:developers.weixin.qq.com/miniprogram- 一.小程序配置 1.全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. // 示例 { "pages": [ "pages/index/index", "pages/logs/index" ], &q

  • 微信小程序如何保证每个页面都已经登陆详解

    目录 现状 解决方案 进一步解决方案 最后 现状 一个微信小程序中,有首页,有个人页面,还有一些列表页面,详情页面等等,这些页面大部分是可以分享的.当分享出去的页面被一个另一个用户打开的时候,这个页面怎么确保这个用户已经登陆了呢? 网上有很多方案是在请求封装里面加一道拦截,如果没有token,就先调用登陆请求获取token后,再继续. 这种方案没毛病,只要注意一点,当一个页面有多个请求同时触发时,当所有请求拦截后,放到一个数组里面,在获取token成功后,遍历数组一个个请求就行. 但这个需求再复

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

随机推荐