example/oauth/index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>oauth</title>
	<link rel="stylesheet" type="text/css" href="css/mui.css"/>
	<style type="text/css">
		.oauth-area {
			position: absolute;
			bottom: 20px;
			left: 0px;
			text-align: center;
			width: 100%;
			padding: 0px;
			margin: 0px;
		}
		
		.oauth-area .oauth-btn {
			display: inline-block;
			width: 50px;
			height: 50px;
			background-size: 30px 30px;
			background-position: center center;
			background-repeat: no-repeat;
			margin: 0px 20px;
			/*-webkit-filter: grayscale(100%); */
			border: solid 1px #ddd;
			border-radius: 25px;
		}
		
		.oauth-area .oauth-btn:active {
			border: solid 1px #aaa;
		}
		
		.oauth-area .oauth-btn.disabled {
			background-color: #ddd;
		}
	</style>
</head>
<body>
	<div class="mui-content-padded oauth-area">

	</div>
	<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 判断本地是否安装客户端
		var isInstalled = function (id) {
			if (id === 'qihoo' && mui.os.plus) {
				return true;
			}
			if (mui.os.android) {
				var main = plus.android.runtimeMainActivity();
				var packageManager = main.getPackageManager();
				var PackageManager = plus.android.importClass(packageManager)
				var packageName = {
					"qq": "com.tencent.mobileqq",
					"weixin": "com.tencent.mm",
					"sinaweibo": "com.sina.weibo"
				}
				try {
					return packageManager.getPackageInfo(packageName[id], PackageManager.GET_ACTIVITIES);
				} catch (e) {}
			} else {
				switch (id) {
					case "qq":
						var TencentOAuth = plus.ios.import("TencentOAuth");
						return TencentOAuth.iphoneQQInstalled();
					case "weixin":
						var WXApi = plus.ios.import("WXApi");
						return WXApi.isWXAppInstalled()
					case "sinaweibo":
						var SinaAPI = plus.ios.import("WeiboSDK");
						return SinaAPI.isWeiboAppInstalled()
					default:
						break;
				}
			}
		}

		// 第三方登录
		mui.plusReady(function () {
			// 配置业务支持的第三方登录
		    var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; 
			var auths = {};
			var oauthArea = document.querySelector('.oauth-area');
			plus.oauth.getServices(function(services) {
				for (var i in services) {
					var service = services[i];
					auths[service.id] = service;
					if (~authBtns.indexOf(service.id)) {
						var btn = document.createElement('div');
						// 如果微信未安装，则为不启用状态
						btn.setAttribute('class', 'oauth-btn' + (!isInstalled(service.id) && service.id === 'weixin' ? (' disabled') : ''));
						btn.authId = service.id;
						btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
						oauthArea.appendChild(btn);
					}
				}
				mui(oauthArea).on('tap', '.oauth-btn', function() {
					if (this.classList.contains('disabled')) {
						plus.nativeUI.toast('您尚未安装微信客户端');
						return;
					}
					var auth = auths[this.authId];
					var waiting = plus.nativeUI.showWaiting();
					auth.login(function() {
						waiting.close();
						plus.nativeUI.toast("登录认证成功");
						auth.getUserInfo(function() {
							plus.nativeUI.toast("获取用户信息成功");
							var name = auth.userInfo.nickname || auth.userInfo.name;
							console.log(name);
						}, function(e) {
							plus.nativeUI.toast("获取用户信息失败：" + e.message);
						});
					}, function(e) {
						waiting.close();
						plus.nativeUI.toast("登录认证失败：" + e.message);
					});
				});
			}, function(e) {
				oauthArea.style.display = 'none';
				plus.nativeUI.toast("获取登录认证失败：" + e.message);
			});
		})
	</script>
</body>
</html>