1.移动端rem设置
//JS监听浏览器文字大小代码
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
2.移动端上拉加载
window.addEventListener("scroll", function (e) {
e = e || window.event; /*ie 低版本没有 e 他只有window.event*/
scrollDown();
})
var page=1;
var pageCount=5;
function scrollDown(){
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
//clientHeight为内容可视区域的高度。
//scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
//所以，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight
if(document.documentElement.scrollHeight == document.documentElement.clientHeight + scrollTop) {
//添加数据
if(page < pageCount){
page++;
console.log("第" + page + "页");
}else{
console.log('一触碰到底线')
alert('已触碰到底部')
}
}
}
var scrol = function(e){
e = e || window.event; /*ie 低版本没有 e 他只有window.event*/
alert(e)
if(e.wheelDelta){
/*ie和谷歌*/
if(e.wheelDelta>0){
alert("向上滑动")
}else{
alert("向下滑动")
scrollDown();
}
/*向上的 时候是120
* 向下的时候是-120*/
}else{
/*火狐*/
if(e.detail<0){
alert("向上滑动")
}else{
alert("向下滑动")
scrollDown();
}
/*向上的时候是-3
* 向下的时候是3*/
}
}
// if(document.addEventListener){
// document.addEventListener("DOMMouseScroll",scrol)
// }
// window.onmousewheel=document.onmousewheel=scrol;
3.封装截取url地址参数
function urlintercept(name) {
var search = location.search.slice(1);
var arr = search.split("&");
for (var i = 0; i < arr.length; i++) {
var ar = arr[i].split("=");
if (ar[0] == name) {
if (unescape(ar[1]) == 'undefined') {
return "";
} else {
return unescape(ar[1]);
}
}
}
return "";
}
4.成功错误一句话提示弹窗
function alertstyle(e) {
var Ahtml = '<div class="popubg">' +'<div>' +'<p>'+ e +'</p>' +'</div>' +'</div>';
$("body").append(Ahtml);
var time_y = setTimeout(function () {
$(".popubg").remove();
clearTimeout(time_y);
},3000);
}
5.小程序自动更新
update() {
console.log('---update----', typeof wx.canIUse('getUpdateManager'))
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log(res, '----checkout---', res.hasUpdate)
if (res.hasUpdate) {
console.log('已请求完新版本')
updateManager.onUpdateReady(function () {
console.log('-------update-----')
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
showCancel: showCancel,
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
console.log('----下载失败---')
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
})
})
}else{
console.log('没有新版本')
wx.showModal({
title: '提示',
content: '没有新版本'
})
}
})
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
}
})
6.禁止打开控制台
<script type='text/javascript'>
//禁用右键（防止右键查看源代码）
window.οncοntextmenu=function(){return false;}
//禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，
如有改变则关闭本页面
var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
if (h!= window.innerHeight||w!=window.innerWidth){
window.close();
window.location = "about:blank";
}
}
</script>
7.移动端兼容问题
1).ios on绑定事件 click不起作用 得用touchstart
2).事件委托 ios微信点击不起作用：不能用doucument委托
解决方法：1.给元素加 cursor：pointer
2.delegate 委托
3).ios软键盘弹起 页面回不来；
$("input").focus(function() {
this.scrollTop = $(window).scrollTop()
});
$("input").blur(function() {
$(window).scrollTop(this.scrollTop)
})
4).限制输入整数六位 小数两位 且只有一个小数点 首位输入点补零
var reg=/^(\-)*(\d+)\.(\d\d).*$/;//保证只有两位小数
newstr=newstr.replace(/^\./g,'0.'); //保证第一位不输入.
newstr=newstr.replace(/\.{2,}/g,'.');//保证只出现一个点
newstr = newstr.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
newstr = newstr.replace(reg,'$1$2.$3');//保证只有两位小数
if(newstr >= 1000000){//限制整数位六位
newstr = newstr.substr(0,6)
}
8.mac配置nginx步骤
首先在 /usr/local/etc/nginx/servers/ 目录底下新建一个 扩展名为 .conf 的文件
命令为 touch 文件名.conf 配置域名以及文件路径
其次 打开 /etc/hosts 文件添加域名
最后启动nginx 命令为 sudo nginx 完成
重启nginx 命令为 sudo nginx -s reload
nginx（Windows配置）
C:\Windows\System32\drivers\etc hosts文件
最后一行添加 127.0.0.1 ecsc.meishijia.com
9.小程序插件
wxParse 富文本，感觉没有小程序提供的rich-text组件好用
live-player-plugin 小程序直播插件
painter 小程序绘图、二维码
WXPayMpActionReporter 数据上报插件
calendar 日历插件
微信同声传译通过获取全局唯一的语音识别管理器recordRecoManager实现
腾讯视频插件有广告可付费去广告腾讯地图插件
OCR 支持插件（支持身份证识别，行驶证识别和银行卡识别）
we-cropper、image-cropper（优选）图片剪裁插件
10.解决浏览器缓存问题
<script>
document.write("<script type='text/javascript' src='/web/js/shopCart/walletShopTypePayType.js?time=" + Date.now() + "'><\/script>");
</script>
更多方法移驾👉 https://www.cnblogs.com/wangyongx/p/10278520.html
mate方法、清理from表单的临时缓存、
jq ajax清楚浏览器缓存（①用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control、②直接用cache:false、③用随机数、④用随机时间）、
php后端清理（在服务端加 header("Cache-Control: no-cache, must-revalidate")）
11.压缩工具
www.shipinyasuo.com/ 在线CSS/HT…
12.ssh key的生成步骤
打开git bash 输入 ssh-keygen 连续三下回车
然后再回车 完成（c盘用户ssh文件 id_rsa.pub）
13.提高webpack构建vue项目的速度
解决方案DllPlugin 和 DllReferencePlugin查找了一下资料，发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现我们要的功能。DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件，这个 json 文件中会映射每个打包的模块地址和 id，DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。
详情移驾👉 https://github.com/lin-xin/blog/issues/10
14.判断设备（判断是移动端还是pc端）
if(/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(window.navigator.userAgent.toLowerCase())){
window.location.href = '';
}
15.移动端适配方案flexible.js
淘宝rem适配 dpr配置
https://www.jianshu.com/p/04efb4a1d2f8
16. 指向淘宝镜像
npm --registry https://registry.npm.taobao.org install
17.千位分隔符
"12345678".replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') 输出为12,345,678
18.表格的导入导出功能
1）表格的导入
1.1 el-upload组件，导入是利用element-ui的upload上传组件
<el-upload class="upload-demo"
:action="importUrl"//上传的路径
:name ="name"//上传的文件字段名
:headers="importHeaders"//请求头格式
:on-preview="handlePreview"//可以通过 file.response 拿到服务端返回数据
:on-remove="handleRemove"//文件移除
:before-upload="beforeUpload"//上传前配置
:on-error="uploadFail"//上传错误
:on-success="uploadSuccess"//上传成功
:file-list="fileList"//上传的文件列表
:with-credentials="withCredentials">//是否支持cookie信息发送
</el-upload>2）导出
2.1导出get方法
//声明导出文件名对象
const fileNames={
1:'模板一',
2:'模板二',
3:'模板三',
4:'模板四',
}
export const downloadTemplate = function (scheduleType) {
axios.get('/demo/template', {
params: {
"demoType": demoType
},
responseType: 'arraybuffer'
}).then((response) => {
//创建一个blob对象,file的一种
let blob = new Blob([response.data], { type: 'application/x-xls' })
// type值看后台格式,有可能是application/x-xls或application/vnd.ms-excel
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
//配置下载的文件名
link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'
link.click()
})
}
2.2导出post方法
export async function listExport(params) { const res = await axios({ url: `${javaHost}/company-center/platform/store/list/export`,
method: 'POST',
data: params,
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
responseType: 'blob', //响应格式设置 blob }); return res.data;}
19.前端工程构建工具（移动端调试痛点）
fis3(移动端运行，显示)
移动端调试痛点移驾👉https://juejin.cn/post/6844903656895021063
