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


Posted in Javascript onApril 24, 2019

本文实例讲述了微信小程序分享功能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;
}

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

Javascript 相关文章推荐
Stop SQL Server
Jun 21 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 #Javascript
Vue源码解析之数据响应系统的使用
Apr 24 #Javascript
详解微信小程序文件下载--视频和图片
Apr 24 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
会计专业自荐信范文
2013/12/02 职场文书
高中化学教学反思
2014/01/13 职场文书
教导处工作制度
2014/01/18 职场文书
犯错检讨书
2014/02/21 职场文书
法人授权委托书样本
2014/09/19 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
火烧圆明园的观后感
2015/06/03 职场文书