小程序的分享 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. 三元运算符 c = a if a>b else b

    def my(a,b): c = a if a>b else b return c d = my(1,12)print(d)

  2. [MongoDB]------windos远程服务器部署连接

    1.连接前的准备 这里就省略了服务器上安装的操作,跟上一节是一样的流程. 连接到远程服务器,首先需要到远程服务器上在mongoDb安装根目录下的bin文件夹(默认安装目录是C:\Program Fil ...

  3. 利用Gson将JSON数据进行格式化(pretty print)

    我们可以利用Gson包将String类型的JSON数据进行格式化. Gson gson = new GsonBuilder().setPrettyPrinting().create(); JsonPa ...

  4. Spring 读取配置文件的俩种方式

    读取配置可通过 org.springframework.core.env.Environment 类来获取, 也可以通过@Value的方式来获取 注解形式: @PropertySource({&quo ...

  5. memset struct含有string的崩溃

    2019/4/2 补充一下 这里如果填充为0,则不会崩溃,填充为非0时,再次调用赋值就会崩溃 推测非0拷贝破坏了string内部的数据结构,不要对任何类使用memset https://blog.cs ...

  6. 红黑树及其实例JDK中的TreeMap

    红黑树是一种自平衡二叉查找树(binary search tree,BST),红黑树是一种比较复杂的数据结构,红黑树查找.插入.删除元素的时间复杂度为O(log n),n是树中元素的数目.文章的要讲的 ...

  7. hadoop学习;hdfs操作;执行抛出权限异常: Permission denied;api查看源代码方法;源代码不停的向里循环;抽象类通过debug查找源代码

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010026901/article/details/26587251 eclipse快捷键alt+s ...

  8. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  9. BZOJ3786:星系探索(Splay,括号序)

    Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球 ...

  10. 1562. [NOI2009]变换序列【二分图】

    Description Input Output Sample Input 5 1 1 2 2 1 Sample Output 1 2 4 0 3 HINT 30%的数据中N≤50: 60%的数据中N ...