小铭の博客

在微信小程序的项目开发中，我们需要定位用户的位置， 而微信小程序内置了可以获取用户经纬度的函数： 123456789wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy }}) 其中latitude和longitude分别是经度和纬度。但是仅凭经纬度无法到达定位城市的效果，必须借助第三方地图商的API，如高德、百度、腾讯等等。 腾讯地图定位城市API推荐使用腾讯地图，毕竟跟微信小程序是一家的。 注册腾讯地图API平台直接注册就行，注册好后在控制台=>应用管理=>我的应用里添加一个应用并获取一个KEY 接下来需要到配额管理中分配额度，个人用户每天有5000条api请求额度，需要分配到不同的请求单位，不然每天只能 ...

一、获取网页内容nodejs提供了简便的方法帮助我们获取网页的整片内容。node的核心模块http模块即可发送请求，摘自node官网api:http.request(options[.callback])http.request(url[,options][,callback]) 以豆瓣top250网站为例：豆瓣电影 Top 250 (douban.com) 1234567891011121314151617const https = require('https')let url = 'https://movie.douban.com/top250'let req = https.request(url, res => { let chunks = [] //监听data事件，获取传递过米的数据片段 //拼接数据片段 res.on('data',chunk => chunks.push(chunk)) res.on('end', () => { / ...

原生js中的深拷贝将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据 ,两个对象或数组不共享一块内存 12345678910111213141516171819202122232425262728293031let obj={ abc:'123', def:[{a:1,b:2,c:3},{q:8,w:9}], qwe:{e:4,f:5} } //需求将obj这个对象拷贝出一个新对象修改新对象的值不会影响原对象的值 //定义一个函数 function copyobj(oldobj){ //定义一个变量接收新对象 let newObj=null //判断这个对象还是数组 //1.如果是数组 if(oldobj instanceof Array){ newObj=[] oldobj.forEach(item => { ...

什么是原型链？每一个实例对象上有一个proto 属性，指向的构造函数的原型对象，构造函数的原型 对象也是一个对象， 也有 proto 属性，这样一层一层往上找的过程就形成了原型链。 实例对象的 proto 指向构造函数的 prototype，构造函数的__proto__ 指向Object的 prototype，Object的__proto__ 最终指向null Javascript中任意数据都能沿着自己的原型链最终找到Object.prototype 什么是闭包？ 闭包有哪些优缺点？闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用 域可以访问另外一个函数内部的局部变量。 123456789function fn() { var num = 10 function fun() { console.log(num) } return fun}var f = fn()f() 作用： 延长变量作用域、在函数的外部可以访问函数内部的局部变量，容易造成内层泄露，因为闭包中 的局部变量永远不会被回收 常 ...

箭头函数的使用简写方法速记将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。 123456789101112131415function add(a,b){ return a+b;}//简写为：(a,b)=>{//删掉了function和函数名 return a+b;}var add = function(a,b){ return a+b;}//简写为：var add = (a,b)=>{ //删掉了function return a+b;} 箭头函数的书写规则箭头函数的书写 ()=>{}1234const test = (zjcopy) => { console.log(zjcopy) } test('hello') 箭头函数简写规则：（1）箭头函数只能用赋值式写法，不能用声明式写法 123let f = (a) =>  ...

一、为什么使用Promise?我们知道 js 执行的时候，一次只能执行一个任务，它会阻塞其他任务。由于这个缺陷导致 js 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以使用回调函数执行。 常见的异步模式有以下几种： 定时器 接口调用 事件函数 1234567// setTimeout 示例function callBack(){ console.log('执行完成')}console.log('before setTimeout')setTimeout(callBack,1000)// 1秒后调用callBack函数console.log('after setTimeout') 控制台输出： 123before setTimeoutafter setTimeout执行完成 //1秒后打印 上述定时器是在固定时间触发某个回调函数。 对于 ajax 网络请求就没有这么简单了，可能有多个网络请求是关联的，先执行某个请求返回结果后，第一个返回结果作为第二个请求的参数，调用第二个网络请求。 ...

记录一点前端面试中会出现的问题 hash 与 history 的区别？原理区别hash 原理hash 通过监听浏览器 onhashchange 事件变化，查找对应路由应用。通过改变 location.hash 改变页面路由。 history 原理利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法，改变页面路径。 history Interface 是浏览器历史记录栈提供的接口，可通过 back、forward、go 等，可以读取历览器历史记录栈的信息，pushState、repalceState 还可以对浏览器历史记录栈进行修改。 hash history 有#号 无#号 能够兼容IE8 只能兼容到IE10 实际的url之前使用哈希字符，这部分url不会发送到服务器，不需要在服务器层面上进行任何处理 每访问一个页面都需要服务器进行路由匹配生成 html 文件再发送响应给浏览器，消耗服务器大量资源 刷新不会存在404 浏览器直接访问嵌套路由时，会报 404 问题。 不需要服务器任 ...

Vue3 与 Vue2 区别详述1. 生命周期对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。 12345678910111213141516171819202122// vue3<script setup> import { onMounted } from 'vue'; // 使用前需引入生命周期钩子 onMounted(() => { // ...}); // 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖onMounted(() => { // ...});</script> // vue2<script> export default { ...

前言hexo框架的butterfly首页看腻了，正好发现一个好看简洁的博客首页主题imsyy，本篇博客记录我部署imsyy的过程。 fork仓库imsyy主题是github上的开源项目，项目地址：https://github.com/imsyy/home imsyy/home 点击fork之后添加仓库名，该项目就被复制到你的github中了 部署vercel登录你的vercel，进入到overview页面，点击Add New Project创建一个新项目 选择刚刚复刻的imsyy-home项目 什么都不用改，直接Deploy 之后等待部署成功就行了 vercel在国内会被墙，所以需要绑定一个域名来正常访问 打开域名管理面板，添加域名解析，我们只需添加一个二级域名即可，主机记录为imsyy，可以随意设置，记录类型为CNAME，记录值为vercel-dns.com. 随后回到vercel中，添加域名imsyy+你的域名,然后等待解析完成之后就可以使用该域名访问到一个初始化的imsyy页面啦 本地预览先将项目copy到本地打开 ...

前言在微信小程序的组件通信中有3种方式： 属性绑定 用于父组件向子组件的指定属性设置数据，但仅能设置JSON兼容的格式数据 事件绑定 用于子组件向父组件传递数据，可以传递任意数据 获取组件实例 父组件还可以通过this.selectComponent()获取子组件实例对象 这样就可以直接访问子组件的任意数据和方法 总而言之也就是父传子和子传父两种，这是核心知识但比较绕，于是写篇博客记录下方便之后的使用和记忆。 属性绑定(父传子)准备例子此时我们有一个子组件test5(components)和一个父组件home(pages)，在父组件定义了一个按钮和事件bindtap(),每当点击按钮时，count的值会被动态+1，现在我们需要将该count值传入子组件test5中，让按钮点击时两个页面的count都动态+1 子组件： 1<view>{{count}}</view> 父组件： 1234<view>父组件中count值是:{{count}}< ...