跨平台应用开发进阶(三十九)uni-app实现内容分享

一、前言

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 来配置。

五、拓展阅读

相关推荐
AI浩12 小时前
【Labelme数据操作】LabelMe标注批量复制工具 - 完整教程
运维·服务器·前端
涔溪13 小时前
CSS 网格布局(Grid Layout)核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
前端·css
2401_8784545313 小时前
浏览器工作原理
前端·javascript
西陵13 小时前
为什么说 AI 赋能前端开发,已经不是选择题,而是必然趋势?
前端·架构·ai编程
by__csdn14 小时前
Vue3 setup()函数终极攻略:从入门到精通
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
天天扭码15 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
Luna-player15 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu051915 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys15 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选15 小时前
GELab-Zero 技术解析:当豆包联手中兴,开源界如何守住端侧 AI 的“最后防线”?
前端·aigc