常用点 :

学无止境, 望君把握时间

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 中的一个相同,
取决于它们两个之间谁得到的对象尺寸会更小一些。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值