小程序分享链接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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
json跟xml的对比分析
Jun 10 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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执行速度全攻略(下)
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python中的字符串内部换行方法
2018/07/19 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
pyqt5中动画的使用详解
2020/04/01 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
写给女生的道歉信
2014/01/08 职场文书
公证书样本
2014/04/10 职场文书
班级读书活动总结
2014/06/30 职场文书
学校端午节活动总结
2015/02/11 职场文书
投资申请报告
2015/05/19 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
详解Python函数print用法
2021/06/18 Python