分享功能组件

manifest.json

@@ -98,7 +98,7 @@
                 },
                 "share" : {
                     "weixin" : {
-                        "appid" : "wxd6a8954fa7b0f8a0",
+                        "appid" : "wx1462df3ea62c7c6e",
                         "UniversalLinks" : "https://cdnks.mtavip.com/mdist/#/login/"
                     }
                 }
@@ -146,7 +146,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx3a4f7c01eb080d14",
+        "appid" : "wx2a7b4bdf85e5cba0",
         "setting" : {
             "urlCheck" : false
         },

uni_modules/uni-share/changelog.md

@@ -0,0 +1,18 @@
+## 2.0.3（2025-08-27）
+新增适配鸿蒙平台
+## 2.0.1（2021-11-29）
+修改错误的`scene`值`WXSenceTimeline`(分享到朋友圈)更正为`WXSceneTimeline`
+## 2.0.0（2021-10-14）
+支持监听返回操作(如：物理返回，全面屏手机侧滑)关闭分享弹窗
+## 1.0.6（2021-08-25）
+兼容vue3
+## 1.0.5（2021-08-05）
+优化代码实现，修改原来用`eval()`函数实现的逻辑
+## 1.0.4（2021-06-07）
+为符合苹果应用市场的审核，只显示存在对应的分享客户端的选项。如：配置包含微信分享，但是用户手机上并没有安装微信，就不显示微信分享。
+## 1.0.2（2021-05-06）
+修复错误的提示：“打包时未添加oauth模块”
+## 1.0.1（2021-04-30）
+新增完整示例
+## 1.0.0（2021-04-28）
+第1版发布

uni_modules/uni-share/js_sdk/uni-image-menu.js

@@ -0,0 +1,203 @@
+var nvMask, nvImageMenu;
+class NvImageMenu {
+	constructor(arg) {
+		this.isShow = false
+	}
+	show({
+		list,
+		cancelText
+	}, callback) {
+		if (!list) {
+			list = [{
+				"img": "/static/sharemenu/wechatfriend.png",
+				"text": "图标文字"
+			}]
+		}
+		//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
+		var screenWidth = plus.screen.resolutionWidth
+		//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
+		//图标下的按钮文字距离图标5像素，文字大小12像素
+		//底部取消按钮高度固定为44px
+		//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
+		var margin = 20,
+			iconWidth = 60,
+			icontextSpace = 5,
+			textHeight = 12
+		var left1 = margin / 360 * screenWidth
+		var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
+		if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
+			margin = 15
+			iconWidth = 40
+			left1 = margin / 360 * screenWidth
+			iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
+		}
+		var left2 = left1 + iconWidth + iconSpace
+		var left3 = left1 + (iconWidth + iconSpace) * 2
+		var left4 = left1 + (iconWidth + iconSpace) * 3
+		var top1 = left1
+		var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
+
+		const TOP = {
+				top1,
+				top2
+			},
+			LEFT = {
+				left1,
+				left2,
+				left3,
+				left4
+			};
+
+		nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
+			top: '0px',
+			left: '0px',
+			height: '100%',
+			width: '100%',
+			backgroundColor: 'rgba(0,0,0,0.2)'
+		});
+		nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
+			bottom: '0px',
+			left: '0px',
+			height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
+			'px', //'264px',
+			width: '100%',
+			backgroundColor: 'rgb(255,255,255)'
+		});
+		nvMask.addEventListener("click", () => { //处理遮罩层点击
+			// console.log('处理遮罩层点击');
+			this.hide()
+			callback({
+				event: "clickMask"
+			})
+		})
+		let myList = []
+		list.forEach((item, i) => {
+			myList.push({
+				tag: 'img',
+				src: item.img,
+				position: {
+					top: TOP['top' + (parseInt(i / 4) + 1)],
+					left: LEFT['left' + (1 + i % 4)],
+					width: iconWidth,
+					height: iconWidth
+				}
+			})
+			myList.push({
+				tag: 'font',
+				text: item.text,
+				textStyles: {
+					size: textHeight
+				},
+				position: {
+					top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
+					left: LEFT['left' + (1 + i % 4)],
+					width: iconWidth,
+					height: textHeight
+				}
+			})
+		})
+
+		//绘制底部图标菜单的内容
+		nvImageMenu.draw([{
+				tag: 'rect', //菜单顶部的分割灰线
+				color: '#e7e7e7',
+				position: {
+					top: '0px',
+					height: '1px'
+				}
+			},
+			{
+				tag: 'font',
+				text: cancelText, //底部取消按钮的文字
+				textStyles: {
+					size: '14px'
+				},
+				position: {
+					bottom: '0px',
+					height: '44px'
+				}
+			},
+			{
+				tag: 'rect', //底部取消按钮的顶部边线
+				color: '#e7e7e7',
+				position: {
+					bottom: '45px',
+					height: '1px'
+				}
+			},
+			...myList
+		])
+		nvMask.show()
+		nvImageMenu.show()
+		// 开始动画
+		/*
+			plus.nativeObj.View.startAnimation({
+				type: 'slide-in-bottom',
+				duration: 300
+			}, nvImageMenu, {}, function() {
+				console.log('plus.nativeObj.View.startAnimation动画结束');
+				// 关闭原生动画
+				plus.nativeObj.View.clearAnimation();
+				nvImageMenu.show()
+			});
+		*/
+
+
+		this.isShow = true
+		nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
+			// console.log("click menu"+JSON.stringify(e));
+			if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
+				// callback({event:"clickCancelButton"})
+				this.hide()
+			} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
+				//屏幕左右边缘5像素及菜单顶部5像素不处理点击
+			} else { //点击了图标按钮
+				var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
+				var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
+				var iCol = -1
+				if (e.clientX < (left2 - (iconSpace / 2))) {
+					iCol = 0
+				} else if (e.clientX < (left3 - (iconSpace / 2))) {
+					iCol = 1
+				} else if (e.clientX < (left4 - (iconSpace / 2))) {
+					iCol = 2
+				} else {
+					iCol = 3
+				}
+				if (iRow == 0) {
+					iClickIndex = iCol
+				} else {
+					iClickIndex = iCol + 4
+				}
+				// console.log("点击按钮的序号: " + iClickIndex);
+				// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
+				// }
+				callback({
+					event: "clickMenu",
+					index: iClickIndex
+				})
+			}
+		})
+		/* nvImageMenu.addEventListener("touchstart", function(e) {
+			if (e.screenY > (plus.screen.resolutionHeight - 44)) {
+				//TODO 这里可以处理按下背景变灰的效果
+			}
+		})
+		nvImageMenu.addEventListener("touchmove", function(e) {
+			//TODO 这里可以处理按下背景变灰的效果
+			if (e.screenY > plus.screen.resolutionHeight - 44) {}
+		})
+		nvImageMenu.addEventListener("touchend", function(e) {
+			//TODO 这里可以处理释放背景恢复的效果
+		})
+		*/
+	}
+
+	hide() {
+		nvMask.hide()
+		nvImageMenu.hide()
+		this.isShow = false
+	}
+}
+
+export default NvImageMenu

