小程序web-view wx.miniProgram.postMessage 坑记录
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 坑记录的更多相关文章
- 微信小程序web-view之wx.miniProgram.redirectTo
17年微信小程序官方提供了web-view组件. 官方描述:web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 这段时间研究了一下小程 ...
- 微信小程序发送红包功能。填坑记录
微信官方文档 1.开通条件 (1)商户号已入驻90日 (2)商户号有连续30天正常交易 (3)只有企业资质的商户才有资格申请 2.注意事项 (1)目前小程序红包仅支持用户微信扫码打开小程序 (2)小程 ...
- 微信小程序的坑之wx.miniProgram.postMessage
工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...
- 使用 wx.miniProgram.postMessage 传递网站数据来分享网站程序页面
在小程序里使用web-view组件,在对小程序点击顶部分享按钮分享时,分享的内容为当前页面的内容,需要使用wx.miniProgram.postMessage来进行处理 H5页面代码 created( ...
- 一套代码小程序&Web&Native运行的探索05——snabbdom
接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...
- 开发 | 微信小程序API-wx.setScreenBrightness/wx.getScreenBrightness
前言 最近接触了微信小程序 API - wx.setScreenBrightness .wx.getScreenBrightness 接口,调用该接口可以调节并显示手机屏幕亮度数据.对于喜欢腾讯新闻. ...
- 一套代码小程序&Web&Native运行的探索04——数据更新
接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- 一套代码小程序&Web&Native运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...
- 小程序上传wx.uploadFile - 小程序请假
小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 cont ...
随机推荐
- Beta版本发布140字评论
1.飞天小女警组: 礼物挑选工具:系统界面十分新颖,相比于前阶段,增加了账号登陆的功能,并且还根据不同的价位区间添加了礼物的图片,并根据礼物的受欢迎程度添加了top10的功能,并且增加了关于本网站的问 ...
- [转]string和stringstream用法总结
转自:http://blog.csdn.net/xw20084898/article/details/21939811 作者:xw20084898 一.string string 是 C++ 提供的字 ...
- ini_set的权限大于error_reporting
在用php做网站开发的时候 , 为防止用户看到错误信息,而出现的不友好界面.故一般性会在php.ini里设置:display_errors = Off;不过在开发的时候,我们有时候需要打开错误信息.这 ...
- PHP学习心得1
php是动态网站开发的优秀语言,在学习的时候万万不能冒进.在系统的学习前,我认为不应该只是追求实现某种效果,因为即使你复制他人的代码调试成功,实现了你所期望的效果,你也不了解其中的原理,这样你很难利用 ...
- javascript定时保存表单数据的代码
(忘记是不是两家邮箱都有这个功能). 那这个功能是怎么做的呢? 定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据.但是,这个却有个缺点:那就是刷新页面后,数据将会丢失. 而此时,就 ...
- CSU1392(NCPC2013)_Number Trick
给一个小数X,找个A使得:AX=(A循环左移一位) 首先,假设A为一个满足题目条件的数,有n个数位,且最高位数字为A0. 那么可列出方程:AX=(A-A0*10n-1)*10+A0 ————>& ...
- oracle 月份中日的值必须介于 1 和当月最后一日之间
解决方法: 1.用时间字段去关联字符串字段导致此错误.. 如果1.解决不了就看 2.把date'2017-01-01' 换成 to_date('2017-01-01','yyyy-mm-dd')
- C++模板学习笔记
一个有趣的东西:实现一个函数print, 输入一个数组, 输出数组的各个维度长度. eg. ], b[][], c[][][]; print(a); //(2, 4) print(b); //(3, ...
- 【AGC010F】Tree Game
Description 有一棵\(n\)个节点的树(\(n \le 3000\)),第\(i\)条边连接\(a_i,b_i\),每个节点\(i\)上有\(A_i\)个石子,高桥君和青木君将在树上玩游戏 ...
- BZOJ5389 比例查询 【离线】
题目链接 BZOJ5389 题解 太\(sb\)了,这种题都想不出来 发现复杂度允许\(n\sqrt{n}\),我们可以对于每个位置\(\sqrt{n}\)枚举约数,然后维护比例的最晚出现的位置,维护 ...