跨平台应用开发进阶(五十五)：uni-app实现内容分享(代码片段)

关键词：

文章目录

• • 一、前言
  • 二、系统分享组件
  • 三、uniShare SDK调用
  • 四、拓展阅读

一、前言

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.shareWithSystem(OBJECT)
• uni-share SDK

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

文章目录一、前言二、实现方案三、拓展阅读一、前言在项目开发过程中，遇到uni-app通过webview嵌套H5项目，实现H5中图片点击下载的需求。二、实现方案实现思路：需要用到Bitmap，把base64转成bitmap文件对象，... 查看详情

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

文章目录一、问题描述二、问题分析三、解决方案：IOS云打包修改权限提示语3.1IOS隐私信息3.2设置方法四、拓展阅读一、问题描述Guideline5.1.1-Legal-Privacy-DataCollectionandStorageWenoticedthatyourapprequeststheuser’sconsenttoaccessthecamera,butdoes... 查看详情

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

文章目录一、问题描述二、问题分析三、解决方案：IOS云打包修改权限提示语3.1IOS隐私信息3.2设置方法四、拓展阅读一、问题描述Guideline5.1.1-Legal-Privacy-DataCollectionandStorageWenoticedthatyourapprequeststheuser’sconsenttoaccessthecamera,butdoes... 查看详情

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

文章目录一、前言二、功能实现2.1环境准备2.2代码层面2.3拓展工具三、拓展阅读一、前言应用运营过程中，考虑接入企业微信客服功能，大致看了下官方接入文档，并不困难，引入代码量也不大。按照手册来操作... 查看详情

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

文章目录一、前言二、功能实现2.1环境准备2.2代码层面2.3拓展工具三、拓展阅读一、前言应用运营过程中，考虑接入企业微信客服功能，大致看了下官方接入文档，并不困难，引入代码量也不大。按照手册来操作... 查看详情

跨平台应用开发进阶(五十七)：uni-app通过overrideurlloading实现拦截webview窗口的url跳转请求(代码片段)

文章目录一、前言二、overrideUrlLoading二、码上解决三、拓展阅读一、前言项目需求：通过uni-app的webview嵌入H5页面，且webview的src为互联网页面访问地址，页面中涉及很多可点击链接，若不加限制，则可以在webvie... 查看详情

跨平台应用开发进阶(四十五)uni-app自定义组包app:checkreleaseduplicateclasses问题分析及解决(代码片段)

文章目录一、问题描述二、问题分析三、解决方案四、拓展阅读一、问题描述应用uni-app进行android自定义基座打包时，发生打包失败，错误提示信息截图如下：二、问题分析项目集成极光时引入的依赖包中的gson-2.6.2.ja... 查看详情

跨平台应用开发进阶(四十五)uni-app自定义组包app:checkreleaseduplicateclasses问题分析及解决(代码片段)

文章目录一、问题描述二、问题分析三、解决方案四、拓展阅读一、问题描述应用uni-app进行android自定义基座打包时，发生打包失败，错误提示信息截图如下：二、问题分析项目集成极光时引入的依赖包中的gson-2.6.2.ja... 查看详情

跨平台应用开发进阶(三十五)：android权限列表permission说明(代码片段)

文章目录一、前言二、权限信息汇总一、前言uni-app开发完APP后，上架到应用市场，审核时会对APP内部设置的权限进行核准，并给出相应的理由。如项目中有以下权限设置："android":"permissions":["<uses... 查看详情

跨平台应用开发进阶(三十五)：android权限列表permission说明(代码片段)

文章目录一、前言二、权限信息汇总一、前言uni-app开发完APP后，上架到应用市场，审核时会对APP内部设置的权限进行核准，并给出相应的理由。如项目中有以下权限设置："android":"permissions":["<uses... 查看详情

跨平台应用开发进阶(二十四)：uni-app实现文件下载并保存(代码片段)

...开四、图片保存到本机相册五、拓展阅读一、资源下载APP应用开发过程中，资源下载是一种常见应用场景。uni-app中应用uni.downloadFile实现文件下载功能。示例代码如下：downLoadFile()constdownloadTask=uni.downloadFile(url:'http://... 查看详情

跨平台应用开发进阶(三十)：uni-app实现集成火山视频直播服务(代码片段)

文章目录一、前言二、技术实现2.1web-view组件在app中的窗体关系和plus.webview操作方式三、双向通信3.1uni-app与内嵌网页通信3.2内嵌网页向uni-app发消息四、实现案例五、直播5.1拉流直播5.2推流直播六、拓展阅读一、前言项目开发进... 查看详情

跨平台应用开发进阶(三十四)：uni-app应用universallink实现ios微信分享(代码片段)

文章目录一、前言二、UniversalLink2.1UniversalLink(通用链接)概览2.2如何理解UniversalLink(通用链接)2.3UniversalLink(通用链接)应用场景2.4使用UniversalLink(通用链接)跳转的好处三、UniversalLinks实现iOS微信分享3.1传统方式3.2uniCloud前端网页托管... 查看详情

跨平台应用开发进阶(三十一)：uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗(代码片段)

文章目录一、前言二、实现方案三、拓展阅读一、前言应用uni-app跨平台框架进行项目开发过程中，需要实现版本更新时全页面弹窗，底部导航栏无法点击的效果。但是，在uni-app中popup弹窗及对话框的遮罩层是覆盖不... 查看详情

跨平台应用开发进阶(二十九)：uni-app实现android原生app-云打包集成神策详细教程(代码片段)

...置公共属性3.6设置用户属性三、拓展阅读一、前言uni-app应用开发过程中&# 查看详情

跨平台应用开发进阶(二十九)：uni-app实现android原生app-云打包集成神策详细教程(代码片段)

文章目录一、前言二、集成2.1集成uni-app插件2.2云端集成原生插件2.3离线集成2.3.1获取插件包2.3.2在HBuilderX中集成原生插件2.4集成结果验证三、使用uni-app进行埋点3.1APP.vue文件配置+globalData全局埋点3.2代码埋点（代码侵入性强... 查看详情

跨平台应用开发进阶(五十)uni-appiosweb-view嵌套h5项目白屏问题分析及解决(代码片段)

文章目录一、前言二、问题分析三、解决方案3.1nvue页面替代vue页面3.2白屏检测刷新3.2.1自动刷新3.2.2手动刷新3.3总结四、拓展阅读一、前言应用uni-app框架开发好APP上架使用过程中，发现应用经过长时间由后台切换至前台时... 查看详情

跨平台应用开发进阶(五十)uni-appiosweb-view嵌套h5项目白屏问题分析及解决(代码片段)

文章目录一、前言二、问题分析三、解决方案3.1nvue页面替代vue页面3.2白屏检测刷新3.2.1自动刷新3.2.2手动刷新3.3总结四、拓展阅读一、前言应用uni-app框架开发好APP上架使用过程中，发现应用经过长时间由后台切换至前台时... 查看详情