开发基础代码

Mac下MySql启动

sudo chown -R mysql /usr/local/mysql/data
sudo /usr/local/mysql/support-files/mysql.server start

获得状态栏导航栏高度(uniapp)

onReady() {
	// 获得状态栏导航栏高度
	var that = this
	uni.getSystemInfo({
		success(e) {
			let statusBar = 0
			let customBar = 0

			// #ifdef MP
			statusBar = e.statusBarHeight
			customBar = e.statusBarHeight + 45
			if (e.platform === 'android') {
				customBar = e.statusBarHeight + 50
			}
			// #endif

			// #ifdef MP-WEIXIN
			statusBar = e.statusBarHeight
			// @ts-ignore
			const custom = wx.getMenuButtonBoundingClientRect()
			customBar = custom.bottom + custom.top - e.statusBarHeight
			// #endif

			// #ifdef MP-ALIPAY
			statusBar = e.statusBarHeight
			customBar = e.statusBarHeight + e.titleBarHeight
			// #endif

			// #ifdef APP-PLUS
			statusBar = e.statusBarHeight
			customBar = e.statusBarHeight + 45
			// #endif

			// #ifdef H5
			statusBar = 0
			customBar = e.statusBarHeight + 45
			// #endif
			if (e.platform === 'android') {
				that.statusBar=0
			}else{
				that.statusBar=statusBar
			}
			
			that.customBar = customBar
			const query = uni.createSelectorQuery().in(this);
			query.select('#editor').boundingClientRect(data => {
				that.domHeight = data.height
			}).exec();
		}
	})
},

npm设置淘宝镜像

npm i -g cnpm --registry=https://registry.npm.taobao.org

html转码

this.desc = this.changeHtml(data.data.desc.content)

changeHtml(str) {
	var arrEntities = {
		'lt': '<',
		'gt': '>',
		'nbsp': ' ',
		'amp': '&',
		'quot': '"'
	};
	return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
		return arrEntities[t];
	})
},

提取富文本中的img标签中的src属性值

var arr=[]
var desc=this.changeHtml(list[i].content)
desc.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
  arr.push(capture)
});
map['content'] =arr

设置富文本中图片大小

const regex = new RegExp('<img', 'gi')
this.desc = this.changeHtml(data.data.desc.content).replace(regex,`<img style="max-width: 100%; height: auto"`);

时间戳转日期

this.formatDate(data.data.desc.add_time * 1000)

formatDate(value) {
	let date = new Date(value)
	let y = date.getFullYear()
	let m = date.getMonth() + 1
	let d = date.getDate()
	y = y < 10 ? ('0' + y) : y
	m = m < 10 ? ('0' + m) : m
	d = d < 10 ? ('0' + d) : d
	return y + '.' + m + '.' + d
},

时间戳转时间

this.formatTime(data.data.desc.add_time * 1000)

formatTime(value) {
	let date = new Date(value)
	let h = date.getHours()
	let m = date.getMinutes()
	let s = date.getSeconds()
	h = h < 10 ? ('0' + h) : h
	m = m < 10 ? ('0' + m) : m
	s = s < 10 ? ('0' + s) : s
	// return h + ':' + m + '-' + s
	return h + ':' + m
},

计算多长时间之前

handlePublishTimeDesc(value) {
	// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
	var curTime = parseInt(new Date().getTime() / 1000);
	var postTime = new Date();
	var timeDiff = curTime - value;
	// 单位换算
	var min = 60;
	var hour = min * 60;
	var day = hour * 24;
	var week = day * 7;
	var month = week * 4;
	var year = month * 12;
	// 计算发布时间距离当前时间的周、天、时、分
	var exceedyear = Math.floor(timeDiff / year);
	var exceedmonth = Math.floor(timeDiff / month);
	var exceedWeek = Math.floor(timeDiff / week);
	var exceedDay = Math.floor(timeDiff / day);
	var exceedHour = Math.floor(timeDiff / hour);
	var exceedMin = Math.floor(timeDiff / min);
	// 最后判断时间差到底是属于哪个区间，然后return
	if (exceedyear < 100 && exceedyear > 0) {
		return exceedyear + '年前';
	} else {
		if (exceedmonth < 12 && exceedmonth > 0) {
			return exceedmonth + '月前';
		} else {
			if (exceedWeek < 4 && exceedWeek > 0) {
				return exceedWeek + '星期前';
			} else {
				if (exceedDay < 7 && exceedDay > 0) {
					return exceedDay + '天前';
				} else {
					if (exceedHour < 24 && exceedHour > 0) {
						return exceedHour + '小时前';
					} else {
						return exceedMin + '分钟前';
					}
				}
			}
		}
	}
},

