微信小程序的坑之wx.miniProgram.postMessage

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

查阅小程序官方文档,有这样一个接口 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

原文地址:https://www.cnblogs.com/lalalagq/p/9906566.html

时间: 2024-07-30 13:17:32

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

一名Android开发者的微信小程序填坑之路(2)

前言 上一篇是九月二十七日写的,而这一篇我动笔的时间是十月十日(特殊的日子),中间相隔十三天--当然是因为国庆节.说老实话,这十三天里面我都没有碰和小程序有关的东西--毕竟学习小程序的开发也只是起于兴趣,而平时的工作并不会涉及与其相关的东西--但是在这十三天里,我能明显的感受到小程序热正在逐渐的消退,或者说大家正在逐渐以一种较为平和的姿态接受它的存在,其实这是一件好事.期待公测的到来. 接下来我就直接进入正题了,另外,文末我想和大家分享一下我的国庆节. PS:这篇文章是接着上一篇文章 一名And

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

微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </view> <button bindtap="RequestData" value="Button">Button</button> 主要是一个按钮,点击后将请求的数据写入到textarea中 js文件: Page({ data:{ textd

一名Android开发者的微信小程序填坑之路(1)

前言 首先要声明的是,我是一名 Android 开发者,之前基本没有前端开发经验,甚至连 JS ,HTML 都是为了开发小程序现学的一些皮毛--所以文章中所提到的一些点也许在资深前端开发者看来只是小case,但是站在一个 Android 开发者的角度来看确实是大坑. 前面就不说太多东西了,文章的末尾再谈谈我对小程序的一些看法--这篇文章主要是谈谈在开发小程序的过程中遇到的一些坑. PS:推荐一下我写的一个微信小程序版的Gank客户端:wechat-weapp-gank 正文 1,获取小程序开发工

微信小程序的坑坑

no.1 背景图不显示 微信小程序里面是允许用户自定义背景图的,但是限定了背景图的路径及地址,之前一直用相对路径来写,微信开发者工具中也显示出了背景图,误以为没有问题,但是预览的时候发现手机中不显示背景图,这就是今天介绍的第一个坑,背景图不允许为本地图片. 解决方法: 第一.用在线图片转base64码的方法,这种方法的优点在于图片不存储在本地或者服务器上,占用空间小修改方便,缺点是小图片处理效果更好,大图代码相当的长,长的都不想看他... 第二.将图片上传至服务器,引用图片地址就可以了,方便快捷

微信小程序爬坑日记

新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只有项目才是实践学习的根本:二来刚出来,总是有很多坑.爬坑总是痛并快乐着. 再多的借口,产品项目需求拍在桌前,都得缴械投降.不要怂撸起袖子,就是干. 初识小程序 微信推出小程序,想要实现即开即用,用完即走的用户体验.免去APP下载安装繁琐的流程.听起来像谷歌推出的PWA,不过PWA普及到国内还有段时间.而小程序

记录开发微信小程序的坑(3)

现在开发小程序已经到了平稳时期,开始逐步优化小程序 1.微信小程序的更新机制  wx.getUpdateManager()这个函数是用于更新的 连接 https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUpdateManager.html 小程序没有重启的概念 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁 在 iOS 上,当微信客户端在一定时间间隔内(目前是 5 秒)连续收到两次

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

参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的一些坑:下面针对小程序开发过程中遇到的一些坑跟大家分享,有些没有深究具体原因: 1.原生组件遮盖的问题 由于原生组件层级最高,即使设置了其z-index也于事无补:不能随意在其层级上展示信息,只能通过cover-view和cover-image组件(其实这两个组件也是原生组件)来进行遮盖: 例如,下

微信小程序踩坑(二)——微信小程序recorderManager和innerAudioContext相关

目录 写在前面 RecorderManager录音相关 innerAudioContext播放相关 写在前面 关于微信小程序的录音和语音方面,踩了很多坑,记录一下 recorderManager相关文档 innerAudioContext相关文档 RecorderManager录音相关 在使用RecorderManager相关方法之前,在page外先定义全局唯一的录音管理器: const recorderManager = wx.getRecorderManager(); 录音开始 record

微信小程序避坑指南

如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2.0.9 6.6.2 1.9.97 6.6.1 1.9.9 6.6.0 1.9.4 6.5.22 1.7.4 6.5.16 1.6.8 6.5.13 1.5.8 6.5.10 1.4.4 6.5.9 1.3.0 6.5.8 1.2.6 Android 客户端版本 基础库版本 6.7.2 2.3.0