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

最新推荐文章于 2024-05-04 03:46:59 发布

2401_84438654

最新推荐文章于 2024-05-04 03:46:59 发布

阅读量43

点赞数 3

分类专栏：程序员文章标签： uni-app

本文链接：https://blog.csdn.net/2401_84438654/article/details/138431245

版权

程序员专栏收录该内容

161 篇文章 0 订阅

订阅专栏

本文介绍了uni-app中在Android和iOS平台上使用uniShareSDK进行图片分享的注意事项，包括Android对私有路径图片的限制、iOS微信分享需提供链接地址，并展示了不同分享类型的调用方法和iOS平台微信分享的错误提示。

摘要由CSDN通过智能技术生成

Android端高版本无法分析私有路径的图片，只能分享来自相册的图片（使用 uni.chooseImage 选择图像时请设置为原图）。
iOS端不同的分享程序对分享内容有要求，如微信分享时必须添加链接地址href，否则微信分享失败。注：iOS8.0及以上系统触发成功回调则表示发送消息成功。

// 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，开发者可以直接调用相关功能。其相对于系统分享组件来说，可设置参数更多。分享效果为标题+摘要+链接+图片形式。

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);
})
},

实现效果如下：

在这里插入图片描述