H5又叫互动H5，相当于微信上的PPT，主要时用于品牌方传播和推广的载体。
H5是指：在智能手机可以播放Flash的移动端上呈现的，可以达到Flash效果（如各种动画，互动）的，用于广告、营销的，具有酷炫效果的网页。
H5从2014年底的初露锋芒到2015年的全面火爆，再到2016的沉淀，2017年，H5依然是品牌社会化传播的首选。H5通俗点就是一种编程语言，H5很早以前就存在，由于微信迅速的崛起，H5语言编写的界面和微信浏览器比较兼容，故此H5借助微信也越来越红火。
扩展资料：据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTMLWeb开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。
据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。
12月，万维网联盟宣布已经完成对HTML5标准以及Canvas2D性能草案的制定，这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用HTML5，并大力宣传它的好处。
从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。
参考资料:百度百科-H5、html5应用
区别一、运行环境的不同
传统的网页H5的页面运行环境是浏览器，包括webview，而微信H5网页的运行环境并非完整的浏览器。
区别二、是开发成本的不同
一个网页H5web开发需求时，开发工具(vscode、sublimtext、Atom等)，大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等)，小到UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等都要考略。
一个微信H5的开发需求时，微信团队提供了开发者工具，并且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管全部是自定义标签，但官方文档中都有明确的使用介绍，相信上手应该是非常容易的。
区别三、是获取系统级权限的不同
微信H5相对于网页HTML5 web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，而这一点恰巧是HTML5 web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。
区别四、是应用在生产环境的运行流畅度。
无论对于用户还是开发者来说，都是最直观的感受。当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，需要不断的对项目优化来提升用户体验。但是由于微信H5运行环境独立，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。
一、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 () {
// 用户取消分享后执行的回调函数
}
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）