Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >分享:微信小程序中的分享事件

分享:微信小程序中的分享事件

原创
作者头像
疯狂的小程序
发布于 2018-01-25 09:43:32
发布于 2018-01-25 09:43:32
2.6K0
举报
文章被收录于专栏:疯狂的小程序疯狂的小程序

小程序的分享 onShareAppMessage(options)

在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

  1. 只有定义了该函数,小程序右上角的菜单中才会有转发按钮
  2. 用户点击转发按钮的时候回调用该函数
  3. 该函数内需要 return 一个 Object,Object中包含转发的信息(可自定义转发的内容)

页面中有可以触发转发时间的地方有两个:

  一个是右上角菜单中的转发按钮

  另一个是页面中具有属性open-type且其值为share的button。(注:必须是button组件,其他组件中设置 open-type="share" 无效)

  即:转发

  注意:实际开发中会发现这个 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'){

// 用户取消转发

      }elseif(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;

}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序分享功能onShareAppMessage(options)用法分析
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
8.3K0
微信小程序实现带参分享并消息卡片获取参数
公司小程序开发已经接近尾声,功能已在测试,现在有个需求,就是小程序分享功能,并在消息卡片打开后数据依然显示。
青年码农
2020/11/23
4.5K0
微信小程序实现带参分享并消息卡片获取参数
火了 超赞的功能!小程序开发内嵌web页面的功能,今天学习了吗
小程序开发内嵌web页面的功能,这个对于很多微信开发者都是个重大消息。 支持小程序内嵌网页,并且在内嵌网页中多次跳转,分享后,点开还是在跳转之后的网页。 首先,当然是参考微信小程序的api。 其实使用起来特别简单,只需在页面中放入这样一个标签即可,其中src一定是要在小程序管理中心配置过的。特别注意一下,web-view会占满整个页面,不管这个页面有什么其它的东西,都不会展示出来。 好了。有了这个可以开始进入需求实现的阶段了。对于分享功能,做过小程序开发的都不会陌生,在需要被分享的页面js中加入onSh
企鹅号小编
2018/01/29
8770
微信小程序 转发、分享、预览
之前做过的微信小程序项目,则涉及到很多转发分享的功能,例如 页面的分享-到朋友圈-好友,文件(图片 doc pdf )的分享给好友等等,开发中用到的api方法和遇到的问题,今天在这里统一总结记录下。
iwhao
2024/07/01
1.2K0
前端-小程序分享,看这篇就够了
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上的扩展。
grain先森
2019/03/29
2.7K0
前端-小程序分享,看这篇就够了
微信全面调整分享能力:开发者应该注意什么?
近期官方更新了开发文档,今天知晓君就为大家从开发层面上分析一下这次更新的内容。 1. 「用户从小程序、小游戏中分享消息到微信聊天时,你将无法获知用户是否分享完成,也无法在用户分享后就立即获得群 ID」,在微信更新的 API 中的 onShareAppMessage(options) 转发函数将不再提供回调结果。 onShareAppMessage(options)回调类型errMsg说明successshareAppMessage:ok转发成功failshareAppMessage:fail cancel用
知晓君
2018/06/28
9980
微信小程序入门文档下载_小程序开发教程全集免费
最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式。
全栈程序员站长
2022/09/20
10.8K0
微信小程序入门文档下载_小程序开发教程全集免费
微信小程序 转发功能实例讲解
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/81082526
泥豆芽儿 MT
2018/09/11
2.4K0
微信小程序 转发功能实例讲解
微信小程序分享功能的使用
分享小程序需要在js中定义OnShareAppMessage函数或者在按钮中设置open-type属性;效果如下图所示,在真机上的效果就是点击分享后先选择你的好友再弹出模拟器中的模态框 效果图 图片 wxml <button open-type="share">分享</button> js Page({ onShareAppMessage: function() { //return一个对象,用于自定义转发内容 return { title: '分享标题', //转发标
peng_tianyu
2022/12/15
1.3K0
微信小程序分享功能的使用
微信小程序开发之页面转发 onShareAppMessage 转发参数用处
最近在玩小程序,感觉以后这个会爆发,嗯开始搞起来吧 今天来讲解下微信小程序是分享功能制作,由于微信更新,将分享功能改成了转发功能,下面是效果图
李维亮
2021/07/09
2.9K0
微信小程序开发之页面转发 onShareAppMessage 转发参数用处
【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证
随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积限制的影响,不能够完全满足用户的要求,应运而生的web-view组件很好的解决的这一问题。
愚公搬代码
2022/09/28
8850
【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证
【微信小程序】小程序自定义随机分享图片
 🍉🍉🍉大家好,我是痴心阿文,你们的学友哥 。 本章内容:微信小程序分享功能,支持自定义分享随机图片。看完需要花费5分钟,效果图如下:   🍉🍉🍉HTML 区域 <button open-type='share' type='warn' size="mini" plain="true" id='btnShare0'>推荐给好友</button>   🍉🍉🍉JS区域  //分享功能 onShareAppMessage: function (res) { var shareimg
痴心阿文
2022/11/18
1.1K0
【微信小程序】小程序自定义随机分享图片
开发必读:盘点与业务转化息息相关的小程序能力
​作为小程序开发,日常很大的一部分工作就是满足业务部门的需求,配合业务应用落地、营销活动。以下为大家盘点一下,在日常工作中常常用到的,和营销与业务转化息息相关的小程序能力。避免篇幅太长,这个系列将分成一二两期呈现。
海岛船长加西亚
2023/12/12
1950
​05-微信小程序常用组件-表单组件
微信小程序包含了六大组件:视图容器、基础内容、导航、表单、互动和导航。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。
鱼多多
2023/11/23
1.9K0
​05-微信小程序常用组件-表单组件
微信小程序那点事儿(必看&踩坑&实用&解决BUG)------持续更新(2)
我们可以根据上边两个API获取系统信息 e.g. pixelRatio(设备像素比) screenWidth(屏幕宽度) locationAuthorized(允许微信使用定位的开关) bluetoothEnabled(蓝牙的系统开关) locationEnabled(地理位置的系统开关) wifiEnabled(wifiEnabled) 但是这两个方法有个共同的问题是 在真机调试的情况下,不能实时更新返回的信息 e.g. 点击按钮 获取 手机地理位置的系统开关 来判断是否提示用户打开GPS 如果在真机调试的情况下 手动打开关闭手机中的位置开关 点击按钮得到的结果并不会根据手机的状态进行更新 则不能达到你想要的效果,此时可以直接预览 打开调试 进行测试即可
我只会写Bug啊
2023/12/25
3390
微信小程序的 5 种分享方式,你知道几种?(含技术实现方案)
在微信生态中,微信小程序的裂变传播效果尤为显著,而实现裂变的关键在于分享方式。在小程序内提供更多的分享方式就能让触达更多的用户,我将为大家详细介绍微信小程序的 5 种分享方式以及技术实现方案。
陈宇明
2025/02/26
4390
微信小程序的 5 种分享方式,你知道几种?(含技术实现方案)
一文教会你|uniapp微信小程序分享怎么写?uniapp 微信小程序当前页面未设置分享?
打开项目的manifest.json文件,在“App模块配置”项的“Share(分享)”下,勾选“微信分享”:
肥晨
2024/07/12
2.7K0
一文教会你|uniapp微信小程序分享怎么写?uniapp 微信小程序当前页面未设置分享?
微信小程序快速入门开发指南(三)
          url: app.globalData.uploadfileUrl,  //后台接收上传文件的接口
初九之潜龙勿用
2024/06/20
1530
【愚公系列】2022年02月 微信小程序-页面生命周期
注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
愚公搬代码
2022/12/01
5410
[猫头虎分享21天微信小程序基础入门教程] 第17天:小程序的用户授权与安全
大家好,我是猫头虎,一名全栈软件工程师。今天我们继续微信小程序的学习,重点了解如何实现用户授权和确保小程序的安全性。这些内容对于保护用户隐私和数据安全至关重要。🚀
猫头虎
2024/05/28
1760
推荐阅读
相关推荐
微信小程序分享功能onShareAppMessage(options)用法分析
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档