html文字超过部分显示为省略号

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;

文字滑动（手动）

overflow-x: scroll;white-space: nowrap;width: 100%;

判断身份证

var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (this.str_card_id != ''){
  if (!regIdNo.test(this.str_card_id)) {
	alert('身份证号填写有误');
	return false;
  }
}

判断电话

var myreg1 = /^1(3|4|5|6|7|8|9)\d{9}$/;
if(this.str_tel!=''){
	if(!myreg1.test(this.str_tel)){
		uni.showToast({
			title: "手机号码格式不正确",
			icon:"none"
		})
		this.flag_popul=false
		return false;
	}
}

判断小数点后输入限制

var myreg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
if (!myreg.test(this.str_price)) {
	uni.showToast({
		title: "请小数点后填写两位",
		icon: "none"
	})
	return false
}

拨打电话

way_call(){
	uni.makePhoneCall({
		phoneNumber: this.orderData.driver_phone //仅为示例
	});
},

复制文字

uni.setClipboardData({
	data: value
});

点击切换隐藏显示内容

:style="'overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: '+hang+';'"

data() {
	return {
		hang: 2,
		flag_hang: true,
	}
},
way_desc() {
	this.flag_hang = !this.flag_hang
	if (this.flag_hang) {
		this.hang = 2
	} else {
		this.hang = 10
	}
},

uniapp页面跳转传递复杂参数

A:
uni.navigateTo({
	url: '/pages/web-view/web-view?url=' +encodeURIComponent(JSON.stringify(list)) 
})
B:	
this.url= JSON.parse(decodeURIComponent(options.url))

背景颜色渐变

background-image: linear-gradient(to right , #3431DD, #3B5EFE);

uniapp的轮播

<swiper class="swiper" autoplay="true" interval="5000" duration="1500" circular="true">
	<block v-for="(item,index) in bannerData" :key="index">
		<swiper-item previous-margin="10px" next-margin="10px">
			<image style="width: 100%;height: 100%;border-radius: 10rpx;" :src="item.banner_img" mode="scaleToFill"></image>
		</swiper-item>
	</block>
</swiper>

设置背景图片（app)

width: 100%;
	height: 100%;
	background-image: url(../../static/images/bg3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;				

小程序设置背景图片

<image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -1;bottom: 0;right: 0;" src="../../static/images/bg4.png"></image>

获得状态栏高度(小程序，app)

<template>
    <view>
        <view class="status_bar">
        	//这里是状态栏
        </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);	//这里是状态栏css变量
        width: 100%;
    }
</style>
onLoad() {
	let that = this;
		wx.getSystemInfo({
			success: function(res) {
				res.statusBarHeight; //这就是状态栏的高度
			},
		});
},

自定义状态栏

pages.json:
"navigationStyle": "custom"

小程序自定义状态栏+标题栏高度

<view class="status_bar"></view>
	<view :style="'width: 100%;height:'+height+ 'px;display: flex;justify-content: flex-start;align-items: center;background-image: linear-gradient(to right , #FF9494, #FE3E3E);'">
		<image src="../../static/images/search.png" style="width: 33rpx;height: 33rpx;margin-left: 33rpx;"></image>
	</view>
data() {
		return {			
			height:0,
		}
	},
onLoad() {
	let that = this
	uni.getSystemInfo({
		success: e => {
			let StatusBar = e.statusBarHeight;
			let rect = wx.getMenuButtonBoundingClientRect();
			if (e.system.toLowerCase().indexOf('ios') > -1) {
				//IOS  
				let CustomBar = rect.bottom + (rect.top - e.statusBarHeight) * 2;
				that.height = CustomBar - e.statusBarHeight;
			} else {
				//安卓  
				let HeaderBar = rect.height + (rect.top - e.statusBarHeight) * 2;
				that.height = HeaderBar + e.statusBarHeight;
			}
		}
	});
},
		
