forked from zxlie/WeixinApi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
executable file
·161 lines (145 loc) · 6.04 KB
/
demo.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
<head>
<title>微信Js API Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
button {
margin: 10px;
}
</style>
<script type="text/javascript" src="WeixinApi.js"></script>
</head>
<body>
<p>这是一个测试页面！请直接分享到微信好友、朋友圈、腾讯微博看效果吧！</p>
<p>如果你是扫一扫过来的，可以复制连接，然后发给任何一个微信好友，再点击连接进入测试</p>
<p>
<button id="optionMenu">WeixinApi.hideOptionMenu</button>
</p>
<p>
<button id="toolbar">WeixinApi.hideToolbar</button>
</p>
<p>
<button id="networkType">WeixinApi.getNetworkType</button>
</p>
<p>
<button id="imagePreview">WeixinApi.imagePreview</button>
</p>
<p>
<button id="closeWindow">WeixinApi.closeWindow</button>
</p>
<script type="text/javascript">
// 给按钮增加click事件：请不要太纠结这个写法，demo而已
var addEvent = function(elId,listener){
document.getElementById(elId)
.addEventListener('click',function(e){
if(!window.WeixinApi || !window.WeixinJSBridge) {
alert('请确认您是在微信内置浏览器中打开的，并且WeixinApi.js已正确引用');
e.preventDefault();
return false;
}
listener(this,e);
},false);
};
// 两个Flag
var optionMenuOn = true;
var toolbarOn = true;
// optionMenu的控制
addEvent('optionMenu',function(el,e){
if(optionMenuOn) {
el.innerHTML = "WeixinApi.showOptionMenu";
WeixinApi.hideOptionMenu();
}else{
el.innerHTML = "WeixinApi.hideOptionMenu";
WeixinApi.showOptionMenu();
}
optionMenuOn = !optionMenuOn;
});
// toolbar的控制
addEvent('toolbar',function(el,e){
if(toolbarOn) {
el.textContent = "WeixinApi.showToolbar";
WeixinApi.hideToolbar();
}else{
el.textContent = "WeixinApi.hideToolbar";
WeixinApi.showToolbar();
}
toolbarOn = !toolbarOn;
});
// 获取网络类型
addEvent('networkType',function(el,e){
WeixinApi.getNetworkType(function(network) {
alert("当前网络类型：" + network);
});
});
// 调起客户端的图片播放组件
addEvent('imagePreview',function(el,e){
location.href = "http://www.baidufe.com/wximage?tag=%E7%BE%8E%E5%A5%B3";
});
// 关闭窗口
addEvent('closeWindow',function(el,e){
WeixinApi.closeWindow();
});
// 需要分享的内容，请放到ready里
WeixinApi.ready(function(Api) {
// 微信分享的数据
var wxData = {
"appId": "", // 服务号可以填写appId
"imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
"link" : 'http://www.baidufe.com',
"desc" : '大家好，我是Alien，Web前端&Android客户端码农，喜欢技术上的瞎倒腾！欢迎多交流',
"title" : "大家好，我是赵先烈"
};
// 分享的回调
var wxCallbacks = {
// 分享操作开始之前
ready : function() {
// 你可以在这里对分享的数据进行重组
alert("准备分享");
},
// 分享被用户自动取消
cancel : function(resp) {
// 你可以在你的页面上给用户一个小Tip，为什么要取消呢？
alert("分享被取消");
},
// 分享失败了
fail : function(resp) {
// 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？
alert("分享失败");
},
// 分享成功
confirm : function(resp) {
// 分享成功了，我们是不是可以做一些分享统计呢？
//window.location.href='http://192.168.1.128:8080/wwyj/test.html';
alert("分享成功");
},
// 整个分享过程结束
all : function(resp) {
// 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？
alert("分享结束");
}
};
// 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks);
// 点击分享到朋友圈，会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks);
// 点击分享到腾讯微博，会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks);
// 有可能用户是直接用微信“扫一扫”打开的，这个情况下，optionMenu、toolbar都是off状态
// 为了方便用户测试，我先来trigger show一下
// optionMenu
var elOptionMenu = document.getElementById('optionMenu');
elOptionMenu.click(); // 先隐藏
elOptionMenu.click(); // 再显示
// toolbar
var elToolbar = document.getElementById('toolbar');
elToolbar.click(); // 先隐藏
elToolbar.click(); // 再显示
});
</script>
</body>
</html>