小程序分享链接onShareAppMessage的具体用法


Posted in Javascript onMay 22, 2020

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的具体用法的文章就介绍到这了,更多相关小程序分享链接onShareAppMessage内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
JS变量提升原理与用法实例浅析
May 22 #Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 #Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 #Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 #Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
Node.js API详解之 readline模块用法详解
May 22 #Javascript
You might like
PHP求最大子序列和的算法实现
2011/06/24 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php中使用websocket详解
2016/09/23 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python 模块导入问题汇总
2021/02/01 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
设计专业自荐信
2014/06/19 职场文书
新闻学专业求职信
2014/07/28 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
法院个人总结
2015/03/03 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS