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

H5页面代码

created() {
this.$store
.dispatch({
type: "user/saveCurrentUrl",
data: {
current_url: window.location.pathname + window.location.search,
page_type: "3"
}
})
.then(res => {
if (res.code == 1) {
window.wx.miniProgram.postMessage({
data: {
title: res.data.title, // 标题
desc: "", // 描述
imgUrl: "", // 图片
link: res.data.url, // 链接
unique_mark: res.data.unique_mark
}
});
}
});
let id = this.$route.params.id;
let activityId = this.$route.query.activityId;
this.getActivityProductDetail(id, activityId);
}

  小程序端代码

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

  

  onShareAppMessage: function() {
let _this = this;
let title = "发现一件好物";
if (app.globalData.shopname) {
title = app.globalData.shopname;
}
console.log(this.data.sharePageModel);
let path = "pages/index/index";
if (this.data.sharePageModel) {
path += "?share_openid=" + app.globalData.openid + "&unique_mark=" + this.data.sharePageModel.unique_mark;
title = this.data.sharePageModel.title;
} return {
title: title,
path: path,
success: _suc => {
wx.showToast({
title: '分享成功',
})
},
fail: _fail => {
wx.showToast({
title: '分享失败',
})
}
};
},
getSharePage: function(e) {
console.log("获取网页内容");
console.log(e);
if (e && e.detail && e.detail.data) {
let len = e.detail.data.length;
this.setData({
sharePageModel: e.detail.data[len - 1]
});
} },

调试截图

注意点:wx.miniProgram.postMessage该方法的使用有条件,小程序分享、销毁等都会执行,H5页面每执行一次,会在小程序端记录一条数据(数组形式),我目前做的是用户分享时取的是数组下标最大的,但是也存在一个缺陷,当H5页面未设置分享参数,而用户点击了顶部分享操作,分享数据将取最后一条,目前还在处理中(每个H5页面加上分享postMessage感觉不现实),求招...

使用 wx.miniProgram.postMessage 传递网站数据来分享网站程序页面的更多相关文章

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

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

  2. 小程序web-view wx.miniProgram.postMessage 坑记录

    web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面.所以官方对web-view的操作 ...

  3. 在微信小程序页面间传递数据总结

    在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...

  4. Android 使用剪贴板传递简单数据及复杂数据的方法

    传递数据的场景在于不同页面之间跳转,需要携带数据:简单数据值指的是String, int等数据, 复杂数据指的是类 1.   使用剪贴板传递简单数据方法: 第一个页面里面放数据操作如下: Clipbo ...

  5. H5中用postMessage传递数据,解决localStorage不能跨域问题

    localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的. 所以需要转变思路,目前主要使用的两种方式: 一种方式:在A.B两个页面 ...

  6. MFC用PostMessage传递消息

    1.自定义消息ID. #define WM_MY_MESSAGE (WM_USER+100)         WM_USER为windows系统为非系统消息保留的ID,这里至少要用100,因为其它控件 ...

  7. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  8. 小程序跨页面传递data数据的三种方法

    Q:小程序怎么把页面data里的数据传到另外的页面? 或者小程序怎么吧表单里的数据传到另外的页面?A:1.可以使用url传递数据. 例如在A页面中传递数据,需要注意的是,wx.switchTab中的u ...

  9. android 多个notifycation向同一个Actiivity传递不同数据

    如果你有这方面的需求,那你实践的时候可能会发现,多个Notifycation点击的时候会传递相同的数据. 通常情况下我们可能这样写. Notification notification = new N ...

随机推荐

  1. Xamarin Bindableproperty 可绑定属性

    重要的事情说三遍: 本文基本是取自微软官方 Bindable Properties, 官方也提供了机翻的中文版本,笔者只是尝试用自己的理解描述一遍,便于记忆.如有不对之处,欢迎拍砖. 本文基本是取自微 ...

  2. frp内网渗透实现ssh外网访问家里树莓派(树莓派raspbian系统+腾讯云contos7)

    只有信用卡大小的它,同时也是一台功能完备的电脑(树莓派),把内网能玩的功能都玩了个遍,自然就有了外网访问这台树莓派的需求.一样也是查阅了无数文章,研究了无数个方案,最终试验成功用FRP实现了内网穿透, ...

  3. Shell—引入外部脚本文件

    在Shell中要如何调用别的shell脚本,或别的脚本中的变量,函数呢? 方式1:. filename               方式2:source filename    需要注意: 两个点之间 ...

  4. webpack打包 The 'mode' option has not been set, webpack will fallback to

    webpack 打包报错 The 'mode' option has not been set, webpack will fallback to 'production' for,Module no ...

  5. 【转载】Spring学习(1)——快速入门--2019.05.19

    原文地址:https://www.cnblogs.com/wmyskxz/p/8820371.html   认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念 ...

  6. DOS下查看驱动版本号

    1.进入目录:C:\Program Files\NVIDIA Corporation\NVISMI 2.输入命令nvidia-smi 可以看到我的显卡驱动版本号为431.60

  7. WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)

    原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 因为项目需要 要实现这个~ 怎么实现画红框内容部分 田字格和上面Textbox 属于一个自定义控件  大 ...

  8. vue中\$refs、\$emit、$on的使用场景

    1.$emit的使用场景 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> <button @click=&quo ...

  9. SpringMVC拦截器和数据校验

    1.什么是拦截器 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求 ...

  10. Leetcode练习题 Palindrome Number

    9. Palindrome Number Question: Determine whether an integer is a palindrome. An integer is a palindr ...