uni-app 小程序分享到朋友和朋友圈
uni-app分享小程序方法
- App：可以自主控制分享内容、分享形式及分享平台
- 使用
uni.shareAPI方式调用社交sdk分享 - 使用plus.share.sendWithSystem呼起手机os的系统分享菜单
- 小程序：不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式
- H5：如果是普通浏览器，浏览器自带分享按钮；如果是在微信内嵌浏览器中，可调用js-sdk进行分享，参考
uni.share(OBJECT)
uni-app的App引擎已经封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。
可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。
可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。
OBJECT 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| provider | String | 是 | 分享服务提供商（即weixin|qq|sinaweibo），通过 uni.getProvider 获取可用的分享服务商，可用是指在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分享到微信时，无法判断用户是否点击取消分享，因为微信官方禁掉了分享成功的返回值。
分享到微信聊天界面示例代码
分享文字
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/[email protected]",
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/[email protected]",
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/[email protected]',
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
设置onload同级函数onShareAppMessage
export default {
onShareAppMessage(res) {
return {
title: '自定义分享标题',
path: '/pages/test/test?id=123'//分享的页面路径
}
}
}