Hbuilder第三方插件開發demo--第三方授權分享支付，推送等

 

<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>