提交

uni_modules/zhouWei-APPshare/changelog.md

@@ -0,0 +1,8 @@
+## 2.0.3（2021-07-12）
+修改关闭回调bug
+## 2.0.2（2021-06-25）
+修复图标不显示问题
+## 2.0.1（2021-06-07）
+修改图片不显示bug
+## 2.0.0（2021-05-12）
+1. 支持uni_modules

uni_modules/zhouWei-APPshare/js_sdk/appShare.js

@@ -0,0 +1,400 @@
+// #ifdef APP-PLUS
+let alphaBg, shareMenu, showState = false;
+// 关闭弹窗
+export const closeShare = function(){
+	alphaBg && alphaBg.close();
+	alphaBg && shareMenu.close();
+	if(showState){
+		showState = false;
+		return true
+	} else {
+		showState = false;
+		return false
+	}
+}
+// 复制
+function onCopy(item, shareInfo,callback) {
+	let copyInfo = shareInfo.shareUrl || shareInfo.shareContent || shareInfo.shareImg;
+	if (copyInfo) {
+		uni.setClipboardData({
+			data: copyInfo,
+			success:() => {
+				uni.showToast({
+					title: "已复制到剪贴板",
+					icon: "none"
+				});
+				callback && callback(item);
+			}
+		});
+	} 
+}
+// 更多
+function onMore(item, shareInfo,callback) {
+	plus.share.sendWithSystem({
+		type: "text",
+		title: shareInfo.shareTitle || "",
+		href: shareInfo.shareUrl || "",
+		content: shareInfo.shareContent || "",
+	},function(res){ 
+		callback && callback(item);
+	},function(err){
+		console.log(err);
+	});
+}
+// 分享
+function onShare(item, shareInfo,callback) {
+	if (shareInfo.type == undefined) {
+		shareInfo.type = item.type;
+	}
+	let shareObj = {
+		provider: item.provider,
+		type: shareInfo.type,
+		success: (res) => {
+			callback && callback(item);
+			console.log("success:" + JSON.stringify(res));
+		},
+		fail: (err) => {
+			console.log("分享失败，参数缺失 fail:" + JSON.stringify(err));
+		}
+	};
+	if (shareInfo.shareTitle) {
+		shareObj.title = shareInfo.shareTitle;
+	}else if(item.provider == "qq"){
+		uni.showToast({
+			title: "缺失分享的标题",
+			icon: "none"
+		});
+		return;
+	}
+	if(shareInfo.type == 0 || item.provider == "qq"){
+		if (shareInfo.shareUrl) {
+			shareObj.href = shareInfo.shareUrl;
+		}else{
+			uni.showToast({
+				title: "缺失分享的地址",
+				icon: "none"
+			});
+			return;
+		}
+	}
+	if([0,1,3,4].includes(shareInfo.type)){
+		if (shareInfo.shareContent) {
+			shareObj.summary = shareInfo.shareContent;
+		}else{
+			uni.showToast({
+				title: "缺失分享的描述",
+				icon: "none"
+			});
+			return;
+		}
+	}
+	if([0,2,5].includes(shareInfo.type)){
+		if (shareInfo.shareImg) {
+			shareObj.imageUrl = shareInfo.shareImg;
+		}else{
+			uni.showToast({
+				title: "缺失分享的图片",
+				icon: "none"
+			});
+			return;
+		}
+	}
+	if([3,4].includes(shareInfo.type)){
+		if (shareInfo.mediaUrl) {
+			shareObj.mediaUrl = shareInfo.mediaUrl;
+		}else{
+			uni.showToast({
+				title: "缺失分享的音视频地址",
+				icon: "none"
+			});
+			return;
+		}
+	}
+	if(shareInfo.type == 5){
+		if (shareInfo.appId && shareInfo.appPath && shareInfo.appWebUrl) {
+			shareObj.miniProgram = {
+				id:shareInfo.appId,
+				path:shareInfo.appPath,
+				webUrl:shareInfo.appWebUrl,
+			};
+			if(shareInfo.appType){
+				shareObj.miniProgram.type = shareInfo.appType;
+			}
+		}else{
+			uni.showToast({
+				title: "缺失分享小程序的参数",
+				icon: "none"
+			});
+			return;
+		}
+	}
+	if (item.scene) {
+		shareObj.scene = item.scene;
+	}
+	uni.share(shareObj);
+}
+let otherShareList = [
+	{
+		icon: "/uni_modules/zhouWei-APPshare/static/icon_copy.png",
+		text: "复制",
+		provider: "copy",
+		onClick: onCopy
+	},
+	{
+		icon: "/uni_modules/zhouWei-APPshare/static/icon_more.png",
+		text: "更多",
+		provider: "more",
+		onClick: onMore
+	}
+];
+let platformShareList = [];
+// 获取服务商支持的分享
+uni.getProvider({
+	service: 'share',
+	success: function (res) {
+		if (res.provider.includes('sinaweibo')) {
+			platformShareList = [{
+				icon: "/uni_modules/zhouWei-APPshare/static/icon_weibo.png", 
+				text: "新浪微博",
+				onClick: onShare,
+				provider: "sinaweibo",
+				type: 0
+			}].concat(platformShareList);
+		}
+		if (res.provider.includes('qq')) {
+			platformShareList = [{
+				icon: "/uni_modules/zhouWei-APPshare/static/icon_qq.png",
+				text: "QQ",
+				onClick: onShare,
+				provider: "qq",
+				type: 1
+			}].concat(platformShareList);
+		}
+		if (res.provider.includes('weixin')) {
+			platformShareList = [{
+				icon: "/uni_modules/zhouWei-APPshare/static/icon_weixin.png",
+				text: "微信好友",
+				onClick: onShare,
+				provider: "weixin",
+				scene: "WXSceneSession",
+				type: 0
+			},
+			{
+				icon: "/uni_modules/zhouWei-APPshare/static/icon_pengyouquan.png",
+				text: "朋友圈",
+				onClick: onShare,
+				provider: "weixin",
+				scene: "WXSenceTimeline",
+				type: 0
+			},
+			{
+				icon: "/uni_modules/zhouWei-APPshare/static/ic_xiaochengxu.png",
+				text: "小程序",
+				onClick: onShare,
+				provider: "weixin",
+				scene: "WXSceneSession",
+				type: 5
+			}].concat(platformShareList);
+		}
+	}
+});
+// 根据type类型过滤掉不支持的平台
+function platformFilter(data){
+	let platformList = [];
+	let supportList = [
+		["weixin","sinaweibo"],
+		["weixin","sinaweibo","qq"],
+		["weixin","sinaweibo","qq"],
+		["weixin","qq"],
+		["weixin","sinaweibo"],
+		["weixin"],
+	];
+	let currentSupport = [];
+	if(data.type >= 0 && data.type <= 5){
+		currentSupport = supportList[data.type];
+	}
+	platformShareList.forEach((item,index) => {
+		if(data.type >= 0 && data.type <= 5){
+			if(currentSupport.includes(item.provider)){
+				if(item.provider == "weixin"){
+					if(item.text == "小程序"){
+						if(data.type == 5){
+							platformList.push(item);
+						}
+					}else if(data.type !== 5){
+						platformList.push(item);
+					}
+				} else {
+					platformList.push(item);
+				}
+			}
+		}else{
+			if(item.provider == "weixin"){
+				if(item.text == "小程序"){
+					if(data.appId && data.appPath){
+						platformList.push(item);
+					}
+				}else {
+					platformList.push(item);
+				}
+			} else {
+				platformList.push(item);
+			}
+		}
+	});
+	return platformList.concat(otherShareList);
+}
+// 数据处理
+function dataFactory(shareInfo = {}) {
+	let config = {
+		...shareInfo
+	};
+	config.shareTitle = shareInfo.shareTitle || "";
+	config.shareUrl = shareInfo.shareUrl || "";
+	config.shareContent = shareInfo.shareContent || "分享的描述";
+	config.shareImg = shareInfo.shareImg || "分享的图片";
+	return config;
+}
+export default function (shareInfo, callback) {
+	shareInfo = dataFactory(shareInfo);
+	// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
+	let screenWidth = plus.screen.resolutionWidth
+	//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
+	//图标下的按钮文字距离图标5像素，文字大小12像素
+	//底部取消按钮高度固定为44px
+	//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
+	let marginTop = 25, //上间距
+		marginLeft = 25, //左间距
+		iconWidth = 55, //图标宽宽
+		iconHeight = 55, //图标高度
+		icontextSpace = 10, //图标与文字间距
+		textHeight = 12 //文字大小
+	let left1 = marginLeft / 360 * screenWidth;
+	let colNumber = Math.floor(screenWidth / (iconWidth + marginLeft));
+	let i = (screenWidth - (iconWidth + marginLeft) * colNumber - marginLeft) / (colNumber + 1);
+	let initMargin = marginLeft + i;
+	let itemWidth = iconWidth + initMargin;
+	let itemHeight = iconHeight + icontextSpace + textHeight + marginTop;
+	let textTop = iconHeight + icontextSpace;
+	alphaBg = new plus.nativeObj.View("alphaBg", { //先创建遮罩层
+		top: '0px',
+		left: '0px',
+		height: '100%',
+		width: '100%',
+		backgroundColor: 'rgba(0,0,0,0.5)'
+	});
+	alphaBg.addEventListener("click", function () { //处理遮罩层点击
+		alphaBg && alphaBg.close();
+		shareMenu && shareMenu.close();
+		if(showState){
+			showState = false;
+		} else {
+			showState = false;
+		}
+	});
+	let shareList = platformFilter(shareInfo);
+	shareMenu = new plus.nativeObj.View("shareMenu", { //创建底部图标菜单
+		bottom: '0px',
+		left: '0px',
+		height: Math.ceil(shareList.length / colNumber) * itemHeight + marginTop + 44 + 1 + 'px',
+		width: '100%',
+		backgroundColor: 'rgb(255,255,255)'
+	});
+	//绘制底部图标菜单的内容
+	shareMenu.draw([{
+		tag: 'rect', //菜单顶部的分割灰线
+		color: '#e7e7e7',
+		position: {
+			top: '0px',
+			height: '1px'
+		}
+	},
+	{
+		tag: 'font',
+		id: 'sharecancel', //底部取消按钮的文字
+		text: '取消分享',
+		textStyles: {
+			size: '14px'
+		},
+		position: {
+			bottom: '0px',
+			height: '44px'
+		}
+	},
+	{
+		tag: 'rect', //底部取消按钮的顶部边线
+		color: '#e7e7e7',
+		position: {
+			bottom: '45px',
+			height: '1px'
+		}
+	}
+	]);
+	shareList.map((v, k) => {
+		let time = new Date().getTime();
+		let row = Math.floor(k / colNumber);
+		let col = k % colNumber;
+		let item = [{
+			src: v.icon,
+			id: Math.random() * 1000 + time,
+			tag: "img",
+			position: {
+				top: row * itemHeight + marginTop,
+				left: col * itemWidth + initMargin,
+				width: iconWidth,
+				height: iconWidth
+			}
+		}, {
+			text: v.text,
+			id: Math.random() * 1000 + time,
+			tag: "font",
+			textStyles: {
+				size: textHeight
+			},
+			position: {
+				top: row * itemHeight + textTop,
+				left: col * itemWidth + initMargin,
+				width: iconWidth,
+				height: iconWidth
+			}
+		}];
+		shareMenu.draw(item);
+	});
+	shareMenu.addEventListener("click", function (e) { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
+		if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
+			alphaBg && alphaBg.close();
+			shareMenu && shareMenu.close();
+			if(showState){
+				showState = false;
+			} else {
+				showState = false;
+			}
+		} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
+			//屏幕左右边缘5像素及菜单顶部5像素不处理点击
+		} else { //点击了图标按钮
+			let x = e.clientX;
+			let y = e.clientY;
+			let colIdx = Math.floor(x / itemWidth);
+			let rowIdx = Math.floor(y / itemHeight);
+			let tapIndex = colIdx + rowIdx * colNumber;
+			shareList[tapIndex].onClick(shareList[tapIndex], shareInfo,callback);
+		}
+	});
+	alphaBg.show();
+	shareMenu.show();
+	showState = true;
+	return {
+		close: function(){
+			alphaBg && alphaBg.close();
+			alphaBg && shareMenu.close();
+			if(showState){
+				showState = false;
+				return true
+			} else {
+				showState = false;
+				return false
+			}
+		}
+	};
+};
+// #endif

