js移动、pc端笔记

联图网在线二维码生成接口
// 获取支付二维码
getPayCode() {
let para = {
"MemberId": this.employeeId,
"orderId": this.orderId,
"payType": 7,
};
this.adminApi(para,'获取支付二维码').then((res) => {
if(res.code===200){
let imgDiv = document.getElementById('imgDiv');
let img = document.createElement("img");
img.src = 'http://qr.topscan.com/api.php?&text='+encodeURIComponent(res.data.code_url);
img.style = "width: 60px;height: 60px;margin: 15px;"
imgDiv.appendChild(img)
}
});
},
 map和filter的用法及区别
map函数之后，数组元素个数不变，但元素属性发生了变化。
filter函数之后，数组元素个数改变，但是元素属性不会改变。
说的通俗一点，就是map一般用来处理元素属性，filter一般用来筛选想要的元素。

20191231 数字相加减
var c = Number(a) + Number(b)
20191231 批量修改数组中每个对象的属性值
arr = arr.map(function(item,index,arr) {
item.age = 1;
return item;
})
禁止图文被复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

<img src="" oncontextmenu="return false;"> // 禁止鼠标右键保存图片
<img src="" ondragstart="return false;"> // 禁止鼠标拖动图片
20190923 对象合并
Object.assign({name:111},{age:18})
 常见的数组合并 用concat拼接 用的比较多 但对象合并 相对来说适应场景比价少
个人使用场景：封装小程序request请求时 header中要传默认的token 但是有些接口又特殊需要传入一些参数

手机端点击输入框时禁止调起键盘
<input type="text" onfocus="this.blur()">
<input type="text" readonly="readonly" />
H5页面唤起本地摄像头
<!--只可进行拍照-->
<input type="file" accept="image/*" capture="camera">
<!--只可进行拍摄视频-->
<input type="file" accept="video/*" capture="camcorder">
<!--可选取本地照片和拍照-->
<input type="file" accept="image/*">
<!--可选取本地视频和拍摄视频-->
<input type="file" accept="video/*">
同步(sync)和异步(async)的区别
js是属于单线程的，也就是我们说的同步，但有时候需要异步

单线程：所有的任务由一个线程来完成
多线程：多个任务可分配给不同的线程来完成

同步：在进程中任务未结束时需等待结束才能执行下一个任务
异步：在进程中任务未结束但在等待的过程中可先去执行下一个任务

简单来说：同步就是排队来执行，异步就是同时去执行

ajax请求时async属性默认为true，也就是说默认就是异步的，要想改成同步进行，修改async属性改为false
js逻辑中有三种解决方案，第一是方法嵌套，第二是setTimeout控制执行时间，第三是es6新增的promise特性
input type="file"时修改其默认样式
<label style="position: relative">
<button style="margin-right: 5px;">选择文件</button>
<input type="file" @change="getFile2" style="position: absolute;left: 0;top: 0;opacity: 0;width: 70px">
<a v-if="form.S_SlnPdfUri!==''" target="_blank" :href="form.S_SlnPdfUri">{{form.S_SlnPdfUri}}</a>
<span v-if="form.S_SlnPdfUri===''" style="color: gray">未选择任何文件</span>
</label>
h5如何动态设置meta标签的描述内容
<meta property="fb:app_id" name="description"> // 设置标签
var metaList = document.getElementsByTagName("meta"); // 拿到标签
for (var i = 0; i < metaList.length; i++) {
if (metaList[i].getAttribute("property") == "fb:app_id") {
metaList[i].content = '这是一段描述'; // 设置描述
}
}
h5内嵌在app时，做微信分享，动态传递分享标题和图片路径给ios
// 前端在页面中动态绑定文字内容并将其隐藏掉
<div v-show="false" id="SeoDescription">{{obj.SeoDescription}}</div>
<div v-show="false" id="PhotoURL">{{obj.PhotoURL}}</div>

