小程序的分享 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', // 默认是当前页面,必须是以‘/’开头的完整路径
    imgUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持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;
}

微信小程序中的分享事件的更多相关文章

  1. 微信小程序中的bindTap事件(微信小程序开发QQ群:604788754)

    bindTap对应的绑定事件, 第一个:wx.navigateTo wx.navigateTo({ url:"../content/content" }) 第二个:wx.redir ...

  2. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  3. 微信小程序中的事件绑定

    前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...

  4. 微信小程序中,如何阻止多次点击单击事件

    在微信小程序中,有自制对话框用于提交数据,但是会出现用户连续点击,多次提交数据的情况. //.wxml <view class="acertain" bindtap=&quo ...

  5. 微信小程序首次官方分享的纪要

    先交代备注: 这次有关小程序的分享只有技术的 QA环节,其他如产品.入口.流量.与公众号的整合等等,回答都是暂时无法给出答案或不确定: 小程序最终发布时间官方也还未确定,不过说应该就是近期: 小程序的 ...

  6. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  7. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  8. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  9. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

随机推荐

  1. 绕过CDN查找网站真实IP方法收集

    方法1很简单,使用各种多地 ping 的服务,查看对应 IP 地址是否唯一,如果不唯一多半是使用了CDN, 多地 Ping 网站有: http://ping.chinaz.com/ http://pi ...

  2. laravel 资料

    1.http://maxoffsky.com/maxoffsky-blog/building-a-shop-with-laravel-tutorial-series-announcement/  一篇 ...

  3. 取消centOS7虚拟机锁屏

    https://blog.csdn.net/ViJayThresh/article/details/81076622

  4. linux系统下安装两个或多个tomcat

    编辑环境变量:vi /etc/profile 加入以下代码(tomcat路径要配置自己实际的tomcat安装目录) ##########first tomcat########### CATALINA ...

  5. Hive学习之路 (十八)Hive的Shell操作

    一.Hive的命令行 1.Hive支持的一些命令 Command Description quit Use quit or exit to leave the interactive shell. s ...

  6. mysql报错:/usr/sbin/mysqld:unknown variable 'default-character-set=utf8'

    修改mysql的字符集时,为了将默认字符集设置为utf-8,便将/etc/my.cnf下[mysqld]加了一行 default-character-set=utf8, 但是在下次启动系统的时候,my ...

  7. java final使用

    一:final 1:有时候 我们需要一些类,不要被继承.即阻止定义子类.不允许扩展的类叫做final类,如果一个类在定义的时候,用final定义的时候,表示这个类是final类.无法定义子类. 语法 ...

  8. C语言 有关内存的思考题

    非原创. 今天笔试时候遇到的问题,原文链接见底部. 1 void GetMemory(char *p) { p = (); } void Test(void) { char *str=NULL; Ge ...

  9. [转]Kafka 设计与原理详解

    一.Kafka简介 本文综合了我之前写的kafka相关文章,可作为一个全面了解学习kafka的培训学习资料. 1 2 1 2 转载请注明出处 : 本文链接 1.1 背景历史 当今社会各种应用系统诸如商 ...

  10. 《Java 程序设计》课堂实践项目-数据库

    <Java 程序设计>课堂实践项目数据库 课后学习总结 目录 数据库实验要求 课堂实践成果 课后思考 由于担心做的不好,找同学询问了数据库的问题,学习了数据库的连通,补写的这篇博客.这是补 ...