1.H5是什么
在不同的人看来可能会有不同的意思，在前端人员看来H5是HTML5的简称。在运营人员看来是比较炫酷的在手机上浏览的营销网页。这种页面一般是在微信中传播分享，因此从某种意义上讲，H5可以看做是微信PPT。
2.H5要考虑什么
下面写的这些问题只是单纯的从前端人员的角度去考虑的。
-
设计稿怎么完美展示
- 大部分的情况是设计稿要去适配各个手机，要保证设计稿在各个手机中要铺满整个窗口，不能留白，能不能变形，不能有滚动条。那么这个时候就不能保证实际页面和设计稿完全一致的（这个要和需求人员讲清楚，iPhone 4的iPhone x的展示效果一致那不现实），这种情况下，前端人员需要一定的自主权，根据各个手机的屏幕去考虑实际的处理方式。 在这种情况下我们需要把设计稿上的元素切得粒度尽可能的小，这样在拼接元素的时候，能更随心的适应各个屏幕。
<body> <div class="pages"> <!-- 页面元素信息展示区 --> </div> </body>html, body { width: 100%; height: 100%； } pages { width: 100%; height: 100%; position: relative; }- 当设计稿不要求铺满这个屏幕去显示，这种情况下相对来说简单一些。为什么要这么设置html和body要为100%，保证页面能完全撑开。即使设计图长度小度手机屏幕长度，也能在body/html属性设置背景色/背景图的情况下页面不留白。主体标签上设置一个最小高度，当页面长度的最小高度大于窗口高度时，能按高度显示；当页面长度小于窗口高度时，能按窗口高度去展示页面；
html, body { width: 100%; height: 100%; } pages { width: 100%; min-height: xxrem; height: 100%; }
- 大部分的情况是设计稿要去适配各个手机，要保证设计稿在各个手机中要铺满整个窗口，不能留白，能不能变形，不能有滚动条。那么这个时候就不能保证实际页面和设计稿完全一致的（这个要和需求人员讲清楚，iPhone 4的iPhone x的展示效果一致那不现实），这种情况下，前端人员需要一定的自主权，根据各个手机的屏幕去考虑实际的处理方式。 在这种情况下我们需要把设计稿上的元素切得粒度尽可能的小，这样在拼接元素的时候，能更随心的适应各个屏幕。
-
页面怎么写
这种情况下要用到rem单位，这时我们要设置根元素的字体大小，根元素字体大小并不能一成不变，也要随着页面的增大而增大，随着页面的缩小而减小。为什么要这样动态改变根元素的字体大小，因为，当页面增大时，根元素的字体大小不随着增大，则页面元素的大小还是原来的大小，这样在大页面中，页面中的元素相对来说是小的。- 方法A
/* 一下代码来源于网上 */ (function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var refreshRem = function () { var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; if (!clientWidth) return; var fz; var width = clientWidth; fz = 16 * width / 375; fz = fz >= 32.768 ? 32.768 : fz; docEl.style.fontSize = fz + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, refreshRem, false); doc.addEventListener('DOMContentLoaded', refreshRem, false); refreshRem(); }(document, window));上面的主要思想是：fz/w = 16/375（根元素字体大小 ÷ 页面实际宽度 ：理想根元素字体大小 ÷ 设计稿宽度）。由此可知这个方法中根元素字体大小和页面宽度是成正相关的。
在写样式的时候，如果设计稿是375px的，那么在设计稿上量出的数据大小要除以16；如果设计稿是2倍图750px的宽度，则除以32。- 方法B
/* 方法来源于网上 */ (function baseFont(document,window){ var designWidth = 750;// 设计稿宽度, 可以自由更改 var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; var scale = 1 / dpr; var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth; if (innerWidth / dpr > designWidth) { innerWidth = designWidth * dpr } if(docEl.className == 'noRetina'){ //不需要高清适配的地方不适配（在不需要适配页面的html标签上加 class="noRetina"） docEl.style.fontSize =(innerWidth / designWidth))+'px'; }else{ docEl.style.fontSize =(innerWidth / designWidth * dpr)+'px'; docEl.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+ scale +',width=device-width,maximum-scale='+ scale +',user-scalable=no'); } })(document, window);上面的方法引入了
dpr这个概念，上面的思路依然是选择改变根元素的字体大小。但是有差别的是通过dpr，写出的页面是实际物理像素大小的页面。这样的页面明显是比实际的大的，那只有通过改变viewport，将页面缩小大当前手机的实际大小。 方法中有段计算是这样的fontSize = innerWidth / designWidth *dpr；转换一下就是 fontsSize / innerWidth = dpr / designWidth，是不是和上一个方法思路差不多。rem是什么：是一个新增相对单位，相对的是根元素<html>的font-size而言。假设<html>的font-size: 16px；而设置<p>标签的高度为1rem，则实际用px表示就是16px；此时16px = 1rem。如果设置设置根元素字体大小为12px，则在本页面中12px = 1rem。
dpr是什么：设备的像素比。这个比值是怎么来的，即设备的物理像素除以css像素得到的值。以前是没有像素比这个概念的，因为实际像素和css像素是一一对应的，当时苹果提出了retina视网膜屏的概念，同时在产品中做出了屏幕大小不变的情况下像素数量多出了一倍。此时，css像素和物理像素就不再是一一对应的。关于dpr更多详细知识请点这里以上就是设置根元素fontSize的两种方法，第二种写法考虑了高分屏的适配问题，解决了图片模糊问题和1px细线的问题。在实际工作中设计会提供二倍/三倍的图片的，这个问题其实不算问题的。至于1px细线问题就看实际需求情况了，两种方法的使用选择就看个人了。
-
字体包还是切图
H5中会常用些艺术字，这些字是用字体包呢，还是把字切图呢，这是一个常常要权衡的问题。- 如果艺术字体是英文的，那毫无疑问，使用字体包；
- 如果艺术字体是中文的，那要考虑活动是什么类型的
1.页面是答题类型的，这种文字很多的活动，那么只能去做字体包了
2.页面是展示类型的，这种用到的字较少，很适合切图使用
-
页面兼容宽度怎么考虑
建议兼容区间为320px到768px，320px是iPhone5的宽度，768px是ipad的宽度；这个宽度区间基本可以囊括常见的移动设备宽度了。
3.H5上常用的功能
-
点击长按保存图片
这个功能主要在于用户点击的整个屏幕要是一张完整的图片，而图片上的信息每个用户上的也是各不相同。那么就要我们去根据页面DOM去画出图片，并插入进来（为了节省带宽资源，不让后端处理）。用到的是canvas，具体实现是canvas2html,点这里看详细使用。 -
当前活动分享
具体文档查看微信文档，下面展示主要的配置数据/* 分享卡片上要展示的信息 */ window.shareData = { "moduleName": "--", "moduleID": "--", "imgUrl": "分享卡片的图片", "sendFriendLink": '分享卡片的url', "tTitle": "分享卡片标题", "tContent": "分享卡片的副标题" }; /* 分享给朋友之后的回调 */ wx.onMenuShareAppMessage({ title: window.shareData.tTitle, desc: window.shareData.tContent, link: sendFriendLink, imgUrl: window.shareData.imgUrl, type: '', dataUrl: '', success: function () { // 分享成功之后的回调写这里 }, cancel: function () { } }); -
背景音乐
背景音乐有些因为权限的问题不会制动播放，下面是一些大神的解决法案不妨点开看看。
https://www.cnblogs.com/wmhuang/p/5452259.html
网友评论