小程序分享链接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 相关文章推荐
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
简单谈谈JS中的正则表达式
Sep 11 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
js实现简单进度条效果
Mar 25 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
详解如何使用React Hooks请求数据并渲染
Oct 18 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
python传递参数方式小结
2015/04/17 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python制作简易注册登录系统
2016/12/15 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
团组织关系介绍信
2014/01/12 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
艺术教育实施方案
2014/05/03 职场文书
供应链金融服务方案
2014/05/25 职场文书
敬老院标语
2014/06/27 职场文书
煤矿安全协议书
2014/08/20 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
复兴之路观后感
2015/06/02 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP