web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面。所以官方对web-view的操作是,它永远是界面的最上层及z-index最大,而且web-view只能全屏显示。从而,就可以在web-view之上嵌套任何控件,而官方提供web-view与网页之间的交互,只有src和bindmessage,同时还有一些跳转及在js中调用相关代码(wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo)让开发者可以从web-view的页面跳转到别的页面,还有一个获取当前环境的方法wx.miniProgram.getEnv(其实这个方法也只能用在小程序内,小程序外是无法执行的,所以其实也没有什么判断对错的操做)。

  可能更多人会把注意力放到bindmessage和上,按照文档上写的,Js可以通过wx.miniProgram.postMessage的方法,向小程序传递数据,小程序通过  <web-view src="{{report_src}}" bindmessage="bindGetMsg"></web-view> 然后通过bindGetMsg方法获取到到相关参数,但这是一个无底之坑,因为bindGetMsg这个方法只能在生命周期处于不可操着的状态也就是在onHide这个状态才会被调用,也就是这个不是实时监听的。做到这里就有点尴尬了,这样所谓的“分享”操作也无法实现了,但项目需要这样的操作怎么办,我的解决办法,也就跟以前微信打开网页的操作一样,在网页上提示点击右上角转发。这个也是做微信服务号得出的结果。

转发兼容IOS方法:

h5页面每次跳转页面 时 

wx.miniProgram.postMessage()

小程序分享

 1.wxml:

<web-view src="{{src}}" bindmessage="bindmessage"></web-view>

2.js:

bindmessage:function(e){
console.log("获取推送消息");
console.log(e.detail)
this.setData({
history:e.detail.data[e.detail.data.length-1]
})
}, onShareAppMessage: function (res) {
return {
title: '标题',
path: this.data.history
}
}

参考:https://blog.csdn.net/huangpb123/article/details/80588693

小程序web-view wx.miniProgram.postMessage 坑记录的更多相关文章

  1. 微信小程序web-view之wx.miniProgram.redirectTo

    17年微信小程序官方提供了web-view组件. 官方描述:web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 这段时间研究了一下小程 ...

  2. 微信小程序发送红包功能。填坑记录

    微信官方文档 1.开通条件 (1)商户号已入驻90日 (2)商户号有连续30天正常交易 (3)只有企业资质的商户才有资格申请 2.注意事项 (1)目前小程序红包仅支持用户微信扫码打开小程序 (2)小程 ...

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

    工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...

  4. 使用 wx.miniProgram.postMessage 传递网站数据来分享网站程序页面

    在小程序里使用web-view组件,在对小程序点击顶部分享按钮分享时,分享的内容为当前页面的内容,需要使用wx.miniProgram.postMessage来进行处理 H5页面代码 created( ...

  5. 一套代码小程序&Web&Native运行的探索05——snabbdom

    接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...

  6. 开发 | 微信小程序API-wx.setScreenBrightness/wx.getScreenBrightness

    前言 最近接触了微信小程序 API - wx.setScreenBrightness .wx.getScreenBrightness 接口,调用该接口可以调节并显示手机屏幕亮度数据.对于喜欢腾讯新闻. ...

  7. 一套代码小程序&Web&Native运行的探索04——数据更新

    接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  8. 一套代码小程序&Web&Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  9. 小程序上传wx.uploadFile - 小程序请假

    小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 cont ...

随机推荐

  1. Python入门:数据结构的3个小技巧

    这是关于Python的第11篇文章,主要介绍下数据结构的3个小技巧. 排序: 使用sorted函数实现排序. sorted函数按照长短.大小.英文字母的顺序给每个列表的元素进行排序.这个函数经常在数据 ...

  2. 微信小程序组件 滚动导航

    JS data: { // 初始化滑动条数据 menuIndex:0, // 每个菜单的宽度 onlyWidth: 70, // 右侧的margin marginWidth:10, // 菜单总长 m ...

  3. iOS BCD码、数据流、字节和MD5计算

    一.各个之间的相互转换 1.字符串转数据流NSData NSString *str = @"abc123"; NSData *dd = [str dataUsingEncoding ...

  4. bzoj2095-Bridge

    题意 一个 \(n\) 个点 \(m\) 条边的图,每条边双向都有权值(可能不一样).求从 1 开始,经过所有点,经过所有边一次且仅一次(即一定要经过这条边的某个方向)回到 1 的路径上权值最大的最小 ...

  5. 02.基于IDEA+Spring+Maven搭建测试项目--详细过程

    一.背景介绍 1.1公司相关技术 Git:是一款免费的开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目,方便多人集成开发 Maven:是基于项目对象模型(POM),可以通过一小段描述信息 ...

  6. BZOJ5291 BJOI2018链上二次求和(线段树)

    用线段树对每种长度的区间维护权值和. 考虑区间[l,r]+1对长度为k的区间的贡献,显然其为Σk-max(0,k-i)-max(0,k-(n-i+1)) (i=l~r). 大力展开讨论.首先变成Σk- ...

  7. Visual Studio 2013中UML建模功能

    1.新建项目-->模版-->建模项目 2.右键项目,添加新建项,, 3.自己摸索吧.

  8. 【转】嵌入式Linux驱动面试题三道

    题一: Linux设备中字符设备与块设备有什么主要的区别? 字符设备:字符设备是个能够像字节流(类似文件)一样被访问的设备,由字符设备驱动程序来实现这种特性.字符设备驱动程序通常至少实现open,cl ...

  9. CF993E Nikita and Order Statistics 【fft】

    题目链接 CF993E 题解 我们记小于\(x\)的位置为\(1\),否则为\(0\) 区间由端点决定,转为两点前缀和相减 我们统计出每一种前缀和个数,记为\(A[i]\)表示值为\(i\)的位置出现 ...

  10. 洛谷 P1356 数列的整数性 解题报告

    P1356 数列的整数性 题目描述 对于任意一个整数数列,我们可以在每两个整数中间任意放一个符号'+'或'-',这样就可以构成一个表达式,也就可以计算出表达式的值.比如,现在有一个整数数列:17,5, ...