扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
html5手机网站调用微信分享，其中示例包括 1. 获取网络类型 2. 调起客户端的图片播放组件 3. 调用微信扫描二维码 4. 判断是否安装对应的应用 5. 发送邮件 6. 分享到微信朋友圈
忻府网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。创新互联建站成立与2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
这和微信推送html5页面是同一个原理，微信公众平台本身没有这个存储空间，所以就需要有个服务器或者第三方托管来承载制作好的html5游戏；
1.通常微信都有第三方合作平台，直接调用第三方接口，然后将html5游戏封装文件统一打包上传到第三方服务端。
2.倘若有服务器空间，则直接将html5游戏打包放在网站根目录文件下，在微信端直接调用服务器端的地址即可；
3.可以在微信平台通过文字或链接跳转的形式，实现html5游戏页面的转换。
可以，把你做的Html5放到你的服务器，再申请个域名就可以了。当然域名要备案，如果不备案的话你把你做的东西发到朋友圈别人是看不到的，只有你自己才能看到
一、html5手机网站调用微信分享包括 ：
获取网络类型。
调起客户端的图片播放组件。
调用微信扫描二维码。
判断是否安装对应的应用。
发送邮件。
分享到微信朋友圈。
二、代码如下：
[html] view plain copy
!DOCTYPE html
html
head
meta charset="utf-8"
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
titleHTML5网页如何调用浏览器APP的微信分享功能/title
meta name="viewport" content="width=device-width, initial-scale=1" /
link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /
link rel="stylesheet" type="text/css" href="css/test.css" /
style type="text/css"
html,
body {
margin: 0;
padding: 0;
}
/style
/head
body
span class="shareBtn" id="toshare"点击分享到/span
div id="nativeShare"/div
script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"/script
script type="text/javascript" src="js/nativeShare.js"/script
script type="text/javascript"
$("#toshare").bind("click", function() {
var config = {
url: '', //分享url
title: '', //内容标题
desc: '', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
};
var share_obj = new nativeShare('nativeShare', config);
$(".am-share").addClass("am-modal-active");
if ($(".sharebg").length 0) {
$(".sharebg").addClass("sharebg-active");
} else {
$("body").append('div class="sharebg"/div');
$(".sharebg").addClass("sharebg-active");
}
$(".sharebg-active,.share_btn").click(function() {
$(".am-share").removeClass("am-modal-active");
setTimeout(function() {
$(".sharebg-active").removeClass("sharebg-active");
$(".sharebg").remove();
}, 300);
})
});
/script
/body
/html
三、输出结果：
四、其他分享接口：
A.获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
B.获取“分享给朋友”按钮点击状态及自定义分享内容接口。
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
C.获取“分享到QQ”按钮点击状态及自定义分享内容接口。
wx.onMenuShareQQ({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
D.获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。
wx.onMenuShareWeibo({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
E.获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
Html代码
div id="mcover" onclick="weChat()" style="display:none;"
img src="images/guide.png" /
/div
div class="text" id="content"
div id="mess_share"
dsiv id="share_1"
button class="button2" onclick="button1()"
img src="images/icon_msg.png" width="64" height="64" /
发送给朋友
/button
/div
div id="share_2"
button class="button2" onclick="button2()"
img src="images/icon_timeline.png" width="64" height="64" /
分享到朋友圈
/button
/div
div class="clr"/div
/div
/div
css代码
#mcover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
z-index: 20000;
}
#mcover img {
position: fixed;
right: 18px;
top: 5px;
width: 260px!important;
height: 180px!important;
z-index: 20001;
}
.text {
margin: 15px 0;
font-size: 14px;
word-wrap: break-word;
color: #727272;
}
#mess_share {
margin: 15px 0;
display: block;
}
#share_1 {
float: left;
width: 49%;
display: block;
}
#share_2 {
float: right;
width: 49%;
display: block;
}
.clr {
display: block;
clear: both;
height: 0;
overflow: hidden;
}
.button2 {
font-size: 16px;
padding: 8px 0;
border: 1px solid #adadab;
color: #000000;
background-color: #e8e8e8;
background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 1px 1px #efefef;
text-shadow: 0.5px 0.5px 1px #fff;
text-align: center;
border-radius: 3px;
width: 100%;
}
#mess_share img {
width: 22px!important;
height: 22px!important;
vertical-align: top;
border: 0;
}
Jquery代码
script type="text/javascript"
function button1(){
$("#mcover").css("display","block") // 分享给好友按钮触动函数
}
function button2(){
$("#mcover").css("display","block") // 分享给好友圈按钮触动函数
}
function weChat(){
$("#mcover").css("display","none"); // 点击弹出层，弹出层消失
}
$(function(){
setTimeout(function () {
$("#mcover").show();}, 6000); // 6000时毫秒是弹出层
setTimeout(function () {
$("#mcover").hide(); }, 8000); //8000毫秒是隐藏层
})
/script
4
最终效果图
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网