小程序分享链接功能 - onShareAppMessage

时间:2023-02-13 23:31:38

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的更多相关文章

  1. 关于微信小程序分享&sol;转发功能的实现方法

    实现微信小程序分享,可以有两个入口: 1. 小程序右上角菜单自带的分享 这个入口是默认关闭的,需要在当前页面中调用showShareMenu方法,开启分享 onLoad: function () { ...

  2. 小程序分享转发功能实现demo

    /** * 用户点击右上角分享 */ onShareAppMessage: function() { //分享 console.log("分享") var that = this ...

  3. 怎么样修改小程序分享的title&sol;onShareAppMessage

    onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target ...

  4. 微信小程序--分享功能

    微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...

  5. 微信小程序--分享报错(thirdScriptError Cannot read property &&num;39&semi;from&&num;39&semi; of undefined&semi;at pages&sol;index&sol;index page onShareAppMessage function TypeError&colon; Cannot read property &&num;39&semi;from&&num;39&semi; of undefined)

    分享功能: onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res. ...

  6. 微信小程序分享及信息追踪

    我就是个搬用工—来源:https://www.jianshu.com/p/87a75ec2fd53 小程序分享群及信息追踪 需求 页面分享 ​ 小程序页面分享链接增加source参数,值为用户ID加密 ...

  7. 微信小程序分享朋友圈的实现思路与解决办法

    实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...

  8. 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享

    官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...

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

    最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...

随机推荐

  1. Spring中AOP(通知)的使用

    1.新建 Spring Bean Configuration File  xml格式的文件 2. xml文件 <bean id="my1" class="xml.M ...

  2. TypeScript &amp&semi; JavaScript

    http://www.typescriptlang.org/docs/tutorial.html handbook: Basic Types Variable Declarations Interfa ...

  3. MyBatis环境搭建配置文件&plus;入门视频下载

    1.MyBatis优点 操作简单话,代码量少,效率高,成本就降低了 2.MyBatis缺点 参数只能限制为一个 selece语都要手动来写 3.与JDBC的关系:是对JDBC的扩展 把sql语句和ja ...

  4. hdu5390 tree

    先求出dfs序,然后建立线段树,线段树每个节点套一个set. 修改操作只需要改被子树区间完全覆盖的线段树节点,将其节点中set的原来的值删除,加入新值. 询问操作查询单点到根的所有节点上的set中与查 ...

  5. IIS principle

    IIS Request | | | Application Pool Config | | | W3WP | | | Many Module | | | AppDomain:这才是.NET的入口 | ...

  6. MyEclipse使用总结——MyEclipse文件查找技巧

    原文:MyEclipse使用总结--MyEclipse文件查找技巧 一.查找文件 使用快捷键[ctrl+shift+R]弹出弹出文件查找框,如下图所示: 二.查找包含某个字符串的文件 使用快捷键[ct ...

  7. 使用Java注解开发自动生成SQL

    使用注解开发的好处就是减少配置文件的使用.在实际过程中,随着项目越来越复杂,功能越来越多,会产生非常多的配置文件.但是,当配置文件过多,实际维护过程中产生的问题就不容易定位,这样就会徒劳的增加工作量. ...

  8. ORA-06575&colon;程序包或函数处于无效状态

    今天一个朋友问我下面这段sql语句的问题,我发现了他竟然把程序员的编程思想带入了oracle,虽然是错误的,但也是很经典的错误啊. create or replace package p_view_p ...

  9. Hive的join表连接查询的一些注意事项

    Hive支持的表连接查询的语法: join_table: table_reference JOIN table_factor [join_condition] | table_reference {L ...

  10. vs2017连接mysql以及问题汇总

    https://www.cnblogs.com/eye-like/p/8494355.html https://blog.csdn.net/u012658972/article/details/791 ...