小程序分享链接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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
javascript实现移动端触屏拖拽功能
Jul 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
护士自荐信怎么写
2013/10/18 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server