微信小程序分享功能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 相关文章推荐
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
瀑布流布局代码一例
Apr 11 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
安装vue-cli的简易过程
May 22 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
PHP中实现图片的锐化
2006/10/09 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
微信小程序云开发(数据库)详解
2019/05/17 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python删除文本中行数标签的方法
2018/05/31 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python实现接口并发测试脚本
2019/06/25 Python
python interpolate插值实例
2020/07/06 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
华润集团网上药店:健一网
2016/09/19 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
运动会闭幕式主持词
2015/07/01 职场文书
子女赡养老人协议书
2016/03/23 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
SQL注入详解及防范方法
2021/12/06 MySQL