uni-app 小程序分享到朋友和朋友圈

news/2025/1/15 21:39:52/

uni-app分享小程序方法

  • App:可以自主控制分享内容、分享形式及分享平台
  • 使用 uni.share API方式调用社交sdk分享
  • 使用plus.share.sendWithSystem呼起手机os的系统分享菜单
  • 小程序:不支持API调用,只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容
  • H5:如果是普通浏览器,浏览器自带分享按钮;如果是在微信内嵌浏览器中,可调用js-sdk进行分享,参考

uni.share(OBJECT)

uni-app的App引擎已经封装了微信、QQ、微博的分享SDK,开发者可以直接调用相关功能。

可以分享到微信、QQ、微博,每个社交平台被称为分享服务提供商,即provider。

可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意,分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序(通常为内容页)方式直接分享给微信好友。

OBJECT 参数说明

参数名类型必填说明
providerString分享服务提供商(即weixin|qq|sinaweibo),通过 uni.getProvider 获取可用的分享服务商,可用是指在manifest.json的sdk配置中配的分享sdk厂商,与本机安装了什么社交App无关
typeNumber分享形式,如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0。不同分享服务商支持的形式不同,具体参考下面type值说明。
titleString分享内容的标题
sceneStringprovider 为 weixin 时必选场景,可取值参考下面说明。
summaryStringtype 为 1 时必选分享内容的摘要
hrefStringtype 为 0 时必选跳转链接
imageUrlStringtype 为 0、2、5 时必选图片地址。type为0时,推荐使用小于20Kb的图片
mediaUrlStringtype 为 3、4 时必选音视频地址
miniProgramObjecttype 为 5 时必选分享小程序必要参数
successFunction接口调用成功的回调
failFunction接口调用失败的回调函数
completeFunction

接口调用结束的回调函数(调用成功、失败都会执行)

 

type 值说明

说明provider 支持度
0图文weixin、sinaweibo
1纯文字 
2纯图片 
3音乐weixin、qq
4视频weixin、sinaweibo
5小程序weixin

scene 值说明

说明
WXSceneSession分享到聊天界面
WXSenceTimeline分享到朋友圈
WXSceneFavorite分享到微信收藏

miniProgram 值说明

类型说明
idString微信小程序原始id
pathString点击链接进入的页面
typeNumber微信小程序版本类型,可取值: 0-正式版; 1-测试版; 2-体验版。 默认值为0。
webUrlString兼容低版本的网页链接

 

注意事项:

  • 真机运行时,分享调用的是HBuilder真机运行基座的sdk配置,分享出去的内容会显示为HBuilder。需自行在各社交平台注册账户,在manifest的sdk配置中填写自己的配置,打包后生效。
  • 分享到 QQ 必须含有 href 链接
  • 分享文字到 QQ 时,title 必选
  • 新浪微博仅支持分享本地音视频,不能分享网络音视频
  • 仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码。一般通过canvas绘制图片,插件市场有很多生成图片的插件。
  • 在 iOS 端,若未安装微博客户端,会启用微博的网页分享,此时不能分享图片
  • 分享新浪微博不会返回正确的成功回调
  • 不能直接分享到QQ空间,可以分享到QQ,然后在QQ的界面里选择QQ空间。
  • 分享微信朋友圈多图,微信官方已经禁掉这个功能。可以考虑把多张图用canvas合并成一张图分享出去。
  • 从APP分享到微信时,无法判断用户是否点击取消分享,因为微信官方禁掉了分享成功的返回值。

分享到微信聊天界面示例代码

分享文字

uni.share({provider: "weixin",scene: "WXSceneSession",type: 1,summary: "我正在使用HBuilderX开发uni-app,赶紧跟我一起来体验!",success: function (res) {console.log("success:" + JSON.stringify(res));},fail: function (err) {console.log("fail:" + JSON.stringify(err));}
});

分享图片

uni.share({provider: "weixin",scene: "WXSceneSession",type: 2,imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",success: function (res) {console.log("success:" + JSON.stringify(res));},fail: function (err) {console.log("fail:" + JSON.stringify(err));}
});

分享图文

href、imageUrl 为必选参数,title/summary 二选一,最好将这四个参数都选上。

