使用 wx.miniProgram.postMessage 传递网站数据来分享网站程序页面
在小程序里使用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 传递网站数据来分享网站程序页面的更多相关文章
- 微信小程序的坑之wx.miniProgram.postMessage
工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...
- 小程序web-view wx.miniProgram.postMessage 坑记录
web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面.所以官方对web-view的操作 ...
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- Android 使用剪贴板传递简单数据及复杂数据的方法
传递数据的场景在于不同页面之间跳转,需要携带数据:简单数据值指的是String, int等数据, 复杂数据指的是类 1. 使用剪贴板传递简单数据方法: 第一个页面里面放数据操作如下: Clipbo ...
- H5中用postMessage传递数据,解决localStorage不能跨域问题
localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的. 所以需要转变思路,目前主要使用的两种方式: 一种方式:在A.B两个页面 ...
- MFC用PostMessage传递消息
1.自定义消息ID. #define WM_MY_MESSAGE (WM_USER+100) WM_USER为windows系统为非系统消息保留的ID,这里至少要用100,因为其它控件 ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- 小程序跨页面传递data数据的三种方法
Q:小程序怎么把页面data里的数据传到另外的页面? 或者小程序怎么吧表单里的数据传到另外的页面?A:1.可以使用url传递数据. 例如在A页面中传递数据,需要注意的是,wx.switchTab中的u ...
- android 多个notifycation向同一个Actiivity传递不同数据
如果你有这方面的需求,那你实践的时候可能会发现,多个Notifycation点击的时候会传递相同的数据. 通常情况下我们可能这样写. Notification notification = new N ...
随机推荐
- 关于Java的多线程Runnable的个人理解(基础,不讲概念)
背景说明: 在学了Java的多线程(继承Thread,Runnable)以后,我出于好奇,就想知道java到底是不是多线程的,不能它说自己是多线程就是多线程,自己想验证一下,于是我就想测试一下,但继承 ...
- android binder 进程间通信机制1-binder 驱动程序
以下内容只大概列个提纲,若要明白其中细节,还请看源码: 申明:本人菜鸟,希望得到大神指点一二,余心足已 binder 设备:/dev/binder binder 进程间通信涉及的四个角色: Clien ...
- SSH的本地、远程、动态端口转发实验笔记
SSH端口转发 SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他 TCP 端口的网络数据通过 SSH 链接来转发,并且自动提供了相应的加密及解密服务.这一 ...
- JavaScript-----6.流程控制:分支
1.流程控制 就是来控制代码按照何种顺序来执行,流程控制有三种结构:顺序结构.分支结构.循环结构 2.顺序流程控制 程序按照代码先后顺序依次执行 3.分支流程控制 JS中提供两种分支结构语句:if语句 ...
- commons-httpclient 和 httpclient 区别
今天在看项目的pom的时候,发现里面有这么两个包依赖. <dependency> <groupId>commons-httpclient</groupId> < ...
- python--numpy生成正态分布数据及randint randn normal的使用
正太分布:也叫(高斯分布Gaussian distribution),是一种随机概率分布 机器学习中numpy.random如何生成这样的正态分布数据,本篇博客记录这样的用法 import numpy ...
- python面试题及答案 2019
利用切片操作,实现一个trim()函数,去除字符串首尾的空格,注意不要调用str的strip()方法. 正解1: def trim(s): while s[:1] == ' ': s = s[1:] ...
- 08-Django模板(2)
一.HTML转义 在视图中,通过调用模板传递下文,模板对上下文的传递字符串进行输出时,会对以下字符自动转义.HTML转义的作用:转义后标记代码不会被直接解释执行,而是被直接呈现,防止客户端通过嵌入js ...
- ZooKeeper(二):多个端口监听的建立逻辑解析
ZooKeeper 作为优秀的分布系统协调组件,值得一探究竟.它的启动类主要为: 1. 单机版的zk 使用 ZooKeeperServerMain 2. 集群版的zk 使用 QuorumPeerMai ...
- WDA入门教程Ⅰ:Web Dynpro for ABAP 入门(转)
转自:https://www.jianshu.com/p/68c1592f1a87 WDA全称Web Dynpro for ABAP,也写作WD4A或WDA,是用于在ABAP环境中开发Web应用程序的 ...