一、前言
APP开发过程中,需要实现分享功能。
常用的分享实现方法包括:
- 系统分享组件;
uniShare SDK
调用;
二、系统分享组件
javascript
uni.shareWithSystem(OBJECT)
调用系统分享组件发送分享消息,不需要配置分享SDK。分享效果为标题+链接+图片
形式,不支持摘要。
注意事项⚠️
Android
端当msg
参数中设置图片(imageUrl
属性)时,分享类型自动变为为image
,在分享时可能只会发送图片(如微信);没有设置图片时分享类型则认为是文本text
。Android
端高版本无法分析私有路径的图片,只能分享来自相册的图片(使用uni.chooseImage
选择图像时请设置为原图)。iOS
端不同的分享程序对分享内容有要求,如微信分享时必须添加链接地址href
,否则微信分享失败。 注:iOS8.0
及以上系统触发成功回调则表示发送消息成功。
javascript
// iOS应用系统自带分享方式
uni.shareWithSystem({
type: "text",
summary: this.detailData.resourceName + summary,
href: href,
imageUrl: "../../../static/logo.png",
success(){
console.log('分享成功');
// 分享完成,请注意此时不一定是成功分享
},
fail(){
console.log('分享失败');
// 分享失败
},
complete() {
console.log('分享完成');
}
});
三、uniShare SDK调用
uni-app
提供了uniShare
组件实现分享。uni-app
的App引擎已经封装了微信、QQ、微博的分享SDK,开发者可以直接调用相关功能。其相对于系统分享组件来说,可设置参数更多。分享效果为标题+摘要+链接+图片
形式。
javascript
import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
const uniShare = new UniShare();
.....
// Android系统应用uniShare SDK调用方式
androidShare(href, summary, imageUrl) {
uniShare.show({
content: { //公共的分享参数配置 类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
type: 0,
href,
title: this.detailData.resourceName,
summary,
imageUrl
},
menus: [
{
"img": "/static/wx.png",
"text": "微信好友",
"share": { //当前项的分享参数配置。可覆盖公共的配置如下:分享到微信小程序,配置了type=5
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/pyq.png",
"text": "朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSceneTimeline"
}
},
// {
// "img": "/static/wb.png",
// "text": "微博",
// "share": {
// "provider": "sinaweibo"
// }
// },
{
"img": "/static/hb.png",
"text": "分享海报",
"share": "sharePoster",
"detailData": {...this.detailData, messageFlag: this.messageFlag}
},
{
"img": "/static/lj.png",
"text": "分享链接",
"share": "copyurl"
},
{
"img": "/static/more.png",
"text": "更多",
"share": "shareSystem"
}
],
cancelText: "取消"
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
})
},
实现效果如下:
四、题外话
4.1 不支持的分享类型
在iOS
平台应用uniShare SDK
调用方式实现微信分享时,给出如下错误提示信息:
出现以上问题的原因是未在微信开发者平台注册应用。
4.2 微信转发链接不显示图片和描述文字
APP转发至微信后,微信内打开内容点击右上角分享功能,发现微信转发链接不显示图片和描述文字,只显示标题,内容可正常查看。
DCloud官方给出的解决方案是:要分享的网页使用 weixin-js-sdk 来配置。