uni_modules/uni-share/js_sdk/uni-share.js

@@ -0,0 +1,98 @@
+import UniImageMenu from './uni-image-menu.js';
+class UniShare extends UniImageMenu{
+	constructor(arg) {
+		super()
+		this.isShow = super.isShow
+	}
+	async show(param, callback){
+		var menus = []
+		plus.share.getServices(services => { //只显示有服务的项目
+			services = services.filter(item => item.nativeClient)
+			let servicesList = services.map(e => e.id)
+			param.menus.forEach(item => {
+				if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') {
+					menus.push(item)
+				}
+			})
+			super.show({
+				list: menus,
+				cancelText: param.cancelText
+			}, e => {
+				callback(e)
+				if(e.event == 'clickMenu'){
+					if (typeof(menus[e.index]['share']) == 'string') {
+						this[menus[e.index]['share']](param)
+					} else {
+						uni.share({
+							...param.content,
+							...menus[e.index].share,
+							success: res=> {
+								console.log("success:" + JSON.stringify(res));
+								super.hide()
+							},
+							fail: function(err) {
+								console.log("fail:" + JSON.stringify(err));
+								uni.showModal({
+									content: JSON.stringify(err),
+									showCancel: false,
+									confirmText: "知道了"
+								});
+							}
+						})
+					}
+				}
+			})
+		}, err => {
+			uni.showModal({
+				title: '获取服务供应商失败：' + JSON.stringify(err),
+				showCancel: false,
+				confirmText: '知道了'
+			});
+			console.error('获取服务供应商失败：' + JSON.stringify(err));
+		})
+	}
+	hide(){
+		super.hide()
+	}
+	copyurl(param) {
+		console.log('copyurl',param);
+		uni.setClipboardData({
+			data: param.content.href,
+			success: ()=>{
+				console.log('success');
+				uni.hideToast() //关闭自带的toast
+				uni.showToast({
+					title: '复制成功',
+					icon: 'none'
+				});
+				super.hide();
+			},
+			fail: (err) => {
+				uni.showModal({
+					content: JSON.stringify(err),
+					showCancel: false
+				});
+			}
+		});
+	}
+	// 使用系统分享发送分享消息 
+	shareSystem(param) {
+		console.log('shareSystem',param);
+		plus.share.sendWithSystem({
+			type: 'text',
+			content: param.content.title + param.content.summary || '',
+			href: param.content.href,
+		}, (e)=> {
+			console.log('分享成功');
+			super.hide()
+		}, (err)=> {
+			console.log('分享失败：' + JSON.stringify(err));
+			uni.showModal({
+				title: '获取服务供应商失败：' + JSON.stringify(err),
+				showCancel: false,
+				confirmText: '知道了'
+			});
+		});
+	}
+}
+export default UniShare

