使用uni-app开发原生APP之安卓QQ分享纯文字

521 阅读2分钟

项目:北极象沉浸式翻译APP

⚠️ IOS的QQ分享可以不传href参数,直接传summary即可,不需要骚操作

一、很常见的分享功能

产品要求,要有分享功能,让用户分享一下内容或者APP本身,后面也可以配合运营做活动,我想了一下,非常合理的需求,那就先看看文档怎么说

在文档里面直接搜 uni.share 就出来了,原来Uniapp都封装好了,支持的也很全面。因为我们分享一期只做微信QQ且分享纯文字即可, API都支持,非常好

PS:分享功能需要在对应平台先申请权限,获取APPID后配置到mainfest.json后才会正常运行

uni.share({
    provider: data.provider,
    type: 1,
    ...(data.provider === 'weixin' ? {
        scene: data.scene
    } : {}),
    summary: this.shareText,
    complete: () => {
        this.close()
    },
    fail: (e) => {
        this.recordLog(e)
    }
})

image.png

保存!运行!点击!

  • 微信分享 - 没问题
  • 朋友圈分享 - 没问题
  • QQ分享 - 哎?!!报错了!!!

二、QQ怎么分享的是链接

按照上面的配置,执行QQ分享的时候,会返回这样一个错误

{
    "errMsg": "share:fail 非纯图片分享必须传递链接地址!,https://ask.dcloud.net.cn/article/282",
    "errCode": -1,
    "code": -1
}

奇怪了,难道我文档没看明白吗,返回文档拉到下面一点,看到了注意事项

image.png

原来QQ分享的时候一定要配置一个hreftitle,那咱们就加上。因为不知道这个链接的作用是干嘛的,所以选择官网的链接试试。

uni.share({
    provider: data.provider,
    type: 1,
    ...(data.provider === 'weixin' ? {
        scene: data.scene
    } : {}),
    ...(data.provider === 'qq' ? {
        title: 'xxx',
        href: site
    } : {}),
    summary: this.shareText,
    complete: () => {
        this.close()
    },
    fail: (e) => {
        this.recordLog(e)
    }
})

保存!运行!点击!运行成功了!查看分享内容!哎?!!怎么内容只有一个链接???

三、github、google且百度

本来是想分享文字的,在QQ这里变成了href的配置的链接

老规矩,先社区 - github - google - 百度一条龙查一下有没有先人留下的足迹。但是很奇怪,没有找到有用的东西,只能自己找源码看了

打开github,找到分享功能相关的实现

export const share = () => {
   plus.share.getServices((services) => {
       //...
   }, errorCallback)
)

看关键函数,原来是直接用了html5plus的函数,继续找html5plus的share,发现了两个限制

  1. 只有安卓限制href必选,ios是正常分享纯文字的 image.png

  2. href会检测格式,但是只要以http://或https://开头就可以了 image.png

四、抓字眼尝试,就硬分享文字

从原始文档得知,href肯定要传,并且会检测格式。但是只说会检测开头的协议是吧,没说一定是完整的链接格式吧,那拼接内容到链接后面试试看

uni.share({
    provider: data.provider,
    type: 1,
    ...(data.provider === 'weixin' ? {
        scene: data.scene
    } : {}),
    ...(data.provider === 'qq' ? {
        title: 'xxx',
        href: `${site}\n\n${this.shareText}`
    } : {}),
    summary: this.shareText,
    complete: () => {
        this.close()
    },
    fail: (e) => {
        this.recordLog(e)
    }
})

保存!运行!点击!运行成功了!查看分享内容! 哎?!!好像没啥问题!!!

4a1ffa05-fb13-48e2-aaca-50cde95972ab.jpg

五、记住问下产品能接受不

经过我的说明,产品对这种分享的文字格式没意见,很愉快地接受了并让我从他桌子上下来