小程序分享链接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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 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/12/04 PHP
php生成扇形比例图实例
2013/11/06 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
python创建进程fork用法
2015/06/04 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python自动12306抢票软件实现代码
2018/02/24 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
Python中and和or如何使用
2020/05/28 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
final, finally, finalize的区别
2012/03/01 面试题
军训的自我鉴定
2013/12/10 职场文书
学校采购员岗位职责
2014/01/02 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
租车协议书范本2014
2014/11/17 职场文书
2015年考研复习计划
2015/01/19 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
python解析json数据
2022/04/29 Python