微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步

小程序wx.navigateTo路由方法中新增加了events属性，可以用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。

相关文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

基本使用方法文档中已经有示例，可以参考

上级页面

新打开页面

通过上面的方法，小程序可以实现不同页面直接互相调用相关方法，也能进行页面间传值等处理

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序图片左右摆动效果详解

    微信小程序图片左右摆动效果详解

    先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可. 先看效果如下: 简单的参考代码: wxml: <image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image

  • 微信小程序Echarts覆盖正常组件问题解决

    微信小程序Echarts覆盖正常组件问题解决

    最近公司的项目中需要在小程序内使用echarts组件来展示数据,同时因为使用了自定义导航栏以及蒙版层,导致Echarts图形覆盖于所有组件的上方,不符合设计要求. 尝试解决的思路: z-index:Echarts使用的是微信原生canvas,优先级高,z-index完全无效. cover-view:因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素,故cover-view也无法奏效. wx.canvasToTempFilePath:wx.canvasToTemp

  • 微信小程序基于Taro的分享图片功能实践详解

    微信小程序基于Taro的分享图片功能实践详解

    前言 在各种小程序(微信.百度.支付宝).H5.NativeApp 纷纷扰扰的当下,给大家强烈安利一款基于React的多终端开发利器:京东Taro(泰罗·奥特曼),Taro致力于多终端统一解决方案,一处代码,多处运行. Taro支持以React语言开发小程序,支持CSS预处理器,支持实时编译更新,支持NPM,等等等等,简直不要太爽! 微信小程序分享图片功能是经常在小程序业务中出现的,比如学习打卡分享,推广会员分享,推广商品分享等等.因为小程序是不支持直接分享图片到朋友圈的,一般操作为: 生成包含

  • 微信小程序自定义弹窗实现详解(可通用）

    微信小程序自定义弹窗实现详解(可通用）

    本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗 点击弹窗布局外消失弹窗 弹出弹窗时背景阴影半透明 各方向弹出效果(本文为自下而上弹出) 话不多说,先上图看效果: 点击昵称旁边的编辑按钮 弹出自定义弹窗 上图是我自己拙劣的审美自定义的一个编辑弹窗,因为重点是自定义弹窗,所以在下文的通用代码中我就去掉了这些布局,剩下填充部分由读者自行填充. 下面上代码,老规矩,还是微信小程序对应的几个文件的代码,可直接贴到页面里用的哦. .wxml 文件中 直接放到wxml的最底部就行了,十分简练.

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • 微信小程序wx.request拦截器使用详解

    一. 请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求. 首先我们通过request拦截器在每个请求头里面塞入token等信息,好让后端对请求进行权限验证.并创建一个respone拦截器,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作. 二. 1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和

  • 微信小程序开发常见问题及解决方案

    微信小程序开发常见问题及解决方案

    前言 我们在做微信小程序开发的过程中,总会遇到各种奇葩的问题.今天就把我在小程序开发过程中遇到的各种问题,及对应的解决方案总结在这里,方便以后自己回顾,也方便大家查看. 云开发相关 一 云函数调用失败问题 [云函数] [login] 调用失败 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID , cloud function service erro

  • 微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步

    微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步

    小程序wx.navigateTo路由方法中新增加了events属性,可以用于监听被打开页面发送到当前页面的数据.基础库 2.7.3 开始支持. 相关文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html 基本使用方法文档中已经有示例,可以参考 上级页面 新打开页面 通过上面的方法,小程序可以实现不同页面直接互相调用相关方法,也能进行页面间传值等处理 以上就是本文的全部内容,希望对大家的学

  • 微信小程序wx.navigateTo方法里的events参数使用详情及场景

    个人理解wx.navigateTo方法里的events参数使用详情及场景 微信小程序在2.7.3版本wx.navigateTo这个方法中新增了events这个属性 微信官方文档里面写的很模糊,在微信公众平台的社区里也有一些人在问,我第一次看到也是先百度了一下使用场景,搜到的也只是copy官方文档的抄袭党,并没什么卵用,相信大家都是看的一头雾水,所以用业余时间研究了一下,以下仅代表个人的理解,如果有更好的想法或者使用不当的地方希望大家提出防止我的个人想法误导大家 个人理解这个新增的属性使用的场景就

  • 微信小程序商城项目之商品属性分类（4）

    微信小程序商城项目之商品属性分类（4）

    续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view> <!--options--> <view class="commodity_a

  • 微信小程序 wx:for遍历循环使用实例解析

    微信小程序 wx:for遍历循环使用实例解析

    这篇文章主要介绍了微信小程序 wx:for遍历循环使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图如下: 实现代码如下: type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, editType: function (e) { var typeId = e.currentTarget.dataset['id']; cons

  • 微信小程序wx:for循环的实例详解

    列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使

  • 微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

    前言: 微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢? 1 wx:for 从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序. 示例里面都是对数组进行条件判断,比如iconsizejius就是一个典型的数组. 2 wx:for-items 与wx:for-item 2.1 wx:for-items 现在看wx:for-items, 和wx:for比,wx:for-items有什么不同呢? [案]

  • 微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

  • 微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法 最近在给公司开发微信小程序,需要用到微信登录,根据文档要求需要把获取的用户信息按照AES进行解密. 我使用的是官方提供的PHP demo,拷贝到程序中,测试发现,解密之后的数据前面有一串乱码. 类似于这样子的,前面一段是乱码. 经过仔细的检查,发现官方的提供的demo中的帐号和机密之后的信息是可以解密的,这就说明解密代码是没有问题的. 后来查询微信开发者社区,找到好多解密失败.其中一个回答说是因为多次调用wx.login之后导致的问题. 终

  • 微信小程序 wx:key详细介绍

    微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某

  • 微信小程序 wx.request方法的异步封装实例详解

    wx-promise-request 是对微信小程序 wx.request 方法的异步封装. 解决问题 支持 Promise (使用 es6-promise 库). 管理请求队列,解决 request 最大并发数超过 10 会报错的问题. 下载 npm install wx-promise-request 然后拷贝 dist/index.js 文件到你的小程序项目中. 使用 import {request} from './wx-promise-request'; request({ url:

随机推荐