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

「爱情、让人受尽委屈。」 2023-02-25 07:06 106阅读 0赞

uni-app分享小程序方法

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

### [uni.share(OBJECT)][uni.share_OBJECT] ###

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

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

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

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>provider</td> 
   <td>String</td> 
   <td>是</td> 
   <td>分享服务提供商（即weixin|qq|sinaweibo），通过&nbsp;<a href="https://uniapp.dcloud.io/api/plugins/provider" rel="nofollow">uni.getProvider</a>&nbsp;获取可用的分享服务商，可用是指在manifest.json的sdk配置中配的分享sdk厂商，与本机安装了什么社交App无关</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>Number</td> 
   <td>否</td> 
   <td>分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0。不同分享服务商支持的形式不同，具体参考下面type值说明。</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>String</td> 
   <td>否</td> 
   <td>分享内容的标题</td> 
  </tr> 
  <tr> 
   <td>scene</td> 
   <td>String</td> 
   <td>provider 为 weixin 时必选</td> 
   <td>场景，可取值参考下面说明。</td> 
  </tr> 
  <tr> 
   <td>summary</td> 
   <td>String</td> 
   <td>type 为 1 时必选</td> 
   <td>分享内容的摘要</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>String</td> 
   <td>type 为 0 时必选</td> 
   <td>跳转链接</td> 
  </tr> 
  <tr> 
   <td>imageUrl</td> 
   <td>String</td> 
   <td>type 为 0、2、5 时必选</td> 
   <td>图片地址。type为0时，推荐使用小于20Kb的图片</td> 
  </tr> 
  <tr> 
   <td>mediaUrl</td> 
   <td>String</td> 
   <td>type 为 3、4 时必选</td> 
   <td>音视频地址</td> 
  </tr> 
  <tr> 
   <td>miniProgram</td> 
   <td>Object</td> 
   <td>type 为 5 时必选</td> 
   <td>分享小程序必要参数</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td> <p>接口调用结束的回调函数（调用成功、失败都会执行）</p> </td> 
  </tr> 
 </tbody> 
</table>

**type 值说明**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>provider 支持度</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>图文</td> 
   <td>weixin、sinaweibo</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>纯文字</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>纯图片</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>音乐</td> 
   <td>weixin、qq</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>视频</td> 
   <td>weixin、sinaweibo</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>小程序</td> 
   <td>weixin</td> 
  </tr> 
 </tbody> 
</table>

**scene 值说明**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>WXSceneSession</td> 
   <td>分享到聊天界面</td> 
  </tr> 
  <tr> 
   <td>WXSenceTimeline</td> 
   <td>分享到朋友圈</td> 
  </tr> 
  <tr> 
   <td>WXSceneFavorite</td> 
   <td>分享到微信收藏</td> 
  </tr> 
 </tbody> 
</table>

**miniProgram 值说明**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>String</td> 
   <td>微信小程序原始id</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td>点击链接进入的页面</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>Number</td> 
   <td>微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。</td> 
  </tr> 
  <tr> 
   <td>webUrl</td> 
   <td>String</td> 
   <td>兼容低版本的网页链接</td> 
  </tr> 
 </tbody> 
</table>

**注意事项：**

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

## [分享到微信聊天界面示例代码][Link 2] ##

### 分享文字 ###

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的参数。[配置文档][Link 3]

## button方法 ##

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

<button class="share-btn" open-type="share">分享</button>

设置onload同级函数onShareAppMessage

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

[plus.share.sendWithSystem]: http://www.html5plus.org/doc/zh_cn/share.html#plus.share.sendWithSystem
[Link 1]: https://ask.dcloud.net.cn/article/35380
[uni.share_OBJECT]: https://uniapp.dcloud.io/api/plugins/share?id=share
[Link 2]: https://uniapp.dcloud.io/api/plugins/share?id=%E5%88%86%E4%BA%AB%E5%88%B0%E5%BE%AE%E4%BF%A1%E8%81%8A%E5%A4%A9%E7%95%8C%E9%9D%A2%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
[Link 3]: https://uniapp.dcloud.io/api/plugins/share?id=unishare-%E5%9C%A8app%E7%AB%AF%E5%90%84%E7%A4%BE%E4%BA%A4%E5%B9%B3%E5%8F%B0%E5%88%86%E4%BA%AB%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E