.status_bar {
	height: var(--status-bar-height); //这里是状态栏css变量
	width: 100%;
	background-image: linear-gradient(to right, #FF9494, #FE3E3E);
}
pages.json:
"navigationStyle": "custom"

拆分图片

var img = goodsData.goods_img.split("###")
var arr = img.filter(function(el) {
	return el !== '';
});
this.goodsImg = arr

/uni.navigateBack({})返回携带参数

go_back() {
	let pages = getCurrentPages(); //获取所有页面栈实例列表
	let nowPage = pages[pages.length - 1]; //当前页页面实例
	let prevPage = pages[pages.length - 2]; //上一页页面实例
	prevPage.$vm.tagIndex = this.index; //修改上一页data里面的searchVal参数值为1211
	uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
		delta: 1
	});

	// uni.navigateBack({})
},

弹框

var that=this
uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	showCancel:true,
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});		

uniapp回到顶部

uni.pageScrollTo({
	scrollTop: 0,
	duration: 300
});	

uniapp请求接口

uni.request({
	method: "POST",
	url: this.httpUrl + '5fe01e7abc95d',
	header: {
		'content-type': "application/x-www-form-urlencoded"
	},
	data: {
		
	},
	success: (res) => {
		console.log("====" + JSON.stringify(res))
		var data = res.data;
		if (data.code == 1) {

		} else {
			uni.showToast({
				title: data.msg,
				icon: "none"
			});
		}
	}
});	

比较日期大小

compareDate(dateTime1,dateTime2) {
	var formatDate1 = new Date(dateTime1)
	var formatDate2 = new Date(dateTime2)
	if(formatDate1 > formatDate2) {
		return true;
	}else {
		return false;
	}
},			

判断日期相差几天

count(date1,date2) {
	var date1 = new Date(date1);
	var date2 = new Date(date2);
	var date = (date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24); /*不用考虑闰年否*/
	return date
},

//多选

<view v-if="isActive.indexOf(1)==-1"></view>

item(index) {
	if (this.isActive.indexOf(index) == -1) {
		console.log(index) //打印下标
		this.isActive.push(index); //选中添加到数组里
	} else {
		this.isActive.splice(this.isActive.indexOf(index), 1); //取消
	}
},	

小程序button去除边框

button::after{ border: none; }			

小程序分享

<button open-type="share">分享</button>

onShareAppMessage(res) {
	return {
		title: '多选',
		desc: this.title,
		path: '/pages/answer/recording-duo?correct_num='+this.dui+'&error_num='+this.cuo+'&answer_title='+this.title+'&score='+this.score,
		imageUrl: "",
		success: res => {
		},
		fail: err => {
		},
	}
},

js去除数组对象中的重复对象

1.
 var arr = [
    {id: 1, name: 'sli', year: 2012},
    {id: 2, name: 'ap', year: 2015},
    {id: 1, name: 'alslion', year: 2012},
    {id: 3, name: 'pose', year: 2012},
]

//删除arr中的重复对象
var newArr= [];
var arrId = [];
for(var item of arr){
    if(arrId.indexOf(item['id']) == -1){
        arrId.push(item['id']);
        newArr.push(item);
    }
}
console.log(arrId,newArr);

2.
var arr = [
	{name:'uzi',color:'blue'},
	{name:'pdd',color:'white'},
	{name:'mlxg',color:'orange'},
	{name:'uzi',color:'red'},
]

let hash = {};
var newArr = arr.reduce((item, next) => {
	hash[next.name] ? '' : hash[next.name] = true && item.push(next);
	return item
}, []);
console.log(newArr);

//数组对象完全相同的去除
function delObj(obj) {
	var uniques = [];
	var stringify = {};
	for (var i = 0; i < obj.length; i++) {
		var keys = Object.keys(obj[i]);
		keys.sort(function(a, b) {
			return (Number(a) - Number(b));
		});
		var str = '';
		for (var j = 0; j < keys.length; j++) {
			str += JSON.stringify(keys[j]);
			str += JSON.stringify(obj[i][keys[j]]);
		}
		if (!stringify.hasOwnProperty(str)) {
			uniques.push(obj[i]);
			stringify[str] = true;
		}
	}
	uniques = uniques;
	return uniques;
}
var arr = [
	{name:'uzi',color:'blue'},
	{name:'pdd',color:'white'},
	{name:'mlxg',color:'orange'},
	{name:'uzi',color:'blue'},
]
console.log('arr：',delObj(arr))

