• uni.share(OBJECT)
    • 分享到微信聊天界面
    • 分享到微信朋友圈
  • onShareAppMessage(OBJECT)
  • uni.showShareMenu(OBJECT)
  • uni.hideShareMenu(OBJECT)
  • App 端各平台分享配置说明
    • 微信分享
    • 新浪微博分享
    • QQ 分享
      • FAQ

    uni.share(OBJECT)

    分享到社交平台(微信、QQ、微博、短信、邮件等)

    平台差异说明

    平台说明
    App使用 uni.share 进行分享,需要在 manifest.json 里配置各平台分享所必需的的字段,如appid、appsecret等
    小程序不支持方法调用,只能用户主动点击触发分享,可使用
    H5如果是普通浏览器,浏览器自带分享按钮;如果是在微信内嵌浏览器中调用js-sdk,参考

    OBJECT 参数说明

    参数名类型必填说明
    providerString分享服务提供商,通过 uni.getProvider 获取。
    typeNumber分享类型。默认图文 0,更多值参考下面说明。
    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兼容低版本的网页链接

    注意事项:

    • App端可调用手机的系统分享,实现所有注册分享的应用的呼起,比如短信、邮件等,具体参考plus.share.sendWithSystem的API文档
    • 插件市场有一个封装好的分享菜单,直接弹出底部图标菜单,并且没有遮挡层级问题,推荐使用,https://ext.dcloud.net.cn/plugin?id=69
    • uni.share API 仅用于 App 平台。小程序平台的分享,请参考 小程序分享指引。
    • 分享到 QQ 必须含有 href 链接
    • 分享文字到 QQ 时,title 必选
    • 新浪微博仅支持分享本地音视频
    • 仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码
    • 在 iOS 端,若未安装微博客户端,会启用微博的网页分享,此时不能分享图片
    • 分享新浪微博不会返回正确的成功回调
    • 不能直接分享到QQ空间,可以分享到QQ,然后在QQ的界面里选择QQ空间。
    • 分享微信朋友圈多图,微信官方已经禁掉这个功能。可以考虑把多张图用canvas合并成一张图分享出去。

    分享到微信聊天界面

    分享文字

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

    分享图片

    1. uni.share({
    2. provider: "weixin",
    3. scene: "WXSceneSession",
    4. type: 2,
    5. imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
    6. success: function (res) {
    7. console.log("success:" + JSON.stringify(res));
    8. },
    9. fail: function (err) {
    10. console.log("fail:" + JSON.stringify(err));
    11. }
    12. });

    分享图文

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

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

    分享到微信朋友圈

    分享文字

    1. uni.share({
    2. provider: "weixin",
    3. scene: "WXSenceTimeline",
    4. type: 1,
    5. summary: "我正在使用HBuilderX开发uni-app,赶紧跟我一起来体验!",
    6. success: function (res) {
    7. console.log("success:" + JSON.stringify(res));
    8. },
    9. fail: function (err) {
    10. console.log("fail:" + JSON.stringify(err));
    11. }
    12. });

    分享图片

    1. uni.share({
    2. provider: "weixin",
    3. scene: "WXSenceTimeline",
    4. type: 2,
    5. imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
    6. success: function (res) {
    7. console.log("success:" + JSON.stringify(res));
    8. },
    9. fail: function (err) {
    10. console.log("fail:" + JSON.stringify(err));
    11. }
    12. });

    分享图文

    href、imageUrl 为必选参数,title、summary 至少有一项。

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

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

    1. uni.share({
    2. provider: 'weixin',
    3. type: 5,
    4. imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png',
    5. title: '欢迎体验uniapp',
    6. miniProgram: {
    7. id: 'gh_abcdefg',
    8. path: 'pages/index/index',
    9. type: 0,
    10. webUrl: 'http://uniapp.dcloud.io'
    11. },
    12. success: ret => {
    13. console.log(JSON.stringify(ret));
    14. }
    15. });

    onShareAppMessage(OBJECT)

    小程序中用户点击分享后,在 js 中定义 onShareAppMessage 处理函数(和 onLoad 等生命周期函数同级),设置该页面的分享信息。

    • 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮();
    • 此事件需要 return 一个Object,用于自定义分享内容。平台差异说明
    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xx
    参数类型说明平台差异说明
    fromString分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮)
    targetObject如果 from 值是 button,则 target 是触发这次分享事件的 button,否则为 undefined
    webViewUrlString页面中包含 <web-view> 组件时,返回当前 <web-view> 的url微信小程序、支付宝小程序

    此事件需要 return 一个 Object,用于自定义分享内容,其内容如下:

    参数名类型必填说明平台差异说明
    titleString分享标题
    pathString页面 path ,必须是以 / 开头的完整路径。
    imageUrlString分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径
    contentString百度小程序表现为:分享内容;支付宝小程序表现为:吱口令文案百度小程序、支付宝小程序
    descString自定义分享描述支付宝小程序
    bgImgUrlString自定义分享二维码的背景图,建议大小750*950(网络图片路径)支付宝小程序
    successFunction接口调用成功的回调函数支付宝小程序、百度小程序
    failFunction接口调用失败的回调函数支付宝小程序、百度小程序
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)百度小程序

    示例代码

    1. export default {
    2. onShareAppMessage(res) {
    3. if (res.from === 'button') {// 来自页面内分享按钮
    4. console.log(res.target)
    5. }
    6. return {
    7. title: '自定义分享标题',
    8. path: '/pages/test/test?id=123'
    9. }
    10. }
    11. }

    uni.showShareMenu(OBJECT)

    小程序的原生菜单中显示分享按钮

    1.6.0 新增

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xxx
    属性类型必填说明平台差异说明
    withShareTicketBoolean是否使用带 shareTicket 的转发,默认为 flase。详情微信小程序
    titleString分享标题百度小程序
    contentString分享内容百度小程序
    imageUrlString分享图标百度小程序
    pathString页面 path ,必须是以 / 开头的完整路径。百度小程序
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    uni.hideShareMenu(OBJECT)

    小程序的原生菜单中隐藏分享按钮

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xxx
    属性类型必填说明
    successfunction接口调用成功的回调函数
    failfunction接口调用失败的回调函数
    completefunction接口调用结束的回调函数(调用成功、失败都会执行)

    代码示例

    1. uni.hideShareMenu()

    App 端各平台分享配置说明

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

    微信分享

    在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 申请步骤可参考:https://ask.dcloud.net.cn/article/208。

    分享 - 图1

    新浪微博分享

    在 manifest.json 的 App SDK 配置里,勾选勾选新浪微博,并填写相关appkey,新浪微博 appkey 申请步骤可参考:https://ask.dcloud.net.cn/article/209。

    分享 - 图2

    QQ 分享

    在 manifest.json 的 App SDK 配置里,勾选分享到QQ好友,并填写相关appkey,QQ分享 appkey 申请步骤:

    • 前往 QQ 开放平台:https://connect.qq.com/index.html;
    • 完成开发者注册;
    • 创建应用,选择移动 App,填写相关信息,然后等待审核,审核通过后即可得到AppId。分享 - 图3

    这些配置需要打包生效,真机运行仍然是HBuilder基座的设置,可使用自定义基座包。离线打包请参考离线打包文档在原生工程中配置。

    配置并打包后,通过uni.getProvider可以得到配置的结果列表,注意这里返回的是manifest配置的,与手机端是否安装微信、QQ、微博无关。

    如果手机端未安装QQ、微博,调用时会启动这些平台的wap页面分享,如果已安装相应客户端,会启动它们的客户端分享。

    FAQ
    • Q:App端如何集成其他登陆SDK
    • A:使用原生插件方式,可以集成三方sdk,原生插件开发文档见https://ask.dcloud.net.cn/article/35428。开发之前可以先去插件市场看下有没有做好的。

    发现错误?想参与编辑?在 GitHub 上编辑此页面!