微信小程序分享功能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 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
JavaScript接口实现方法实例分析
May 16 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
德劲1103的维修打理经验
2021/03/02 无线电
深入apache host的配置详解
2013/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
python pandas 时间日期的处理实现
2019/07/30 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
《夕阳真美》教学反思
2014/04/27 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
团日活动总结模板
2014/06/25 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis