-
Notifications
You must be signed in to change notification settings - Fork 366
/
index.html
145 lines (139 loc) · 5.01 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>share</title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<style type="text/css">
.mui-share{
position: fixed;
bottom: 0px;
width: 100%;
height: 180px;
background-color: #fff;
padding: 10px 5px;
margin: 0px;
}
.mui-share li{
float: left;
width: 20%;
text-align: center;
}
.mui-share li img{
width: 100%;
height: 100%;
cursor: pointer;
}
.mui-share li .mui-subtitle{
font-family: "microsoft yahei";
}
.mui-share .mui-btn{
position: fixed;
bottom: 10px;
width: 90%;
left: 5%;
right: 5%;
}
</style>
</head>
<body>
<button id="openShare" type="button" class="mui-btn mui-btn-blue mui-btn-block">打开分享</button>
<ul class="mui-share mui-list-inline mui-hidden">
<li data-id="weixin" data-scene="WXSceneSession">
<img src="img/weixin.png"/>
<span class="mui-subtitle">微信好友</span>
</li>
<li data-id="weixin" data-scene="WXSceneTimeline">
<img src="img/pengyouquan.png"/>
<span class="mui-subtitle">朋友圈</span>
</li>
<li data-id="sinaweibo">
<img src="img/sinaweibo.png"/>
<span class="mui-subtitle">新浪微博</span>
</li>
<li data-id="tencentweibo">
<img src="img/tencentweibo.png"/>
<span class="mui-subtitle">腾讯微博</span>
</li>
<li data-id="qq">
<img src="img/qq.png"/>
<span class="mui-subtitle">qq好友</span>
</li>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">取消</button>
</ul>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var shareClassName = document.querySelector('.mui-share');
// 打开分享
document.getElementById("openShare").addEventListener('tap',function(){
shareClassName.classList.remove('mui-hidden');
})
// 取消分享
document.querySelector('.mui-share .mui-btn').addEventListener('tap',function(){
shareClassName.classList.add('mui-hidden');
})
// 分享操作
var shares = {};
mui.plusReady(function () {
// 获取分享服务
plus.share.getServices(function(s) {
if (s && s.length > 0) {
for (var i = 0; i < s.length; i++) {
var t = s[i];
shares[t.id] = t;
}
}
}, function() {
console.log("获取分享服务列表失败");
});
})
/**
* 监听分享点击事件
*/
mui('.mui-share').on('tap','li',function(e){
var id = this.getAttribute('data-id');
var scene = this.getAttribute('data-scene');
console.log(id);
var share = shares[id];
if (share) {
if (share.authenticated) {
shareMessage(share, scene);
} else {
share.authorize(function() {
shareMessage(share, scene);
}, function(e) {
mui.toast("认证授权失败：" + e.code + " - " + e.message);
});
}
} else {
mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包")
}
})
/**
* 分享发送消息
* @param {Object} share
* @param {Object} ex
*/
function shareMessage(share, scene) {
var msg = {
extra: {
scene: scene
}
};
msg.href = "http://www.dcloud.io/hellomui/";
msg.title = "最接近原生APP体验的高性能前端框架";
msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
if (~share.id.indexOf('weibo')) {
msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
}
msg.thumbs = ["_www/img/logo.png"];
share.send(msg, function() {
mui.toast("分享到\"" + share.description + "\"成功！ ");
}, function(e) {
mui.toast("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
});
}
</script>
</body>
</html>