微信小程序分享功能onShareAppMessage(options)用法分析

本文实例讲述了微信小程序分享功能onShareAppMessage(options)用法。分享给大家供大家参考,具体如下:

在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

1. 只有定义了该函数,小程序右上角的菜单中才会有转发按钮

2. 用户点击转发按钮的时候回调用该函数

3. 该函数内需要 return 一个 Object,Object中包含转发的信息(可自定义转发的内容)

页面中有可以触发转发时间的地方有两个:

  一个是右上角菜单中的转发按钮
  另一个是页面中具有属性open-type且其值为share的button。(注:必须是button组件,其他组件中设置 open-type="share" 无效)
  即:

<button data-name="shareBtn" open-type="share">转发</button>

  注意:实际开发中会发现这个 button 自带有样式,当背景颜色设置为白色的时候还有一个黑色的边框,刚开始那个边框怎么都去不掉,后来给button加了一个样式属性 plain="true" 以后,再在样式文件中控制样式 button[plain]{ border:0 } ,就可以比较随便的自定义样式了,比如说将分享按钮做成一个图标等

触发分享事件后调用的函数:

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.name );   // shareBtn
    // 此处可以修改 shareObj 中的内容
    shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

希望本文所述对大家微信小程序开发有所帮助。

(0)

相关推荐

  • 微信小程序开发之转发分享功能

    官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html 第一种情况 点击小程序转发 不加入参数 //转发 onShareAppMessage: function() { let users = wx.getStorageSync('user'); if (res.from === 'button') {} return { title: '转发', path: '/pages/

  • 微信小程序--onShareAppMessage分享参数用处(页面分享)

    今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容. 顾不上吃冬至的饺子.我就冲进来了. 先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续还会更新. Page()中加上如下代码后在右上角就会出现三个小白点 title:分享的标题. desc:分享一段描述. path:这个参数有点意思.以前在微信中的分享一般都是url.这里是当前页面这里应该是pages/index?id=123这里的id目前还不知道是什么. 也就是说以后你可以在微信中像分享一个网页一样分享一个页面

  • 微信小程序实现分享到朋友圈功能

    截止到2017年11月18号,微信小程序官方还尚未开放直接分享到朋友圈的能力,但是劳动人民的智慧是伟大的,现在普遍的做法是,生成一张带有小程序码的图片,保存到用户相册,用户自行发布图片到朋友圈 我的套路: 请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便) canvas绘制文字和图片到画布 当用户点击分享到朋友圈时,给用户展示画布,画布转成图片,并将图片保存到相册 onShow: function () { var that = this; //1. 请求后

  • 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>

  • 微信小程序 数据封装,参数传值等经验分享

    微信小程序开发总结: 一: 参数传值的方法 1: data-id 我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明: (1)设置data-id <view class="block" bindtap="playTap" data-id="{{modle.id}}"> (2): 取值 + 传值 playTap:function(e) { const dataset = e.currentTarget.datas

  • 微信小程序转发事件实现解析

    这篇文章主要介绍了微信小程序转发事件实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 和生命周期是同级,在.js文件里面设置 // 分享按钮 onShareAppMessage: function () { return { title: '前端伪大叔', path: "/pages/list/list", imageUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK

  • 微信小程序实现的自定义分享功能示例

    本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

  • 微信小程序通过保存图片分享到朋友圈功能

    说明 首先说明一点,小程序内是不能直接分享到朋友圈的.所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈.然后可以通过在小程序中识别二维码来进入小程序的指定页面.参考市面上支持分享的应用,基本都是这种实现方式. 准备阶段 1.通过服务器获取小程序码 这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码.然后调用wx.getImageInfo将后台生成的小程序码保存起来. 注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不

  • 微信小程序 转发功能的实现

    微信小程序 转发功能的实现 1.当用户将小程序转发到任一群聊之后,可以获取到此次转发的 shareTicket 2.此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch() 或 App.onShow 获取到另一个 shareTicket 3.两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息. onShareAppMessage(options)函数设置该页面的转发信息. options参数说明: from:转发事件来

  • 详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能

    微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=

随机推荐