uni_modules/zhouWei-APPshare/package.json

@@ -0,0 +1,78 @@
+{
+  "id": "zhouWei-APPshare",
+  "displayName": "APP分享、微博分享、QQ分享、微信好友、朋友圈",
+  "version": "2.0.3",
+  "description": "APP分享、微博分享、QQ分享、微信好友、朋友圈",
+  "keywords": [
+    "APP分享",
+    "分享",
+    "微信分享"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "n",
+          "Android Browser": "n",
+          "微信浏览器(Android)": "n",
+          "QQ浏览器(Android)": "n"
+        },
+        "H5-pc": {
+          "Chrome": "n",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "n",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}

uni_modules/zhouWei-APPshare/readme.md

@@ -0,0 +1,101 @@
+# APP分享、微博分享、QQ分享、微信好友、朋友圈
+
+| `QQ交流群(607391225)`         | `微信交流群（加我好友备注"进群"）`                  |
+| ----------------------------|--------------------------- |
+|![QQ交流群](http://qn.kemean.cn//upload/202004/14/15868301778472k7oubi6.png)|![微信交流群](https://qn.kemean.cn/upload/202010/13/weiXin_group_code.jpg)|
+| QQ群号：607391225 |微信号：zhou0612wei|
+
+### [点击跳转-插件示例](https://ext.dcloud.net.cn/plugin?id=2009)
+### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
+
+### 使用方法 第一步
+在`manifest.json`文件里面的`App SDK配置`的`分享`配置对应的平台参数（`不配置参数`在自定义基座里面只会显示`复制`和`更多`， 配置之后要`重新打包`才`生效`）
+
+### 常见问题
+1. 运行示例报错
+
+答：不要在H5、小程序等浏览器上面运行，此插件只适合在android、IOS上运行
+
+2. 分享图标不显示
+
+答：插件里面static文件里面的图片放到根目录的static文件里面， 直接导入插件，结构有问题
+
+3. 分享出去的图片不显示
+
+答：本分享插件使用的官方分享API，有分享问题，仔细研究官方的分享API
+
+
+### 使用方法 第二步
+```
+<template>
+	<button type="default" @click="onShare">APP分享</button>
+</template>
+
+<script>
+	// 引入方法
+	import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
+	export default {
+		methods: {
+			onShare(){
+				let shareData = {
+					shareUrl:"https://kemean.com/",
+					shareTitle:"分享的标题",
+					shareContent:"分享的描述",
+					shareImg:"http://qn.kemean.cn//upload/202004/18/1587189024467w6xj18b1.jpg",
+					appId : "wxd0e0881530ee4444", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
+					appPath : "pages/home/home",
+					appWebUrl : "https://kemean.com/",
+				};
+				// 调用
+				let shareObj = appShare(shareData,res => {
+					console.log("分享成功回调",res);
+					// 分享成功后关闭弹窗
+					// 第一种关闭弹窗的方式
+					closeShare();
+				});
+				setTimeout(() => {
+					// 第二种关闭弹窗的方式
+					shareObj.close();
+				},5000);
+			}
+		}
+	}
+</script>
+```
+### 插件说明
+| 参数名称	     | 类型 	 | 默认值	    | 描述
+| -------------- |---------- | ------------ | --------------------------------------- |
+| shareUrl  	 | String	 | --    | 分享的地址`（type 为 0 时必传）`         |
+| shareTitle	 | String	 | --       	| 分享的标题                               |
+| shareContent	 | String	 | 分享的描述	| 分享的描述`（type 为 1 时必传）`          |
+| shareImg  	 | String	 | 分享的图片	| 分享的图片`（type 为 0、2、5 时必传）`    |
+| mediaUrl	     | String	 | --	        | 分享的音视频地址`（type 为 3、4 时必传）` |
+| type  	     | Number	 | 参考平台默认值| 分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等，具体参考下面type说明|
+
+### type 值说明
+| 值   	  | 说明 	 | 支持平台	     | 
+| ------- |--------- | ------------- |
+| 0   	  | 图文 	 | 微信、新浪微博 | 
+| 1   	  | 纯文字 	 | 全平台支持     |
+| 2   	  | 纯图片 	 | 全平台支持     |
+| 3   	  | 音乐 	 | 微信、QQ       |
+| 4   	  | 视频 	 | 微信、新浪微博 |
+| 5   	  | 小程序 	 | 微信聊天界面   |
+
+### 平台默认值
+| 平台       | 默认值 	  |
+| ---------- |--------- |
+| 新浪微博   | 0 	      |
+| 微信好友   | 0 	      |
+| 微信朋友圈 | 0 	      |
+| QQ        | 1 	      |
+| 微信小程序 | 5 	      |
+
+### 分享小程序必传参数`（type 为 5 时必传）`
+注意：`小程序必须是在微信开放平台与App绑定的才行`
+| 参数名称	     | 类型 	 | 默认值	    | 描述
+| -------------- |---------- | ------------ | --------------------------- |
+| appId     	 | String	 | --	        | 微信小程序原始id (比传)            |
+| appPath   	 | String	 | --	        | 点击链接进入的页面 (比传)          |
+| appWebUrl 	 | String	 | ""	        | 兼容低版本的网页链接(比传)  |
+| appType   	 | Number	 | 0	        | 微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0 |