小程序分享链接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功能函数(2009-06-04更新)
Jun 04 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
jQuery.each使用详解
Jul 07 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
深入理解js promise chain
May 05 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Angular8路由守卫原理和使用方法
Aug 29 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
大整数数相乘的问题
2012/07/22 面试题
自我评价范文点评
2013/12/04 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
物控部经理职务说明书
2014/02/25 职场文书
关于读书的演讲稿
2014/05/07 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
医院员工辞职信范文
2015/05/12 职场文书
学会感恩主题班会
2015/08/12 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript