小程序分享链接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 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
浅析javascript中的DOM
Mar 01 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python 文件和输入输出小结
2013/10/09 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python文件读取失败怎么处理
2020/06/23 Python
如何在python中判断变量的类型
2020/07/29 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
小学语文课后反思精选
2014/04/25 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
施工员岗位职责
2015/02/10 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
mysql全面解析json/数组
2022/07/07 MySQL