小程序分享链接功能 - onShareAppMessage
onShareAppMessage用法:
只需要在button标签中加入open-type="share",小程序ui就会自动识别分享链接功能
<button data-name="shareBtn" open-type="share">分享</button>
js中代码如下:
onShareAppMessage: function( options ){
var that = this;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "转发的标题", // 默认是小程序的名称(可以写slogan等)
path: '/pages/share/share', // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function(res){
// 转发成功之后的回调
if(res.errMsg == 'shareAppMessage:ok'){
}
},
fail: function(){
// 转发失败之后的回调
if(res.errMsg == 'shareAppMessage:fail cancel'){
// 用户取消转发
}else if(res.errMsg == 'shareAppMessage:fail'){
// 转发失败,其中 detail message 为详细失败信息
}
},
complete: fucntion(){
// 转发结束之后的回调(转发成不成功都会执行)
}
};
// 来自页面内的按钮的转发
if( options.from == 'button' ){
var eData = options.target.dataset;
console.log( eData.id); // shareBtn
// 此处可以修改 shareObj 中的内容
shareObj.path = '/pages/goods/goods?goodId='+eData.id;
}
// 返回shareObj
return shareObj;
}
在实际应用中,会碰到这种情况:
微信小程序分享时,需要调用一个ajax(Promise)请求,然后return 一个对象,怎么同步实现?
比如:微信小程序分享时会调用 onShareAppMessage 方法,他会return 一个对象作为分享时的参数。但是我需要在他return之前调用一个ajax方法getShareCode,怎么样同步实现?
//将字符串链接转为二维码,如:转换前 itemid/344*fromuser/4909*shopid/75,转换后 KtIQE4j9OP4JNGS2dsZy
getShareCode: function () {
var that = this;
util.request(api.CreateShareCode, {
sharecode: 'itemid/' + that.data.productid + '*fromuser/' + user.getBuyerUserId() + '*shopid/' + that.data.shopId
}).then(function (res) { if (res.statusCode === 0) {
that.setData({ newShareCode: res.sharedata });
}
});
}, //分享功能
onShareAppMessage: function () {
this.getShareCode();
let that = this;
var newShareCode = that.data.newShareCode;
var shareBackUrl = 'pages/goods/goods?scene=' + newShareCode;
return {
title: that.data.goods.title,
path: shareBackUrl
}
},
尝试用async await 和 Promise都没有得到想要的结果。
不能用async await原因是, 如果 onShareAppMessage 是async函数,分享时会调用这个方法,但是分享的事件是走的默认的分享,没用使用我return的参数对象。Promise同理。
而且return的对象写到请求方法里面也会出现上面的问题:方法会被调用,但是分享事件没有用return的参数。如下:
//分享功能
onShareAppMessage: function () {
var that = this;
util.request(api.CreateShareCode, {
sharecode: 'itemid/' + that.data.productid + '*fromuser/' + user.getBuyerUserId() + '*shopid/' + that.data.shopId
}).then(function (res) { if (res.statusCode === 0) {
var newShareCode = res.sharedata;
var shareBackUrl = 'pages/goods/goods?scene=' + newShareCode;
return {
title: that.data.goods.title,
path: shareBackUrl
}
}
});
},
jQuery的ajax请求可以这么设置同步请求:
$.ajaxSetup({
async: false
});
async 方法,别人调用的时候,会立刻返回一个Promise,而return里的path,则是在返回的那个getShareCode里获取的。微信调用这个方法拿的是返回值,也就是一个Promise,而Promise里没有他需要的那些参数,所以就是默认的分享了。
换句话说,这个Share回调不允许有异步操作。能改成同步就改,不能改的话,就得改代码逻辑了。
结果发现这个Share回调还真不允许有异步操作。
曲线救国的方法就多了,比如:
1、在页面加载的时候先请求好数据,存在data里
2、写个阻塞的函数
3、封装自己的分享函数onShareAppMessage实现分享参数的动态获取
小程序分享链接功能 - onShareAppMessage的更多相关文章
- 关于微信小程序分享/转发功能的实现方法
实现微信小程序分享,可以有两个入口: 1. 小程序右上角菜单自带的分享 这个入口是默认关闭的,需要在当前页面中调用showShareMenu方法,开启分享 onLoad: function () { ...
- 小程序分享转发功能实现demo
/** * 用户点击右上角分享 */ onShareAppMessage: function() { //分享 console.log("分享") var that = this ...
- 怎么样修改小程序分享的title/onShareAppMessage
onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target ...
- 微信小程序--分享功能
微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...
- 微信小程序--分享报错(thirdScriptError Cannot read property 'from' of undefined;at pages/index/index page onShareAppMessage function TypeError: Cannot read property 'from' of undefined)
分享功能: onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res. ...
- 微信小程序分享及信息追踪
我就是个搬用工—来源:https://www.jianshu.com/p/87a75ec2fd53 小程序分享群及信息追踪 需求 页面分享 小程序页面分享链接增加source参数,值为用户ID加密 ...
- 微信小程序分享朋友圈的实现思路与解决办法
实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...
- 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享
官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...
- 微信小程序分享至朋友圈的方法
最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...
随机推荐
- 洛谷 题解 P2502 【[HAOI2006]旅行】
由于此题边数比较小,所以可以先给边排个序,然后跑m遍最小生成树,每跑一次删除一条边,找最优解. 防TLE技巧 把边按从小到大的顺序排好,那么只要当前无法联通,那么后面也无法联通 最优解找法 doubl ...
- IT学习的计算机网络内容
1.一种结构:数据结构 参考书目:<大话数据结构>.<数据结构(C#语言描述)>.<剑指Offer> ①线性表部分: 线性表(上){ 数组.ArrayList } ...
- 剑指offer14:输入一个链表,输出该链表中倒数第k个结点。
1. 题目描述 输入一个链表,输出该链表中倒数第k个结点. 2. 思路和方法 可以用两个指针,一个指针遍历到第k个结点的时候,第二个指针再走到第一个节点,然后两个指针的距离始终保持k-1.这样,当第一 ...
- python 修改文件的创建时间、修改时间、访问时间
目录 python 修改文件创建.修改.访问时间 方案一 方案二(无法修改文件创建时间) python 修改文件创建.修改.访问时间 突如其来想知道一下 python 如何修改文件的属性(创建.修改. ...
- 15.Ansible安装与配置简单版
Ansible是一个简单高效的自动化运维管理工具,用Python开发,能大批量管理N多台机器,可以并发的在多台机器上部署应用.安装软件.执行命令.配置和编排任务. 一.Ansible工作机制 从图中可 ...
- k8s集群升级
集群升级 由于课程中的集群版本是 v1.10.0,这个版本相对有点旧了,最新版本都已经 v1.14.x 了,为了尽量保证课程内容的更新度,所以我们需要将集群版本更新.我们的集群是使用的 kubeadm ...
- javascript之取余数、去商、天花板取整、地板取整
demo1: console.log('//求余数'); //求余数 console.log(5 % 4); console.log(6 % 4); //求商 console.log('//求商'); ...
- 排序之希尔排序(JS)
希尔排序(Shell's Sort)是插入排序的一种又称“缩小增量排序”(Diminishing Increment Sort),是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该 ...
- 怎样在浏览器端增加一条Cookie
可以使用 document.cookie, 这个属性可读可写, 读时是读取所有没有设置HttpOnly的cookie作为一个字符串返回, 写时是将一个cookie写入到document.cookie中 ...
- 尝试 javascript 一对多 双向绑定器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...