小程序分享链接功能 - onShareAppMessage

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实现分享参数的动态获取

原文地址:https://www.cnblogs.com/banma/p/12085122.html

时间: 2024-10-11 04:05:22

小程序分享链接功能 - onShareAppMessage的相关文章

微信小程序分享至朋友圈的方法

最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至朋友圈: 微信小程序没有任何入口可以进入到微信的浏览器中,那么就更加不可能让用户进入到自身操作系统中的浏览器进行分享. 那么怎么通过其他的途径来达到次目的呢? 答案是:客服消息 微信小程序本身提供客服消息是用来更好的为客户服务的,但是请看以下截图: 小程序提供了入口,允许用户给客服发送消息,同时,也

小程序“自定义关键词”功能的常见问答

我们知道小程序可以通过线下扫码.公众号.好友分享.长按小程序码.搜索小程序名称来找到,现在又多了一个新方式——小程序后台新增自定义关键词功能:已发布小程序的开发者,可提交最多10个与小程序业务相关的关键词,帮助你的小程序更好地被发现. (登陆小程序后台——点击左侧“推广”添加关键词) 自定义关键词搜索策略将于6月9日生效.届时,用户可以通过搜索关键词,找到相关的小程序.小程序的关键词每个月可以修改三次. 开发者还可在后台看到关键词推广效果. 我们希望通过“自定义关键词”功能,帮助用户在微信内更便

小程序——分享二维码报告

小程序分享报告(图片+二维码): 小程序页面生成图片:请用canvas,页面简单用canvas,页面复杂也用canvas. 踩过的坑: 思路:html  ->  html2canvas  ->  canvas||image/png; 最后涉及到小程序与H5页面项目连接问题(web-view &分享页面),还是用canvas老老实实画的 Bug1:小程序,不支持js获取Dom操作, 解决1:单独写https的一个H5页面来操作Dom.     <web-view  src='htt

微信小程序开发-蓝牙功能开发

0. 前言 这两天刚好了解了一下微信小程序的蓝牙功能.主要用于配网功能.发现微信的小程序蓝牙API已经封装的很好了.编程起来很方便.什么蓝牙知识都不懂的情况下,不到两天就晚上数据的收发了,剩下的就是数据帧格式的定义,当然这部分就不是本次博客的重点.1. 准备硬件 这里我准备了CH341SER这个作为USB转串口.用sscom5.13.1 串口工具.由于我不太懂硬件开发.硬件部分都是由公司其他人开发的.我只是负责把环境搭建起来.然后负责我的微信小程序开发. 2. 开发小程序简单讲解 onLoad

工具类小程序分享

闲时自己做的工具类小程序分享尝鲜,包含举例(铁路12306火车正晚点查询和检票口查询.记事本.小游戏.视频播放模拟器等等......) 1.小程序包含可移动菜单.swiper轮播推荐.热门推荐.实用工具类.休闲益智和我的模块. 2.欢迎小伙伴们尝鲜,欢迎小伙伴的意见和建议,可以通过本人的小程序或者该帖子联系我. 以下是小程序入口: swiper轮播推荐效果图: 工具类效果图: 休闲益智类效果图: 以下:提供两个快捷访问铁路12306查询的小程序入口: 原文地址:https://www.cnblo

小程序登陆注册功能的实现

我们在开发小程序时,难免会用到登陆注册功能.通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发. 老规矩,先看效果图 通过上图可以看到我们主要实现了以下功能 1,账号密码登陆 2,账号密码注册 3,退出登陆 下面我们就来看下具体实现 一,原理讲解 因为我们账号密码的注册,就是把用户设置的账号密码存到数据库里,登陆也是从数据库里取账号和密码来校验.所以我们必须要有数据库.如果

小程序分享功能调整背后的故事

有时候我们使用一个小程序会遇到以下情形: 我们打开一个小程序,就看见提示"分享到5个群,可以获得一张20元的优惠券",吸引我们去无脑分享到不同的群里: 打开某个小游戏,提示我"一定要分享到xx个群,才能继续玩游戏": -- 而我们在群里打开这类小程序,仍然是提示我分享的信息,这类功能无疑打断了我们对小程序/小游戏正常的功能使用. 我们收到了很多用户对这类小程序/小游戏的抱怨.这类分享并非是用户主动自发的,而是受到了某类利益的诱惑,或是被迫分享.这样的内容充斥在群里.

小程序分享功能

onShareAppMessage: function () { // return custom share data when user share. console.log('onShareAppMessage') return { title: '盛世华安', desc: '小程序', path: '/pages/index/index' } },

一号旺铺微信小程序三大新功能:可相互跳转、批量管理门店

可相互跳转.批量管理门店,小程序是抓住零售新机会的一把利器吗?一号旺铺专业.专注开发小程序,就微信小程序的三个功能与大家分享. 同一个公众号下关联的 10 个同主体小程序和 3 个非同主体小程序之间,可以调用接口直接相互跳转. 微信小程序新动向:可相互跳转.批量管理门店 可相互跳转.批量管理门店,小程序是抓住零售新机会的一把利器吗? 小程序到底能不能抓住零售新机会,成效还在验证中.不过为了实现这一目标,小程序又释放了一个重大功能. 6 月 21 日深夜,微信官方表示,与同一公众号关联的小程序之间