学无止境, 望君把握时间
1.对象的遍历:
Object.keys(parament).forEach(function(key){
console.log(key, parament[key])
})
parament :需要遍历的对象,
key : 键,
parament[key]:值.
2.高德地图绘制图形:
//html部分
<div id="container"></div>
//js部分:
//定义map
var map = new AMap.Map("container", {
resizeEnable: true,
center: that.center,
zoom: 13
});
//创建一个地图的实例。
const polygon = new AMap.Polygon({
path: that.arr,
isOutline: true,
borderWeight: 2,
strokeColor: "#14D1B5",
strokeWeight: 3,
strokeOpacity: 1,
fillOpacity: 0.1,
// 线样式还支持 'dashed'
fillColor: '#14D1B5',
zIndex: 50,
})
//利用setMap方法:
polygon.setMap(map)
3.常链接的使用:
//webscoket请求:
initWebSocket(){ //初始化weosocket
const wsuri = "wss://api.megobike.com/Ws/VehMonitor";
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen(){ //连接建立之后执行send方法发送数据
var that = this;
let actions = {
"cmd" : "1",
"data" : that.areaid
};
this.websocketsend(JSON.stringify(actions));
},
websocketonerror(){//连接建立失败重连
this.initWebSocket();
},
websocketonmessage(e){ //数据接收
var that = this;
const redata = JSON.parse(e.data);
var coordtransform=require('coordtransform');
var scokedata = JSON.parse(redata.data)
that.scokevid = scokedata.vid;
that.scokelnglats = [];
that.scokelnglats.push(coordtransform.wgs84togcj02(scokedata.longitude, scokedata.latitude))
var carlist = JSON.parse(localStorage.getItem("carlist"));
for(var i in carlist){
if(carlist[i].vid == that.scokevid){
carlist[i].longitude = that.scokelnglats[0]
carlist[i].latitude = that.scokelnglats[1]
return;
}
}
},
websocketsend(Data){//数据发送
this.websock.send(Data);
},
websocketclose(e){ //关闭
console.log('断开连接',e);
},
4.通过数据中的字段来查询对应的数据
var data= that.cars.filter(function(item){
return item.vid == scokedata.vid;
})
console.log(data, "找到的数据")
//that.cars 所需要遍历的数据。
//scokedata.vid 需要对比的数据。
//data找到的数据
5.Mock数据参考:
//地址
"https://segmentfault.com/a/1190000014844604"
6.利用filter进行数组对象的筛选。
var resData = [
{
id : 0,
name : '张三',
age : 18,
value : 'cccc'
},
{
id : 1,
name : '李四',
age : 20,
value : 'sssss'
},
{
id : 3,
name : '王五',
age : 22,
value : 'aaaa'
}
]
正常从后台拿到需要遍历的数据亦是如此。倘如只需获取 name 为李四的数据进行操作,即:
let newObj = [];
newObj = resData.filter((temp) => {
return temp.name == '李四'
})
console.log(newObj)// newObj: [{id :1, name : '李四', age : 20, value : 'sssss'}]
7.移动端键盘数字输入小数
// type输入 digit
<input
type="digit"
v-model="param.num"
placeholder="请输入报工数量"
/>
8.小程序强制更新页面
this.$forceUpdate()
9.解决小程序scroll-view滚动出现抖动bug
//利用延迟器
<scroll-view
scroll-x="true"
:scroll-left="navLeft"
class="scroll-row"
@scroll="scroll">
</scroll-view>
data() {
scorllTime : null
},
methods: {
scroll(e) {
if(this.scorllTime) {
clearInterval(this.scorllTime)
}
this.scorllTime = setTimeout(() => {
this.navLeft = e.detail.scrollLeft
}, 1000)
},
}
10.uni中 安卓与ios 转换时间的问题
//在ios中
let date = '2021-08-08 20:20:20'
let time = new Date(date)
// 会无法解析时间。需将 '-'切换成 '/'进行转换时间
date = date.replace(/-/g,"/")
11.小程序中canvas等原生组件设置z-index无效
map、video、canvas、camera、live-player、
live-pusher组件无法设置z-index改变其图层。要想不被盖住,
弹窗内容只能使用<cover-view>对<view>进行替换
<cover-view>子集只能包括<cover-img>与<cover-view>
12.小程序中设置屏幕横竖翻转
在pages.json中对应的页面添加:
"style": {
"pageOrientation":"auto"
}
13.uni小程序中的 uni.scanCode
在uni中 uni.scanCode({})函数无法在浏览器中正常使用。
14.监听的使用方式:
// 第一种
data() {
return {
cityName: 'aaa'
}
},
watch: {
cityName(oldName, newName) {
console.log(oldName, newName)
}
}
//第二种
// 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数,
//只有当值改变的时候 才会执行,如果想在第一次绑定的时候执行此监听函数 则需要 //设置 immediate为true
data() {
return {
cityName: 'aaa'
}
},
watch: {
userName: {
handler(newName, oldName) {
console.log(newName, oldName)
},
immediate: true
}
}
// 深度监听 当要监听对象或数组的时候需要添加deep:true属性
data (){
return {
cityName: {name:'北京'}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
15.项目中预览查看pdf格式文件:
// 使用<embed/>标签:
// 在static文件中创建静态html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.embed{
width: 100%;
height: 700px;
}
</style>
<body>
<embed src="./dp.pdf" class="embed"/>
</body>
</html>
16 react中js数据更新,页面未重载
// 初始数据格式
const [confirList, setConfirList] = useState([]);
// 接口: userData
//参数: params
userData(params).then((res) => {
Object.assign(confirList, res.Data)
setConfirList(confirList)
})
17 静态枚举值
// 根目录下新建静态文件夹:
// 在所需页面中引入:
import { WS_MESSAGE_TYPE_ENUM } from '~/enums/socket-status.js'
console.log(WS_MESSAGE_TYPE_ENUM.URGE_ORDER, "枚举值")
18 pc端图片裁剪展示:
//css:
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
对应的属性值:
initial:设置为默认值
fill:默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain:保持原有尺寸比例。内容被缩放。
cover:保持原有尺寸比例。但部分内容可能被剪切。
none:保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,
取决于它们两个之间谁得到的对象尺寸会更小一些。