H5实践整理

2020-01-19 本文已影响0人 yunshengz

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%;
  }
```
页面怎么写
这种情况下要用到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. 如果艺术字体是中文的，那要考虑活动是什么类型的
  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

H5实践整理

1.H5是什么

2.H5要考虑什么

3.H5上常用的功能

猜你喜欢

热点阅读