// ios那边通过id去获取相应的值 标题和路径
NSString *htmlTitle = @"document.title";
NSString *htmlNum = @"document.getElementById('PhotoURL').innerText";
js判断网页是否是在微信浏览器中打开
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase(); // 该属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息
//通过正则表达式匹配ua中是否含有MicroMessenger字符串
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
js判断当前浏览器是否是在移动端
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// console.log('移动端');
this.isPc=false;
} else {
// console.log('pc端');
this.isPc=true;
}
js做消息通知声音提示
$('audio').remove();
let audioElementHovertree = document.createElement('audio');
audioElementHovertree.setAttribute('src', 'http://w.qq.com/audio/classic.mp3');
audioElementHovertree.setAttribute('autoplay','autoplay'); //打开自动播放
input type="number"时如何限制输入长度
<input type="number" oninput="if(value.length>11)value=value.slice(0,11)">
es6中promise的使用
new Promise(function(resolve, reject){
// 先执行
resolve();
}).then(function (data) {
// 再执行
});
js开启和禁止页面滑动
// 定义方法
bodyScroll(event){
event.preventDefault();
},
// 禁止滑动
document.body.addEventListener('touchmove',this.bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
// 开启滑动
document.body.removeEventListener('touchmove',this.bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});
js复制输入框和非输入框的内容
// 复制输入框的内容
1. <input id="input" type="text">
2. document.getElementById("input").select(); // 选择对象
3. document.execCommand("copy"); // 执行浏览器复制命令

// 复制非输入框中的内容
1. <input id="input" type="text" style="position: absolute;z-index: -1">
<span id="code">852965</span>
2. var code = document.getElementById("code").innerText;
var input = document.getElementById("input");
input.value = code; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令

// 以上方法在pc端没有任何问题 但在移动端 发现并未复制成功 存在一定的缺陷 故采用下面引入clipboard插件的方法
1. cnpm install clipboard --save // 安装clipboard
2. import ClipboardJS from 'clipboard'; // 在需要的单个页面引入
3. <div>邀请码{{code}</div>
<div class="copy_btn" :data-clipboard-text="code" @click="copy">复制</div>
4. copy() {
const clipboard = new ClipboardJS('.copy_btn');
clipboard.on('success', function(e) {
e.clearSelection();
alert('复制成功')
});
clipboard.on('error', function(e) {
alert('复制失败');
});
},
js获取url后面多个参数的方法
// 网上搜索到的最常见的方法 此方法存在的缺陷 当url中有#(vue-cli项目)或者是微信QQ分享出来的链接会自动拼接参数(?from=)等都会影响location.search的正确获取
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
// ios
朋友圈 from=timeline&isappinstalled=0(或者appinstall=0)
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0
// android
朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage

// 刚开始对于#的处理采用的是定位?下标位置手动截取search的方式，后来有了?from=，采用的是定位?参数下标的位置手动截取search
// 接下来面临的第三个问题，app分享时并未安顺序给你拼接参数，也就是你这边截取的第一个参数它可能放在了其他位置，所以，采用的解决方案是 忽略# 忽略分享出来的& 将所有的?from=给替换掉 然后根据?下标去截取search
getQueryString(name) {
var url = location.href.replace('?from=',''); // 只要替换掉?开头的即可 &不影响search的截取
var search = url.substr(url.indexOf('?')); // 根据?的位置 截取search
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
js进行图片压缩 
// 图片压缩
canvasDataURL(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
},
// 拍照
makePhoto(e){
var file = document.getElementById('photo').files[0];
if (window.FileReader) { //如果浏览器支持FileReader
var reader = new FileReader(); //新建一个FileReader对象
reader.readAsDataURL(file); //读取文件url
let self = this;
reader.onloadend = function (e) {
// self.cardOrc(e.target.result.replace("data:image/jpeg;base64,",""));
// console.log(e.target.result)
self.canvasDataURL(e.target.result,{
quality: 0.1
},function (base64) {
// console.log(base64)
self.cardOrc(base64.replace("data:image/jpeg;base64,",""));
});
};
}
file = null;
},
js解决ios11系统下input光标错位的问题
原因分析：iOS11对fixed不兼容导致的，外面的遮罩层引用了fixed定位，输入框弹出页面被顶上去了但是输入框光标还停留在原来的位置。
解决办法：网上看了一大堆，总结了一种最简单的方法，外面弹框改为absolute定位，弹框打开时将整个容器高度改为页面高度禁止其滚动，弹框关闭时又给还原回来。 

open(){
this.isPopup = true;
document.getElementById('vote').style.height = '100vh'
document.getElementById('vote').style.overflow = 'hidden'
},
close(){
this.isPopup = false;
document.getElementById('vote').style.height = 'auto'
}
js兼容部分ios手机input失焦后页面上移问题
(function() {
let myFunction;
let isWXAndIos = isWeiXinAndIos();
if (isWXAndIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
clearTimeout(myFunction)
});
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
clearTimeout(myFunction);
myFunction = setTimeout(function() {
window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置
}, 200)
})
}
})();
function isWeiXinAndIos() {
// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
let ua = '' + window.navigator.userAgent.toLowerCase();
// 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
let isWeixin = /MicroMessenger/i.test(ua); // 是在微信浏览器
let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua); // 是IOS系统
return isWeixin && isIos
}