uni_modules/uni-share/package.json

@@ -0,0 +1,97 @@
+{
+  "id": "uni-share",
+  "displayName": "uni-share",
+  "version": "2.0.3",
+  "description": "底部弹出宫格图标式的分享菜单，可覆盖原生组件。",
+  "keywords": [
+    "分享菜单"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0",
+    "uni-app": "^4.45",
+    "uni-app-x": ""
+  },
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "sdk-js",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "√",
+        "aliyun": "√",
+        "alipay": "x"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "x",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "vue": "-",
+            "nvue": "-",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "-",
+            "alipay": "-",
+            "toutiao": "-",
+            "baidu": "-",
+            "kuaishou": "-",
+            "jd": "-",
+            "harmony": "-",
+            "qq": "-",
+            "lark": "-"
+          },
+          "quickapp": {
+            "huawei": "-",
+            "union": "-"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
+        }
+      }
+    }
+  }
+}

uni_modules/uni-share/readme.md

@@ -0,0 +1,101 @@
+#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。
+### 示例代码
+```
+<template>
+	<button type="default" @click="uniShare">显示</button>
+</template>
+<script>
+	// #ifndef APP-HARMONY
+	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
+	const uniShare = new UniShare();
+	// #endif
+	// #ifdef APP-HARMONY
+	import { uniShare } from "@/uni_modules/uni-share"
+	// #endif
+	export default {
+		onBackPress({ from }) {
+			console.log(from);
+			if (from == 'backbutton') {
+				this.$nextTick(function() {
+					uniShare.hide()
+				})
+				return uniShare.isShow;
+			}
+		},
+		methods: {
+			uniShare() {
+				// #ifdef APP-HARMONY
+				uniShare(['https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'])
+				// #endif
+				// #ifndef APP-HARMONY
+				uniShare.show({
+					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
+						type: 0,
+						href: 'https://uniapp.dcloud.io/',
+						title: '标题',
+						summary: '描述',
+						imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
+					},
+					menus: [{
+						"img": "/static/app-plus/sharemenu/wechatfriend.png",
+						"text": "微信好友",
+						"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
+							"provider": "weixin",
+							"scene": "WXSceneSession"
+						}
+					}, {
+						"img": "/static/app-plus/sharemenu/wechatmoments.png",
+						"text": "微信朋友圈",
+						"share": {
+							"provider": "weixin",
+							"scene": "WXSceneTimeline"
+						}
+					}, {
+						"img": "/static/app-plus/sharemenu/mp_weixin.png",
+						"text": "微信小程序",
+						"share": {
+							provider: "weixin",
+							scene: "WXSceneSession",
+							type: 5,
+							miniProgram: {
+								id: '123',
+								path: '/pages/list/detail',
+								webUrl: '/#/pages/list/detail',
+								type: 0
+							},
+						}
+					}, {
+						"img": "/static/app-plus/sharemenu/weibo.png",
+						"text": "微博",
+						"share": {
+							"provider": "sinaweibo"
+						}
+					}, {
+						"img": "/static/app-plus/sharemenu/qq.png",
+						"text": "QQ",
+						"share": {
+							"provider": "qq"
+						}
+					}, {
+						"img": "/static/app-plus/sharemenu/copyurl.png",
+						"text": "复制",
+						"share": "copyurl"
+					}, {
+						"img": "/static/app-plus/sharemenu/more.png",
+						"text": "更多",
+						"share": "shareSystem"
+					}],
+					cancelText: "取消分享",
+				}, e => { //callback
+					console.log(uniShare.isShow);
+					console.log(e);
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+```
+
+
+注意: 鸿蒙平台由于不支持 plus,此示例中提供了一个 uts 插件示例来调用分享

uni_modules/uni-share/utssdk/app-harmony/index.uts

@@ -0,0 +1,28 @@
+import { common } from '@kit.AbilityKit';
+import { systemShare } from '@kit.ShareKit';
+import { uniformTypeDescriptor } from '@kit.ArkData';
+
+export function uniShare(list : string[]) {
+	let data : systemShare.SharedData = new systemShare.SharedData({
+		utd: uniformTypeDescriptor.UniformDataType.PLAIN_TEXT,
+		content: 'Hello HarmonyOS'
+	} as systemShare.SharedRecord);
+
+	for (var i = 0; i < list.length; i++) {
+		data.addRecord({
+			utd: uniformTypeDescriptor.UniformDataType.PNG,
+			uri: list[i]
+		} as systemShare.SharedRecord);
+	}
+
+	let controller : systemShare.ShareController = new systemShare.ShareController(data);
+
+	const uiContext = UTSHarmony.getCurrentWindow()!.getUIContext()
+
+	let context : common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;
+
+	controller.show(context, {
+		previewMode: systemShare.SharePreviewMode.DETAIL,
+		selectionMode: systemShare.SelectionMode.SINGLE
+	} as systemShare.ShareControllerOptions);
+}