h5项目

1. 使用gulp构建项目

（1）在node开发中使用npm init会生成一个package.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所用到的包，以及项目的详细信息等记录在这个项目中。

方便在以后的版本迭代和项目移植的时候会更加方便。

也是防止在后期维护中误删了一个包导致的项目不能正常运行

使用npm init初始化项目还有一个好处就是在进行想传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。

（2）搭建项目结构，安装gulp相关配置，新建gulpfile.js文件并进行配置

gulpfile.js文件配置

//gulpfile.js文件配置
const gulp=require('gulp')
const browserSync=require('browser-sync').create()
const reload=browserSync.reload
const sass=require('gulp-sass')


function server(){
	browserSync.init({
		notify:false,//并不总是需要在浏览器中弹出小超过通知/想要的
		server:'./',
		port:9000,
		open:'external',//决定Browersync启动时自动打开的网址。打开外部URL，必须在网上
		index:'./pages/index.html'//页面的入口
	})
	gulp.watch("./css/*.scss",changeScss).on("change",reload);
	gulp.watch("./*.html",changeHtml).on("change",reload);
	gulp.watch("./js/*.js", changeJs).on("change", reload);
}

function changeHtml() {
  return gulp.src("./*.html", "./pages/*.html").pipe(reload({ stream: true }));
}
function changeJs() {
  return gulp.src("./js/*.js").pipe(reload({ stream: true }));
}
//
function changeScss() {
  return gulp
    .src("./css/main.scss")    //这是需要转化的sass文件
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"))   //这是转化后css的文件
}

gulp.task("default", gulp.series(changeHtml, changeJs,changeScss, server));

安装gulp相关配置

npm install gulp -g  
npm install gulp --save-dev
npm install gulp-sass --save-dev
npm install node-sass --save
npm install browser-sync --save
gulp 进行启动

2.移动端适配方案(rem,vh.px)

//屏幕适应(function(win, doc) {  if (!win.addEventListener) return;  var html = document.documentElement;  function setFont() {    var html = document.documentElement;    var k = 750;    html.style.fontSize = (html.clientWidth / k) * 100 + "px";  }  setFont();  setTimeout(function() {    setFont();  }, 300);  doc.addEventListener("DOMContentLoaded", setFont, false);  win.addEventListener("resize", setFont, false);  win.addEventListener("load", setFont, false);})(window, document);

在页面中引入flexible.js文件就可以进行移动端适配了

3.sass的使用

function changeScss() {
  return gulp
    .src("./css/main.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"))
}

4.移动端前端常见的触摸事件touch tap  swipe等整理

1. click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms-300ms的延迟

2.touch类事件

touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时，会触发
touchend:当手指离开屏幕时，会触发
touchcancel:可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下。

监听touch事件的两种写法：

//第一种写法
$('.btn').on("touchstart",changeMoveTop);
function changeMoveTop(t){}//封装的方法

//第二种写法
let touchlog=document.getElementById("touchLog");
touchlog.addEventListener("touchstart",showMsgTouchstart);

function showMsgTouchstart(ev){}//封装的方法

5. 判断是否是ios

let userAgent=navigator.userAgent;//userAgent属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值
let isiOS=!!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//ios终端 返回值如果是iOS就返回了true

6. 使用navigator.userAgent.toLowerCase()判断登录是PC还是手机

有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便利用toLowerCase方法转成小写的形式，然后使用match方法进行匹配版本信息，

（1）判断移动端设备，区分android,iphone,ipad和其他

let ua=navigator.userAgent.toLowerCase();
if(ua.match(/android/i)) == "android") {
	alert("android");
}
if(ua.match(/iPhone/i)) == "iPhone") {
	alert("iPhone");
}
if(ua.match(/iPad/i)) == "iPad") {
	alert("iPad");
}

（2）判断移动端用的是不是特定类型的浏览器，比如新浪weibo客户端 内置的浏览器，qq客户端内置浏览器（非qq浏览器）

（由于微信在6.0.2的时候做了新的策略，使得微信的分享功能在新版本变得不一样，为了兼容新旧版本，这里做了区分操作）

新浪weibo客户端返回1，qq客户端返回2，微信小于6.0.2版本返回3，微信大于等于6.0.2版本返回4，其它返回0

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/weibo/i) == "weibo") {
	return 1;
} else if(ua.indexOf('qq/') != -1) {
	return 2;
} else if(ua.match(/MicroMessenger/i) == "micromessenger") {
	var v_weixin = ua.split('micromessenger')[1];
	v_weixin = v_weixin.substring(1, 6);
	v_weixin = v_weixin.split(' ')[0];
	if(v_weixin.split('.').length == 2) {
		v_weixin = v_weixin + '.0';
	}
	if(v_weixin < '6.0.2') {
		return 3;
	} else {
		return 4;
	}
} else {
	return 0;
}

（3）最后，把他们统一起来判断登录端是PC还是手机

var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; 
var bIsAndroid = sUserAgent.match(/android/i) == "android"; 
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
	alert("您是手机登录");
} else {
	alert("您是电脑登录");
}

7.判断当前页面是否在微信浏览器中打开（四类方法整理）

方法一：（微信官方js判断做法）

var ua = navigator.userAgent.toLowerCase();
　　var isWeixin = ua.indexOf(‘micromessenger‘) != -1;
　　if (isWeixin) {
   　　 return true;
　　}else{
   　　 return false;      
　　}

方法二：（JS判断做法）

function is_weixin(){
	var ua=navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i)=="micromessenger")){
		return true
	}else{
		return false
	}
}

方法三：JS判断做法