var arr1 = [
	{name:'uzi',color:'blue'},
	{name:'pdd',color:'white'},
	{name:'mlxg',color:'orange'},
	{name:'uzi',color:'red'},
]
console.log('arr1：',delObj(arr1))

HTML
var user_id = sessionStorage.id;
var token = sessionStorage.token

	<div class="flag_show" style="width: 100%;text-align: center;height: auto;display: none;">~没有更多数据~</div>

if ($(‘input[name=findtext]’).val() == ‘’) {
getOrder()
}

//input动态设置值
$(“input[name=‘c_contact_name’]”).attr(“value”, data[0].user_name);

工程进行中

state = $(this).data('status');

//获得页面跳转传递的参数
var id = GetRequest().id
//获取地址栏的url参数
function GetRequest() {
var url = location.search; //获取url中"?“符后的字串
console.log(‘url===’+url)
var theRequest = new Object();
if (url.indexOf(”?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest;
}

res.data.forEach(function (item, index) {
//ES6新语法：模板字符串
html +=
<option value="${item.company_name}">${item.company_name}</option>;
})
$(’.conpany’).html(html);

//新增模板
$newbox = $(
‘

’ +
‘

’);
${(}^{\prime }.b_{l}is{t}^{\prime }).prepend($newbox);//在选中标签开始的地方插入内容
${(}^{\prime }.b_{l}is{t}^{\prime }).append($newbox);//在选中目标的结尾插入内容
${(}^{\prime }.b_{l}is{t}^{\prime }).after($newbox);//在被选元素之后插入内容
${(}^{\prime }.b_{l}is{t}^{\prime }).before($newbox);//在被选标签前面插入内容

$(’.onway’).click(function() {
state = $(this).data(‘status’);
console.log(state);
order(state);
})
// 已完成
$(’.finish’).click(function() {
state = $(this).data(‘status’);
console.log(state);
order(state);

})

$.getJSON(‘http://aef.yunfangshi.com/api/600bddfc4b0ef’, { user_id: user_id, token_id: token }, function(res) {
console.log(‘业务员端===’+JSON.stringify(res));
if (res.code == 1) {

} else {
	layer.msg(res.msg);
}

})

//动态设置select默认选中的option
$(’.bizhong’).val(‘4’)

//jq设置页面加载完成事件
$(function () {
getOrder()
})

返回上一步

window.history.back(-1);
window.history.go(-1);//返回上一页不刷新
window.history.back(); //返回上一页
window.location.href = document.referrer;//返回上一页并刷新，真正实现页面后退并刷新页面
history.go(1);//前进一页
history.forward(); //前进一页
history.length;//用length属性查看历史中的页面数

history.go(-1)和history.back()的区别
1.history.go(-1)表示后退与刷新。如数据有改变也随之改变
2.history.back()只是单纯的返回到上一页。

//页面跳转
location.href = “index.html”

var sex = $(‘input[name=user_sex]’).val();
$(‘input[name=user_phone]’).val(res.data.user_phone)
$(“input[name=‘b_actual_price’]”).attr(“value”, data.b_actual_price);

添加

//js实现移动HTML5页面滑动到最底部触发内容加载

//文档高度
function getDocumentTop() {
var
scrollTop = 0,
bodyScrollTop = 0,
documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//可视窗口高度
function getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == “CSS1Compat”) {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
//滚动条滚动高度
function getScrollHeight() {
var
scrollHeight = 0,
bodyScrollHeight = 0,
documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
window.onscroll = function () {
//监听事件内容
if (getScrollHeight() == getWindowHeight() + getDocumentTop()) {
//当滚动条到底时,这里是触发内容,异步请求数据,局部刷新dom
console.log(“开始滚动！”);
}
}

function scroll() {
//文档高度
var
scrollTop = 0,
bodyScrollTop = 0,
documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
//可视窗口高度
var windowHeight = 0;
if (document.compatMode == “CSS1Compat”) {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
//滚动条滚动高度
var
scrollHeight = 0,
bodyScrollHeight = 0,
documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

if (scrollHeight == windowHeight + scrollTop) {
	//当滚动条到底时,这里是触发内容,异步请求数据,局部刷新dom
	// console.log("开始滚动！");
	return true
}
return false

}
window.onscroll = function () {
//监听事件内容
if (scroll()) {
//当滚动条到底时,这里是触发内容,异步请求数据,局部刷新dom
console.log(“开始滚动！”);
}
}

if (res.code == 404) {
location.href = ‘…/login.html?status=1’
} else

function formatDate(value) {
let date = new Date(value)
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
y = y < 10 ? (‘0’ + y) : y
m = m < 10 ? (‘0’ + m) : m
d = d < 10 ? (‘0’ + d) : d
return y + ‘.’ + m + ‘.’ + d
}

var list=res.data
for(var i in list){
list[i].add_time=formatDate((list[i].add_time)*1000)
}

//手机端web页面自适应

/* 手机端 */ @media screen and (max-width:768px) { html { /* 相当于100px */ background-color: #f1f1f1; font-size: 13.33333vw; } }

//手机web长按触发事件
var timeOutEvent = 0;
function touchstart(obj) {
timeOutEvent = setTimeout(function () {
//此处为长按事件-----在此显示遮罩层及删除按钮
console.log(“长按事件触发发” );
}, 500);
}
function touchend() {
clearTimeout(timeOutEvent);
}

//打印26个字母
for(let code =65;code<91;code++){
console.log(String.fromCharCode(code))
}

ES6
//ES6复制数组//合并数组concat()和rest
//复制数组
(方法一:)
var arr1=[‘a’,‘b’,‘c’,‘d’];
var cc=arr1.concat();
cc[1]=‘yy’;
console.log(arr1);//[“a”, “b”, “c”, “d”]
console.log(cc);//[“a”, “yy”, “c”, “d”]
(方法二:)
var arr1=[‘a’,‘b’,‘c’,‘d’];
var dd=[…arr1];
dd[0]=‘es6’;
console.log(dd);//[“es6”, “b”, “c”, “d”]
console.log(arr1);//[“a”, “b”, “c”, “d”]
//合并数组
(方法一:)
var arr1=[‘a’,‘b’,‘c’,‘d’];
var arr2=[‘d’];
var arr3=[‘e’,‘f’];
var cc=arr1.concat(arr2,arr3);
console.log(cc);//[“a”, “b”, “c”, “d”, “d”, “e”, “f”]
(方法二:)
var arr1=[‘a’,‘b’,‘c’,‘d’];
var arr2=[‘d’];
var arr3=[‘e’,‘f’];
var dd=[…arr1,…arr2,…arr3];
console.log(dd);//[“a”, “b”, “c”, “d”, “d”, “e”, “f”]

//ES6：map映射数组映射
1、将一个普通数组映射为对象数组

将[1,2,3] 映射为 [{id: 1}, {id: 2}, {id: 3}]

var arr=[1,2,3];
arr=arr.map(item=> { // item是数组中的每一个值
	return {id:item}
})
console.log(arr); //[{id: 1}, {id: 2}, {id: 3}]

3.将一个对象数组映射为另一个对象数组

attachmentList是一个对象数组，需要其中的属性转换为另外一个对象数组fileList，如下：

this.fileList = this.attachmentList.map(item=>{
      return {id:item.id,name:item.fileName,url:item.filePath}
});

…/assets/

<el-pagination
layout=“prev, pager, next”
:total=“count”
@current-change=“current_change”
@prev-click=“prev_click”
@next-click=“next_click”
>

          count:0,
		  
		  this.count=Number(data.data)

current_change(val){

  },
  prev_click(val){

  },
  next_click(val){

  },

//Android的签名文件生成
1.通过这段命令直接进入jdk bin文件夹下面 cd C:\Program Files\Java\jdk1.8.0_91\bin
2.再输入keytool命令行
keytool -genkey -alias android.keystore -keyalg RSA -validity 20000 -keystore android.keystore