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

Posted No Silver Bullet

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨平台应用开发进阶(五十五):uni-app 实现内容分享相关的知识,希望对你有一定的参考价值。

文章目录

一、前言

APP开发过程中,需要实现分享功能。

常用的分享实现方法包括:

  • 系统分享组件;
  • uniShare SDK调用;

二、系统分享组件

uni.shareWithSystem(OBJECT)

调用系统分享组件发送分享消息,不需要配置分享SDK。

注意事项⚠️

  • android端当msg参数中设置图片(imageUrl属性)时,分享类型自动变为为image,在分享时可能只会发送图片(如微信);没有设置图片时分享类型则认为是文本text
  • 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组件实现分享。其相对于系统分享组件来说,可设置参数更多。

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

实现效果如下:

四、拓展阅读

以上是关于跨平台应用开发进阶(五十五):uni-app 实现内容分享的主要内容,如果未能解决你的问题,请参考以下文章

跨平台应用开发进阶(五十三):uni-app 通过webview方式嵌套H5实现图片点击下载

跨平台应用开发进阶(五十七):uni-app 通过 overrideUrlLoading 实现拦截 webview 窗口的 URL 跳转请求

跨平台应用开发进阶(二十五) :uni-app实现IOS云打包解决IOS提交审核相册等隐私描述语导致审核失败问题

跨平台应用开发进阶(四十五)uni-app集成企微客服实战

跨平台应用开发进阶(四十五)uni-app集成企微客服实战

跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决