一、html5手机网站调用微信分享包括 :
获取网络类型。
调起客户端的图片播放组件。
调用微信扫描二维码。
判断是否安装对应的应用。
发送邮件。
分享到微信朋友圈。
二、代码如下:
[html] view plain copy<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5网页如何调用浏览器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 () {
// 用户取消分享后执行的回调函数
}
})
可以的,只要是新版的浏览器。
扩展资料:浏览器窗口各部分功能有,地址栏:用于输入网站的地址,IE浏览器通过识别地址栏中的信息,正确连接用户要访问的内容。如要登录“网址之家”网,只需在地址栏中输入网址之家的网址:http://www.hao123.com,然后按[Enter]键或单击地址栏右侧的按钮即可。在地址栏中还附带了IE中常用命令的快捷按钮,如刷新(C)、停止(x)等,前进、后退按钮设置在地址栏前方。菜单栏:由“文件” “编辑” “查看” “收藏夹” “工具”和“帮助”菜单组成。
IE9支持部分,IE10+支持。Chrome3-5支持大部分,Chrome6+支持。iPad3.2+自带浏览器支持大部分。操作方法如下:
1、首先创建一个新的html文件,简单重置样式,添加canvas,给画布一个红色背景。
2、这里用jquery写,所以先引入jquery,可以看到默认下的canvas的画布大小 300*150。
3、编写resizeCnavas方法,用来动态获取并改变canvas的大小。
4、在页面加载完先对canvas进行一次画布的设置。
5、窗口大小发生改变时,动态调用上面的方法。
6、最后再次打开浏览器,就获得了自适应的canvas画布。