工作中有个需求是小程序的网页在关闭的时候，需要回传给小程序一个参数

查阅小程序官方文档，有这样一个接口 wx.miniProgram.postMessage ，可以用来从网页向小程序发送消息，然后通过 bindmessage 事件来监听消息，如下是官方文档描述



微信小程序相关文章

以下是代码：



// 网页代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>postMessage</title>

    </head>

    <body>

        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

        <script type="text/javascript">

            wx.miniProgram.postMessage({ data: '获取成功' })

            wx.miniProgram.navigateBack({delta: 1})

        </script>

    </body>

</html>




// 小程序代码

<web-view bindmessage="handleGetMessage" src="test.html"></web-view>

Page({

  handleGetMessage: function(e) {

    console.log(e.target.data)

  }

})

写完试了下，期待打印 “获取成功” ，而实际小程序里面啥也没打印。。。

然后仔细看官方文档，发现有这句话：

网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。

也就是只有在小程序后退、组件销毁、分享时才会触发

所以应该改变 postMessage 的时机，调换顺序就可以了



<script type="text/javascript">

    wx.miniProgram.navigateBack({delta: 1})

    wx.miniProgram.postMessage({ data: '获取成功' })

</script>

这样再试试，发现能正常捕获消息了

原文地址：https://segmentfault.com/a/1190000016717727

微信小程序的坑之wx.miniProgram.postMessage的更多相关文章

  1. 微信小程序踩坑之一[wx.request]请求模式

    最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...

  2. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  3. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  4. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  5. 两百条微信小程序跳坑指南（不定时更新）

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

  6. 微信小程序爬坑日记

    新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...

  7. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  8. 使用wepy框架搭建微信小程序采坑记（一）

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  9. 微信小程序的坑(持续更新中)

    参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的 ...

随机推荐

  1. thinkphp5 +elasticsearch

    php7使用elasticsearch 1.安装 官网下载地址:https://www.elastic.co/downloads/elasticsearch # 解压到非root目录,运行时使用非ro ...

  2. Django models数据库配置以及多数据库调用设置

    今天来说说web框架Django怎么配置使用数据库,也就是传说中MVC(Model View Controller)中的M,Model(模型). 简单介绍一下Django中的MVC: 模型(model ...

  3. HTML5中div，article，section的区别

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...

  4. RobotFramework自动化测试框架（3）- RobotFramework扩展测试库、资源文件、变量文件

    扩展测试库 扩展测试库可使用python或java语言编写.后直接导入需要使用的测试用例文件即可. 具体的实现和操作,后续补充.请参考官网. 资源文件 在资源文件中定义用户关键字,它提供了共享机制,即 ...

  5. AtCoder Regular Contest 081 F - Flip and Rectangles

    题目传送门:https://arc081.contest.atcoder.jp/tasks/arc081_d 题目大意: 给定一个\(n×m\)的棋盘,棋盘上有一些黑点和白点,每次你可以选择一行或一列 ...

  6. C++命名空间详解

    使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突.在C++中,变量.函数和类都是大量存在的.如果没有命名空间,这些变量.函数.类的名称将都存在于全局命名空间中,会导致很多冲突.比如,如果我 ...

  7. Graph HDU - 4467

    https://vjudge.net/problem/HDU-4467 大概就是,设一个块大小T 对于度数<=T的点,设为1类点,在改变颜色的时候暴力查询与其相邻点,更新答案 对于度数>T ...

  8. 条形码问题 dp+求某个序列在某种排列中的序号的方法

    题目 条形码是一种由亮条(Light Bar)和暗条(Dark Bar)交替出现且以暗条为起头的符号,每条都占有若干个单位宽.图33-1给出了一个含有4个条的条形码,它延续了1+2+3+1=7单位的宽 ...

  9. Linux 命令与学习

    2014-10-10 ps -ef|grep ***   可以查找包含***名称的进程 netstat -ntlp       查看端口占用 kill -9 pid           强制杀死进程 ...

  10. 分层开发之C#分层

    假如没有用分层开发,仔细分析三人的开发过程,很容易发现其中的问题: >三人排队式的轮番工作,花费的时间是三人工作时间之和. >后面开发的人基本都是要先花费时间熟悉前面人的代码,否则开发难以 ...