index.html
5.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>授权与分享演示</title>
<!-- Bootstrap Core CSS -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="__CDN__/assets/css/index.css" rel="stylesheet">
<!-- Plugin CSS -->
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">
<span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">授权与分享演示</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="{:url('/')}" target="_blank">{:__('Home')}</a></li>
<li><a href="{:url('index/user/index')}" target="_blank">{:__('会员中心')}</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header-content">
<div class="header-content-inner" style="padding-top:6rem">
当你看见这个页面则表示当前已经授权登录成功
</div>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src=https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 微信JSSDK授权 -->
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8" async="async"></script>
<script>
window.onload = function () {
if (isWeixin()) {
var currentUrl = window.location.href.split('#')[0];//这里需要注意最好是通过后端渲染，避免出现失败
wx.config({
debug: false,
appId: '{$wxConfig.appId}',
timestamp: '{$wxConfig.timestamp}',
nonceStr: '{$wxConfig.nonceStr}',
signature: '{$wxConfig.signature}',
jsApiList: {$wxConfig.jsApiList}
});
// 成功
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//分享给朋友
wx.onMenuShareAppMessage({
title: '{$wxConfig.share_title}', // 分享标题
desc: '{$wxConfig.share_synopsis}', // 分享描述
link: currentUrl, // 分享链接
imgUrl: 'http://{$_SERVER["HTTP_HOST"]}/{$wxConfig.share_img}', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: '{$wxConfig.share_title}', // 分享标题
link: currentUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://{$_SERVER["HTTP_HOST"]}/{$wxConfig.share_img}', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
// 失败
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert(JSON.stringify(res));
});
}
};
//判断是否在微信中打开
function isWeixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
</script>
</body>
</html>