uni.share({provider: "weixin",scene: "WXSceneSession",type: 0,href: "http://uniapp.dcloud.io/",title: "uni-app分享",summary: "我正在使用HBuilderX开发uni-app,赶紧跟我一起来体验!",imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",success: function (res) {console.log("success:" + JSON.stringify(res));},fail: function (err) {console.log("fail:" + JSON.stringify(err));}
});

App分享为微信小程序(App中分享一个内容到微信好友,对方微信中呈现的是一个小程序卡片)

uni.share({provider: 'weixin',scene: "WXSceneSession",type: 5,imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png',title: '欢迎体验uniapp',miniProgram: {id: 'gh_abcdefg',path: 'pages/index/index',type: 0,webUrl: 'http://uniapp.dcloud.io'},success: ret => {console.log(JSON.stringify(ret));}
});

uni.share配置

  • 第一步,打开 manifest.json -> App模块权限配置,勾选 Share(分享);
  • 第二步,按如下文档具体配置微信、微博、QQ的参数。配置文档

button方法

在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey

<!-- #ifdef MP-WEIXIN --><button class="share-btn" open-type="share">分享</button>
<!-- #endif -->

设置onload同级函数onShareAppMessage 

export default {onShareAppMessage(res) {return {title: '自定义分享标题',path: '/pages/test/test?id=123'//分享的页面路径}}
}

 


http://www.ppmy.cn/news/462599.html

相关文章

vue2和vue3组件v-model区别

前言 单向数据流&#xff0c;父组件传给子组件的数据&#xff0c;子组件只能展示&#xff0c;不能修改&#xff0c;如果需要修改则需要emit事件让父组件修改 有些时候&#xff0c;一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用&am…

electron+vue 实现静默打印

我的electron版本&#xff1a;^12.0.0; vue版本&#xff1a;^3.2.13。 我是通过webview实现的。 实现原理&#xff1a;webview类似于iframe&#xff0c;其实是electron中的一个内嵌窗口&#xff0c;打印的也就是这个内嵌窗口的内容。 那么就需要一个html作为内嵌内容。所以共…

商务蓝牙耳机什么牌子的好?商务通话蓝牙耳机推荐

随着时代的发展&#xff0c;人们对自我享受的要求越来越高&#xff0c;比起与三朋好友约会还不如静下心来听听音乐。当然了&#xff0c;一次美好的享受需要性价比好的设备。如果你也想体验蓝牙耳机带来的静谧美好的纯净享受&#xff0c;下面给你带来性价比好、降噪强、高颜值的…

【SpringCloud】Eureka 案例上手稍微带点原理

文章目录 1. 前置工作1.1 搭建 user-server1.1.1 pom1.1.2 po&#xff0c;mapper&#xff0c;controller1.1.3 yml1.1.4 启动类1.1.5 启动并访问 1.2 搭建 order-server1.2.1 pom1.2.2 po mapper controller1.2.3 yml1.2.4 启动类1.2.5 启动并访问 1.3 两个服务通信 2. Eureka2…

c# 从零到精通 dataGridView控件插入数据

c# 从零到精通 dataGridView控件插入数据 using System; using System.Data; using System.Text; using System.Windows.Forms; using System.Windows; using System.Drawing; namespace Test05 { public partial class Form1 : Form { public Form1() { InitializeComponent()…

断触问题分析思路

在使用手机的时候&#xff0c;有时候会出现触碰中断的异常问题&#xff0c;比如点击无效&#xff0c;已经存在的触碰事件突然消失&#xff0c;这种问题很直观&#xff0c;用户体验很差。 如果能够复现问题&#xff0c;抓到实时log&#xff0c;分析起来会清楚很多。可以打开开发…

小米游戏本8代 风扇噪音大解决办法

来源于&#xff1a;https://tieba.baidu.com/p/6772997477 之前困扰了很久&#xff0c;清过灰&#xff0c;换过硅脂&#xff0c;可还是没有什么用&#xff0c;经过不懈努力终于发现了解决方法 右键电源图标&#xff0c;电源选项&#xff0c;更改计划设置&#xff0c;更改高级电…

小米8成功刷入Win11ARM64完整版系统

本文转载自IT之家 IT之家 6 月 29 日消息 今天凌晨&#xff0c;微软面向 Dev 开发频道发布了第一个 Windows 11 Insider Preview 版本&#xff0c;即 Build 22000.51! 微软表示&#xff0c;随着我们在未来几个月内完成产品的定型&#xff0c;我们将与你一起验证这一体验。在这…