var is_weixin = (function() {
	return navigator.userAgent.toLowerCase().indexOf(‘micromessenger‘) !== -1
})();
if (is_weixin) {
	$(function() {
		return true;
	});
} else {
	$(function() {
		return false;
	});
}

方法四：（利用PHP判断）

function is_weixin(){  
        if ( strpos($_SERVER[‘HTTP_USER_AGENT‘], ‘MicroMessenger‘) !== false ) {  //strpos() 函数查找字符串在另一字符串中第一次出现的位置。
            return true;  
        }    
      　　  return false;  
    }  

8.htmlCanvas2将html页面生成托i按并下载

需求是需要将html页面保存图片，使用技术是html2Canvas

主要思路就是先找到自己想要获取的页面的div，然后获取这个dom，然后将获取dom的宽高，并将其缩放为原料的2倍，这样是为了防止下载的图片模糊。获取到dom后，我们创建一个canvas的对象，然后设置canvas的宽和高。我们在设置html2canvas的时候，要设置userCors为true，这个就是设置跨域。

9. H5页面在微信端的分享（分享到朋友圈，好友）

一.获取基本信息

找到已有公众号的appid，根据这个appid和url向后端发送请求，拿到配置所需要的参数：timestamp  noncest和signature

注意事项：

1.图片大小要大于300pix才能显示

2.这个方法必须先config成功，然后再wx.ready里才能调用。直接放到$(function(){})里执行，实践证明是不行的。

二. 实现

1.页面引入JS-SDK文件

通过script标签，引入微信官网的JS-SDK文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

2.基本配置

wx.config({
  debug:false,// 是否开启调试模式
  appId:appid,//appid
  timestamp:timestamp,// 时间戳
  nonceStr:noncestr,// 随机字符串
  signature:signature,// 签名
  jsApiList:[
    'onMenuShareTimeline',   
    'onMenuShareAppMessage',   
    'onMenuShareQQ', 
    'onMenuShareWeibo',
        'onMenuShareQZone'
      ]// 需要使用的JS接口列表
    })

3.使用

wx.ready(function(){
  // 分享给好友
  wx.onMenuShareAppMessage({
    title:title,// 分享标题
    desc:desc,// 分享描述
    link:link,// 分享链接
    imgUrl:imgUrl,// 分享图标
    success: function(){
      doShareDone()
    },
    cancel:function(){
      doShareCancel()
    }
  })
// 分享到朋友圈
  wx.onMenuShareTimeline({
    title:title,// 分享标题
    link:link,// 分享链接
    imgUrl:imgUrl,// 分享图标
    success:function(){
      doShareDone()
    },
    cancel:function(){
      doShareCancel()
    }
  })
})
// 分享成功回调
function doShareDone(){
  console.log('分享成功')
}
// 取消分享回调
function doShareCancel(){
  console.log('取消了分享')
}

4.调试

wx.config里的dubug字段设置为true时，就可以进行调试。

调试要用到微信开发工具，选择公众号网页项目，输入页面地址就可以了。

5、遇到的问题及解决方案

微信JS-SDK说明文档的附录5里有大部分问题的解决方案，在这里我列出我遇到的几个上面没有给出解决方案的。

1、Uncaught TypeError: Cannot read property 'config' of undefined

解决：html页面单独引入了sdk，并且组件统一也引入了一遍sdk，导致问题，删除其中之一。

2、Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined

解决：同问题1。

3、invalid signature

解决：如果文档里的方法都没有解决这个问题，还有一种方法，先设置一种最基础的配置，使其config ok，然后再设置一遍自己需要的有各种参数的分享文案，这样能绕过配置，成功分享。说的可能有点拗口，简单点理解就是，页面只要有一个config成功的配置，就可以再继续配置其它分享，哪怕这个分享配置的signature无效。

10.PC端为什么要做浏览器兼容？

（1）PC端为什么要做适配

（1）因为在PC端，由于浏览器种类太多，比如：IE，火狐，chrome，Sacfari等。

同时由于历史原因，

不痛浏览器的在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），

比如：IE6 IE8  IE10等对于一些JS事件处理  CSS样式渲染有所不同。

而恰恰又又一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，

为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。

（2）.移动端为什么要做适配

在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持css的所有语法。但是，分辨率不一样，或者你需要考虑竖屏的问题，这时候你也不需要

（1）source元素解决浏览器兼容问题：

1、video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题

2、如果使用了source元素，则不可以在video和audio中设置src属性

（2）audio音频兼容性问题

js判断移动端系统：

var userAgent=navigator.userAgent;var isAndroid=userAgent.indexOf('Android')>-1||userAgent.indexOf('Adr')>-1;//Android终端var isIOS=!!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

js判断是否为微信内置浏览器

function isWeiXin(){var userAgent=window.navigator.userAgent.toLoertCase();if(userAgent.match(/MicroMessenger/i)=='micromessenger'){return true;}else{return false;

在页面上放一个结果

苹果微信端、苹果Safari、UC浏览器都无法播放，华为荣耀8微信和苹果几内置的浏览器均可播放！

首先给微信浏览器做兼容处理：

function audioAutoPlay(id){var audio=document.getElementById(id);audio.play();document.addEventListener('WeixinJSBridgeReafy',function(){audio.play();},false);})

但是苹果Safari和UC浏览器还是无法播放，经查阅官方文档不允许audio自动播放，

即使有audioplay也没有作用，被强制禁用了，必须主动交互（例如click）后才能播放audio

10.基于js-spark-md5前端js类库，快速获取文件Md5

号称全宇宙最快的前端类包，可以无需上传文件就快速获取本地文件md5

npm install --save spark-md5