Hbuilder第三方插件开发demo--第三方授权分享支付，推送等

Posted 2020-11-13 kinwing

<template>
	<view class="content">
		<button id="loginByWX" @click="thirdPartyLogin" data-type="weixin">微信第三方登录</button>
		<button id="loginByWX" @click="thirdPartyLogin" data-type="qq">QQ第三方登录</button>
		<button id="loginByWX" @click="thirdPartyLogin" data-type="sinaweibo">微博第三方登录</button>
		<button id="loginByWX" @click="logoutThirdPartyLogin()">退出第三方登录</button>
		<button @click="pay" data-id="wxpay">微信pay</button>
		<button @click="pay" data-id="alipay">支付宝pay</button>
		<button @click="shareHref()">分享</button>
		<button @click="dowload">下载</button>
		<button @click="getCID">获取CID</button>
		<input type="text" :value="device_cid === ‘‘ ? ‘‘ : device_cid" readonly />

		<button @click="innerPush">内推消息</button>
		<image src="/static/logo.png" class="logo"></image>
		<image class="logo" src="/static/no-image.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<uni-swipe-action :options="options"><view class="cont">SwipeAction 基础使用场景</view></uni-swipe-action>

		<uni-pagination total="20"></uni-pagination>
		<uni-pagination show-icon="true" total="50" current="2"></uni-pagination>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: ‘What‘,
			auths: null,
			channel: null,
			channelArr: {},
			ALIPAYSERVER: ‘http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=‘,
			WXPAYSERVER: ‘http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=‘,
			Intent: null,
			File: null,
			Uri: null,
			main: null,
			shares: {},
			shareImageUrl: ‘‘,
			s: null,
			device_cid: ‘‘
		};
	},
	onLoad() {
		//监听系统通知栏消息点击事件
		plus.push.addEventListener(
			‘click‘,
			function(msg) {
				//处理点击消息的业务逻辑代码
				var data = plus.push.getAllMessage();
				console.log(msg);
				plus.push.remove(msg);
			},
			false
		);
		//监听接收透传消息事件
		plus.push.addEventListener(
			‘receive‘,
			function(msg) {
				//处理透传消息的业务逻辑代码
				var data = plus.push.getAllMessage();
				console.log(msg);
				plus.push.remove(msg);
			},
			false
		);

		// 1. 获取支付通道
		//uni-app中将此function里的代码放入vue页面的onLoad生命周期中
		// 获取支付通道
		const _this = this;
		plus.payment.getChannels(
			function(channels) {
				_this.channel = channels;
				for (var i = 0; i < _this.channel.length; i++) {
					//console.log(_this.channel[i].id);
					//console.log(_this.channel[i]);
					_this.channelArr[_this.channel[i].id] = _this.channel[i];
				}
			},
			function(e) {
				uni.showToast({
					title: ‘获取支付通道失败：‘ + e.message,
					duration: 2000
				});
			}
		);

		//调起分享
		this.updateSerivces();
		if (plus.os.name == ‘android‘) {
			this.Intent = plus.android.importClass(‘android.content.Intent‘);
			this.File = plus.android.importClass(‘java.io.File‘);
			this.Uri = plus.android.importClass(‘android.net.Uri‘);
			this.main = plus.android.runtimeMainActivity();
		}
	},
	methods: {
		//内推消息
		innerPush() {
			var payload = {};
			payload[‘title‘] = ‘测试内容‘;
			payload[‘content‘] = ‘testtesttesttesttesttesttest‘;
			payload[‘extraKey‘] = ‘extraKey‘;
			//var payload = { title: ‘测试‘, content: ‘testtesttesttesttesttesttest‘, payload: ‘‘ };
			var option = {};
			option[‘title‘] = ‘测试标题‘;
			plus.push.createMessage(‘测试内容‘, payload, option);
		},
		//获取CID
		getCID() {
			this.device_cid = plus.push.getClientInfo().clientid;
		},
		//第三方登录
		thirdPartyLogin(e) {
			var type = e.currentTarget.dataset.type;

			const _this = this;
			plus.oauth.getServices(
				function(services) {
					_this.auths = services;
					// for (var k in _this.auths) {
					// 	console.log(_this.auths[k].id);
					// }
					//auths解释0QQ 1微信 2微博 3小米，但是不建议使用auths[1]类似的写法，因为各个设备排序不一样，比较坑爹
					//注意获取使用unionid，此id通用后期的微信端等它会用户共享，（openid完全唯一）
					//var s = auths[1];
					//var s;
					for (var i = 0; i < _this.auths.length; i++) {
						//用这样的写法指定第三方，参照：
						//[LOG] : xiaomi
						//[LOG] : qq
						//[LOG] : sinaweibo
						//[LOG] : weixin
						// if (_this.auths[i].id == ‘weixin‘) {
						// 	_this.s = _this.auths[i];
						// 	break;
						// }
						console.log(type);
						if (_this.auths[i].id == type) {
							_this.s = _this.auths[i];
							break;
						} else {
							_this.s = null;
						}
					}

					if (!_this.s.authResult) {
						//授权
						//_this.s.authorize(
						//function(e) {
						//console.log(‘授权成功：‘ + JSON.stringify(e));
						//登录
						_this.s.login(
							function(e) {
								// 获取登录操作结果
								_this.s.getUserInfo(
									function(e) {
										console.log(‘获取用户信息成功：‘ + JSON.stringify(_this.s.userInfo));
										uni.showToast({
											title: ‘登录成功‘,
											duration: 2000
										});
									},
									function(e) {
										console.log(‘获取用户信息失败：‘ + e.message + ‘ - ‘ + e.code);
										uni.showToast({
											title: ‘获取用户信息失败‘,
											duration: 2000
										});
									}
								);
							},
							function(e) {
								uni.showToast({
									title: ‘登录认证失败‘,
									duration: 2000
								});
							}
						);
						//},
						//function(e) {
						//	plus.nativeUI.alert(‘授权失败：‘ + JSON.stringify(e));
						//},
						//{ scope: ‘snsapi_userinfo‘, state: ‘authorize_test‘, appid: ‘wx289c8964c0689011‘ }
						//);
					} else {
						//已经登录认证
						uni.showToast({
							title: ‘登录成功‘,
							duration: 2000
						});
					}
				},
				function(e) {
					console.log(‘获取登录失败：‘ + e.message + ‘ - ‘ + e.code);
					uni.showToast({
						title: ‘登录认证失败‘,
						duration: 2000
					});
				}
			);
		},

		//退出第三方登录
		logoutThirdPartyLogin() {
			var thirdLogin = this.s;
			if (!thirdLogin) {
				plus.nativeUI.alert(‘当前环境不支持第三方登录‘);
				return;
			}
			thirdLogin.logout(
				function(e) {
					plus.nativeUI.alert(‘注销登录认证成功!‘);
				},
				function(e) {
					plus.nativeUI.alert(‘注销登录认证失败: ‘ + JSON.stringify(e));
				}
			);
		},

		// 支付-------发起支付请求
		pay(e) {
			// 从服务器请求支付订单
			console.log(e.currentTarget.dataset.id);
			var id = e.currentTarget.dataset.id;
			var PAYSERVER = ‘‘;
			if (id == ‘alipay‘) {
				PAYSERVER = this.ALIPAYSERVER;
			} else if (id == ‘wxpay‘) {
				PAYSERVER = this.WXPAYSERVER;
			} else {
				plus.nativeUI.alert(‘不支持此支付通道！‘, null, ‘捐赠‘);
				return;
			}
			console.log(this.channelArr[id]);
			uni.request({
				url: PAYSERVER, //仅为示例，并非真实接口地址。
				method: ‘GET‘,
				//data: { text: ‘uni.request‘ },
				// header: {
				// 	‘custom-header‘: ‘hello‘ //自定义请求头信息
				// },
				success: res => {
					console.log(res.data);
					if (res.data.status == 200) {
						plus.payment.request(
							this.channelArr[id],
							res.data.data,
							function(result) {
								plus.nativeUI.alert(‘支付成功！‘, function() {
									back();
								});
							},
							function(error) {
								plus.nativeUI.alert(‘支付失败：‘ + error.code);
							}
						);
					} else {
						uni.showToast({
							title: ‘获取订单信息失败！‘,
							duration: 2000
						});
					}
				}
			});
		},

		//分享----分享按钮点击事件
		shareHref() {
			var ids = [
					{
						id: ‘weixin‘,
						ex: ‘WXSceneSession‘ /*微信好友*/
					},
					{
						id: ‘weixin‘,
						ex: ‘WXSceneTimeline‘ /*微信朋友圈*/
					},
					{
						id: ‘qq‘ /*,QQ好友*/,
						ex: ‘‘
					},
					{
						id: ‘tencentweibo‘ /*,腾讯微博*/,
						ex: ‘‘
					},
					{
						id: ‘sinaweibo‘ /*,新浪微博*/,
						ex: ‘‘
					}
				],
				bts = [
					{
						title: ‘发送给微信好友‘
					},
					{
						title: ‘分享到微信朋友圈‘
					},
					{
						title: ‘分享到QQ‘
					},
					{
						title: ‘分享到腾讯微博‘
					},
					{
						title: ‘分享到新浪微博‘
					}
				];
			const _this = this;
			plus.nativeUI.actionSheet(
				{
					cancel: ‘取消‘,
					buttons: bts
				},
				function(e) {
					var i = e.index;
					if (i > 0) {
						_this.shareAction(ids[i - 1].id, ids[i - 1].ex);
					}
				}
			);
		},
		/**
		 * 更新分享服务
		 */
		updateSerivces() {
			const _this = this;
			plus.share.getServices(
				function(s) {
					for (var i in s) {
						var t = s[i];
						_this.shares[t.id] = t;
					}
					uni.showToast({
						title: ‘获取分享服务列表成功！‘,
						duration: 2000
					});
				},
				function(e) {
					console.log(e.message);
					uni.showToast({
						title: ‘获取分享服务列表失败：‘ + e.message,
						duration: 2000
					});
				}
			);
		},
		/**
		 * 分享操作
		 */
		shareAction(id, ex) {
			var s = null;
			if (!id || !(s = this.shares[id])) {
				uni.showToast({
					title: ‘无效的分享服务！‘,
					duration: 2000
				});
				return;
			}
			if (s.authenticated) {
				uni.showToast({
					title: ‘---已授权---‘,
					duration: 2000
				});
				this.shareMessage(s, ex);
			} else {
				uni.showToast({
					title: ‘---未授权---‘,
					duration: 2000
				});
				const _this = this;
				s.authorize(
					function() {
						_this.shareMessage(s, ex);
					},
					function(e) {
						uni.showToast({
							title: ‘认证授权失败‘,
							duration: 2000
						});
					}
				);
			}
		},
		/**
		 * 发送分享消息
		 */
		shareMessage(s, ex) {
			var msg = {
				content: ‘分享-详情‘,
				href: ‘http://www.baidu.com‘,
				title: ‘分享测试-title‘,
				content: ‘分享测试-content‘,
				thumbs: [‘http://img3.3lian.com/2013/v10/4/87.jpg‘],
				pictures: [‘http://img3.3lian.com/2013/v10/4/87.jpg‘],
				extra: {
					scene: ex
				}
			};
			s.send(
				msg,
				function() {
					uni.showToast({
						title: ‘分享成功!‘,
						duration: 2000
					});
				},
				function(e) {
					uni.showToast({
						title: ‘分享失败!‘,
						duration: 2000
					});
				}
			);
		},

		//下载
		//dtask =null;
		//检查是否含有该文件
		// feach() {
		// 	var FileSystemURL = ‘_downloads/kkkk123.zip‘;
		// 	plus.io.resolveLocalFileSystemURL(
		// 		FileSystemURL,
		// 		function() {
		// 			this.dowload(‘http://172.16.120.156:2345/download-pic‘);
		// 		},
		// 		function() {
		// 			console.log(‘未找到文件‘);
		// 		}
		// 	);
		// },
		//下载文件
		dowload() {
			var options = { method: ‘GET‘, filename: ‘/download/a.zip‘ };
			var dtask = null;
			dtask = plus.downloader.createDownload(‘http://172.16.120.156:2345/download-pic‘, options);
			dtask.addEventListener(‘statechanged‘, function(task, status) {
				switch (task.state) {
					case 1: // 开始
						console.log(‘开始下载...‘);
						break;
					case 2: // 已连接到服务器
						console.log(‘链接到服务器...‘);
						break;
					case 3: // 已接收到数据
						var a = Math.floor((task.downloadedSize / task.totalSize) * 100) + ‘%‘;
						console.log(a);
						break;
					case 4: // 下载完成
						console.log(‘下载完成！‘);
						console.log(task.totalSize);
						plus.io.resolveLocalFileSystemURL(task.filename, function(entry) {
							console.log(entry.toLocalURL()); //绝对地址
						});
						console.log(task.filename);
						break;
				}
			});
			dtask.start();
		},
		// 暂停下载任务
		pauseDownloadTask() {
			dtask.pause(); //暂停下载
		},
		// 恢复下载任务
		resumeDownloadTask() {
			dtask.resume(); //恢复下载
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200upx;
	width: 200upx;
	margin-top: 200upx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50upx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36upx;
	color: #8f8f94;
}
</style>