**分享** 在不同平台，分享的调用方式和逻辑有较大差异。 - App：可以自主控制分享内容、分享形式及分享平台 1. 使用 ``uni.share`` API方式调用社交sdk分享 2. 使用[plus.share.sendWithSystem](http://www.html5plus.org/doc/zh_cn/share.html#plus.share.sendWithSystem)呼起手机os的系统分享菜单 - 小程序：不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容 - H5：如果是普通浏览器，浏览器自带分享按钮；如果是在微信内嵌浏览器中，可调用js-sdk进行分享，[参考](https://ask.dcloud.net.cn/article/35380)| ### uni.share(OBJECT) uni-app的App引擎已经封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。 可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。 可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。 **平台差异说明** |App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序| |:-:|:-:|:-:|:-:|:-:|:-:|:-:| |√|x|x|x|x|x|x| **OBJECT 参数说明** |参数名|类型|必填|说明| |:-|:-|:-|:-| |provider|String|是|分享服务提供商（即weixin|qq|sinaweibo），通过 [uni.getProvider](/api/plugins/provider) 获取可用的分享服务商，可用是指在manifest.json的sdk配置中配的分享sdk厂商，与本机安装了什么社交App无关| |type|Number|否|分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0。不同分享服务商支持的形式不同，具体参考下面type值说明。| |title|String|否|分享内容的标题| |scene|String|provider 为 weixin 时必选|场景，可取值参考下面说明。| |summary|String|type 为 1 时必选|分享内容的摘要| |href|String|type 为 0 时必选|跳转链接| |imageUrl|String|type 为 0、2、5 时必选|图片地址。type为0时，推荐使用小于20Kb的图片| |mediaUrl|String|type 为 3、4 时必选|音视频地址| |miniProgram|Object|type 为 5 时必选|分享小程序必要参数| |success|Function|否|接口调用成功的回调| |fail|Function|否|接口调用失败的回调函数| |complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| **type 值说明** |值|说明|provider 支持度| |:-|:-|:-| |0|图文|weixin、sinaweibo| |1|纯文字|| |2|纯图片|| |3|音乐|weixin、qq| |4|视频|weixin、sinaweibo| |5|小程序|weixin| **scene 值说明** |值|说明| |:-|:-| |WXSceneSession|分享到聊天界面| |WXSenceTimeline|分享到朋友圈| |WXSceneFavorite|分享到微信收藏| **miniProgram 值说明** |值|类型|说明| |:-|:-|:-| |id|String|微信小程序原始id| |path|String|点击链接进入的页面| |type|Number|微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。| |webUrl|String|兼容低版本的网页链接| **注意事项：** * 真机运行时，分享调用的是HBuilder真机运行基座的sdk配置，分享出去的内容会显示为HBuilder。需自行在各社交平台注册账户，在manifest的sdk配置中填写自己的配置，打包后生效。 * 分享到 QQ 必须含有 href 链接 * 分享文字到 QQ 时，title 必选 * 新浪微博仅支持分享本地音视频，不能分享网络音视频 * 仅支持分享微信小程序到微信聊天界面，想进入朋友圈需改为分享图片方式，在图片中包含小程序码。一般通过canvas绘制图片，插件市场有很多生成图片的插件。 * 在 iOS 端，若未安装微博客户端，会启用微博的网页分享，此时不能分享图片 * 分享新浪微博不会返回正确的成功回调 * 不能直接分享到QQ空间，可以分享到QQ，然后在QQ的界面里选择QQ空间。 * 分享微信朋友圈多图，微信官方已经禁掉这个功能。可以考虑把多张图用canvas合并成一张图分享出去。 * 从APP分享到微信时，无法判断用户是否点击取消分享，因为微信官方禁掉了分享成功的返回值。 #### 分享到微信聊天界面示例代码 **分享文字** ```javascript 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)); } }); ``` **分享图片** ```javascript 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 二选一，最好将这四个参数都选上。 ```javascript 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)); } }); ``` #### 分享到微信朋友圈示例代码 **分享文字** ```javascript uni.share({ provider: "weixin", scene: "WXSenceTimeline", type: 1, summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！", success: function (res) { console.log("success:" + JSON.stringify(res)); }, fail: function (err) { console.log("fail:" + JSON.stringify(err)); } }); ``` **分享图片** ```javascript uni.share({ provider: "weixin", scene: "WXSenceTimeline", 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 至少有一项。 ```javascript uni.share({ provider: "weixin", scene: "WXSenceTimeline", 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中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片） ```javascript 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 在App端各社交平台分享配置说明 - 第一步，打开 manifest.json -> App模块权限配置，勾选 Share(分享)； - 第二步，按如下文档具体配置微信、微博、QQ的参数。 ##### 微信分享 在 manifest.json 的 App SDK 配置里，勾选微信消息及朋友圈，并填写 appid，如需在iOS平台使用还需要配置通用链接。 **参考文档** - 微信 appid 申请步骤：[https://ask.dcloud.net.cn/article/208](https://ask.dcloud.net.cn/article/208)。 - iOS平台微信SDK配置通用链接：[https://ask.dcloud.net.cn/article/36445](https://ask.dcloud.net.cn/article/36445)。 ![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/mp-weixin-manifest-share.png) ##### 新浪微博分享 在 manifest.json 的 App SDK 配置里，勾选勾选新浪微博，并填写相关appkey，新浪微博 appkey 申请步骤可参考：[https://ask.dcloud.net.cn/article/209](https://ask.dcloud.net.cn/article/209)。 ![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni2019022502.png) ##### QQ 分享 在 manifest.json 的 App SDK 配置里，勾选分享到QQ好友，并填写相关appkey，QQ分享 appkey 申请步骤： 1. 前往 QQ 开放平台：[https://connect.qq.com/index.html](https://connect.qq.com/index.html)； 2. 完成开发者注册； 3. 创建应用，选择移动 App，填写相关信息，然后等待审核，审核通过后即可得到AppId。 ![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni2019022503.png) 这些配置需要打包生效，真机运行仍然是HBuilder基座的设置，可使用[自定义基座包](http://ask.dcloud.net.cn/article/12723)调试。离线打包请参考离线打包文档在原生工程中配置。 配置并打包后，通过`uni.getProvider`可以得到配置的结果列表，注意这里返回的是manifest配置的，与手机端是否安装微信、QQ、微博无关。 如果手机端未安装QQ、微博，调用时会启动这些平台的wap页面分享，如果已安装相应客户端，会启动它们的客户端分享。 ##### FAQ - Q：App端如何集成其他分享SDK，如facebook分享、twitter分享 - A：插件市场已有相关插件，[详见](https://ext.dcloud.net.cn/search?q=share)；也可以根据原生插件教程自行开发，原生插件开发文档见[https://ask.dcloud.net.cn/article/35428](https://ask.dcloud.net.cn/article/35428) - Q：弹出分享菜单，是否有已经写好的插件？ - A：插件市场有很多封装好的分享菜单插件，[底部图标菜单](https://ext.dcloud.net.cn/search?q=%E5%BA%95%E9%83%A8%E5%9B%BE%E6%A0%87%E8%8F%9C%E5%8D%95)，可直接弹出菜单，并且没有遮挡层级问题，推荐使用。 ### uni.shareWithSystem(OBJECT) 调用系统分享组件发送分享消息，不需要配置分享SDK **平台差异说明** |App |H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 | |:-: |:-:|:-: |:-: |:-: |:-: |:-: | |√(App 2.6.4+) |x |x |x |x |x |x | **OBJECT 参数说明** |参数名 |类型 |必填 |说明 | |:- |:- |:- |:- | |type |String |- |分享类型，只支持text，image，默认为text| |summary |String |- |分享的文字内容 | |href |String |- |分享链接，ios端分享到微信时必填此字段 | |imageUrl |String |- |分享图片，仅支持本地路径 | **注意事项** - Android端当msg参数中设置图片（`imageUrl`属性）时，分享类型自动变为为`image`，在分享时可能只会发送图片（如微信）；没有设置图片时分享类型则认为是文本`text`。 - iOS端不同的分享程序对分享内容有要求，如微信分享时必需添加链接地址`href`，否则微信分享失败。 注：iOS8.0及以上系统触发成功回调则表示发送消息成功。 **示例代码** ```javascript uni.shareWithSystem({ summary: '', href: 'https://uniapp.dcloud.io', success(){ // 分享完成，请注意此时不一定是成功分享 }, fail(){ // 分享失败 } }) ``` ### plus.share.sendWithSystem(msg, successCB, errorCB) Android和iOS都有应用注册分享接口的机制，基本上所有有接收分享内容功能的应用，都会注册分享接口。 App端可调用手机的系统分享，实现所有注册分享的应用的呼起，比如短信、邮件、蓝牙(仅Android)、隔空投送(仅iOS)，或其他注册系统分享的应用，比如钉钉。 与`uni.share`相比，调用系统分享不需要集成三方sdk。但有些功能上的限制，比如无法分享为微信小程序。 **平台差异说明** |App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序| |:-:|:-:|:-:|:-:|:-:|:-:|:-:| |√|x|x|x|x|x|x| 说明： 调用系统分享组件分享消息，通过msg参数设置分享内容。 发送成功后通过successCB回调函数通知操作完成，发送失败则通过errorCB回调返回。 |参数|类型|说明| |:-|:-|:-| |msg|object|要发送的分享消息对象，如文字内容，图片等信息。对象格式见下。必填| |successCB||成功回调，可选。注：此回调仅保证呼起分享界面，并不表示分享消息已经发送成功| |errorCB||失败回调，可选| **msg参数说明** |参数|类型|说明| |:-|:-|:-| |type|String|分享类型，仅支持text、image| |content|String|分享消息的文字内容| |pictures|Array[ String ]|分享消息中包含的图片路径，仅支持本地路径。 若分享平台仅支持提交一张图片，传入多张图片则仅提交第一张图片。 如果未指定type类型，优先级顺序为：pictures>content（即设置了pictures则认为分享图片类型）。| |href|String|分享独立的链接地址，仅支持网络地址（以http://或https://开头）。 如果未指定type类型，优先级顺序为：href>pictures>content（即设置了href则认为分享网页类型）。| **示例代码** ```javascript plus.share.sendWithSystem({content:'分享内容',href:'https://www.dcloud.io/'}, function(){ console.log('分享成功'); }, function(e){ console.log('分享失败：'+JSON.stringify(e)); }); ``` **注意** - Android：当msg参数中设置图片（msg.pictures属性）时，分享类型为"image"，在分享时可能只会发送图片（如微信）；没有设置图片时分享类型则认为是文本"text"。 - iOS：不同的分享程序对分享内容有要求，如微信分享时必需添加链接地址（msg.href），否则微信分享失败。 注：iOS8.0及以上系统表示分享操作成功则表示发送消息成功。 - 很多App的做法是点击分享按钮首先弹出一个自定义菜单，放置微信好友、朋友圈、QQ、微博等功能图标，然后再放置一个更多分享，点击后会调用系统分享。类似插件在[插件市场](https://ext.dcloud.net.cn/search?q=%E5%BA%95%E9%83%A8%E5%9B%BE%E6%A0%87%E8%8F%9C%E5%8D%95)很多。 ### onShareAppMessage(OBJECT) 小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。 * 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（\