- 博客(91)
- 收藏
- 关注
RSS订阅原创 微信小程序bindtap和carchtap的区别
1. 事件事件是视图层到逻辑层的通讯方式。 事件是将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当触发该事件时，就会执行逻辑层中对应的事件处理函数。2. 如何使用事件将事件绑定到组件上面，bindtap和catchtap都属于点击事件，绑定了之后点击组件可以触发这个函数。 函数bindHandle会接收一个事件，事件里面存储了一些函数调用的上下文信息 <view id="box" data-item="item" bindtap="bindHandle">点击
2021-01-16 18:08:48
1381
原创 Vue-watch 中的 deep 和 immediate 的理解
watch 对象监听模型变量的变化，是一个对象，以键值对的形式出现值可以是函数：就是当你监控的模型变量变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是变化前的值。值可以是函数名：不过这个函数名要用单引号‘ ’来包裹。值是对象：这个对象里面有三个选项：handler：其值是一个回调函数。即监听到变化时应该执行的函数。 deep：其值是 true 或 false，确认是否深入监听，deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个
2020-08-18 15:24:42
948
1
原创 Vue路由跳转的三种方式
1. router-link 【实现路由跳转最简单的方法】<router-link to="需要跳转到的页面的路径"> -------浏览器在解析时，将它解析成一个类似于<a>标签注意：需要跳转的路由需要在router/index.js中引入不带参数 注意：router-link 中链接如果是 ' / ' 开始就是从根路由开始，如果开始不带' / ',则从当前路由开始 <router-link :to="{name:'home'}" /><
2020-08-17 10:59:04
2132
原创 Vue路由导航守卫
守卫作用当我们路由切换到一个组件里面，如果没有权限，不让进入，有权限就可以进入组件内部守卫beforeRouteEnter（to,from,next）( 当进入组件前 执行函数 ) to 去哪个路由 from 从哪个路由来 next() true 允许进入 / false 不允许进入 / '/user' 进入 user 地址 beforeRouteEnter 守卫不能访问 this ，因为守卫在导航确认前被调用，因为即将登场的新组件还没被创建，不过，可以传...
2020-07-29 11:23:53
306
原创 mathjs解决js当中计算精度问题
总结一下今天项目当中 js 计算精度问题问题是：在 js 当中 12 * 0.1 != 1.2的问题1. 使用mathjs解决使用mathjs 可以解决这个问题 安装依赖 npm install mathjs --save 在需要解决精度问题的页面引入 mathjs: const math = require('mathjs') 使用math.format方法 如：...
2020-04-07 16:20:47
2940
原创 for in 和 for of 的区别
for infor in 一般用于遍历对象，不建议使用 for in 遍历数组， 如果迭代的对象的变量值是null或者undefined，for in不执行循环体，建议在使用for in循环之前，先检查该对象的值是不是null 或者 undefinedfor offor of 语句在可迭代对象(包括 Array、Map、Set、String、TypedArray、arguments对象...
2020-03-21 19:02:10
454
原创 @click.native中 .native 的含义与使用
vue 当中的 @click.native.native--侦听组件根元素上的原生事件作用： 给组件绑定原生事件@click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口也就是说，在处理DOM原生事件的场合中需要添加额外的标识符比如：如果使用router-link标签，加上@click事件，...
2020-03-18 11:01:18
28084
9
原创 一次完整的http请求过程
比如在浏览器地址栏中输入百度的url地址，它内部的执行流程是：url( www.baidu.com ) 转换成 对应的 ip（ 192.168.1.2） 拿到 ip 去跟服务器建立 tcp 连接 建立 tcp 连接之后发起 http 请求 ( tcp是比http更底层的一个连接协议) （ ip是tcp下面一层 ） http 连接建立之后，服务器把 html 发送给浏览器 浏览器解析 ...
2020-02-27 11:13:44
267
原创 git 常用命令
将本地的源代码提交到码云中1. git status 查看文件的状态2. git add . 将文件都提交到暂存区3. git commit -m '文本提示信息'------>此时将暂存区中的文件提交到了本地存储中4. git branch 查看分支5. 合并分支 比如将 login 分支 合并到 master 主分支上，需要先切换到主分支 master上...
2020-02-25 20:47:15
143
原创 vue 当中组件之间共享数据的方式
vue当中组件之间共享数据的方式父向子传值：v-bind 属性绑定 子向父传值：v-on 事件绑定 兄弟组件之间共享数据：EventHBus $emit 发送数据的那个组件 $on 接收数据的那个组件 上面介绍的这三种组件之间的通讯方式，只适合在小范围内来进行数据的共享，如果我们要频繁的、大范围的实现数据的共享，以上三种方式就有点力不从心了Vuexvuex是实现组件...
2020-02-25 15:51:17
1512
1
原创 js当中的数据类型以及如何检验
基本数据类型Number、String、Boolean、null、undefined引用数据类型object、function、array...常用的检测数据类型的方法一般有以下三种：1. typeoftypeof一般主要用于检测基本数据类型，因为它检测引用数据类型返回的都是 object，需要注意的是 typeof 检测 null 返回的也是 objecttyp...
2020-02-24 21:53:25
180
原创 响应式布局和自适应布局的区别
什么是响应式布局？响应式布局就是针对不同宽度的设备进行布局和样式的设置，从而适应不同设备的目的，换句话说，也就是一个网站能够兼容多个终端什么是自适应式布局？自适应式布局其实也就是说需要开发多套界面来适应不同的终端响应式布局和自适应布局的区别自适应布局通过检测视口分辨率来判断当前的设备是：PC 、平板、手机，从而请求服务层，返回不同的页面， 响应式布局通过检测视口分辨率，针对不...
2020-02-24 21:39:42
414
原创 let 和 const 区别
在 ES6 中通常使用 let 和 const 来声明，let声明变量 const声明常量let 和 const 都是块级作用域，以{ }代码块作为作用域范围，只能在代码块里面使用 不存在变量提升，只能先声明后使用，否则会报错，在代码块内，声明变量之前，该变量都是不可用的，这个在语法上，叫做暂时性死区 在同一个代码块内，不允许重复声明 const声明的是一个只读的常量，在声明时就需要赋...
2020-02-24 21:04:51
780
原创 js当中如何合并数组
1. concatjs中的Array对象提供了一个叫 concat() 方法，连接两个或更多的数组，并返回结果var arr1 = [1,2,3]var arr2 = [5,6,8]var arr3 = arr1.concat(arr2)console.log(arr3)// [1,2,3,5,6,8]这个concat方法连接两个数组之后，会返回一个新的数组，这样当我们在进行多...
2020-02-24 20:31:56
910
原创 fetch 和 axios 区别
1. fetch是一个底层的 api 浏览器原生支持的2. axios 是一个封装好的框架fetch优点：浏览器级别原生支持的 api 原生支持 promiseapi 语法简洁 符合 ES 标准规范 是由 whatwg 组织提出的 现在已经是 w3c 规范缺点：不支持文件上传进度监测 使用不完美 需要封装 不支持请求中止 默认不带 cookie...
2020-02-24 10:04:56
2580
原创 使用js实现字符串单词的翻转
使用 js 实现将字符串 s 中的单词反转，如：s = ' I have a pen , i have an apple'<script> var arr = 'I have a pen , i have an apple' console.log( arr.split(' ').reverse().join(' ') )</script>控制台...
2020-02-20 16:38:04
1130
原创 css 实现文字一行显示，多出部分显示省略号
文字一行显示，多出部分显示成省略号html结构<div class="title">前端开发工程师</div>对应的css样式为.title{ width: 50px; color: skyblue; white-space: nowrap; overflow: hidden; text-overflow: ellip...
2020-02-20 16:24:08
2200
原创 纯 css 实现三角形
使用纯 css 实现三角形的效果先准备html结构<div class="box"></div>先将 box 设置为宽高均为100px的正方形，背景色为蓝色
2020-02-20 16:16:22
339
原创 vue 中计算属性和方法的区别
计算属性和方法的区别计算属性computed: 是基于它们的依赖进行缓存的，计算属性如果针对的是同一个数据，如果这个数据不发生变化，那么最终用的都是第一次计算的结果 方法methods: 不存在缓存，在 methods 中定义的函数，调用几次，执行几次，不存在缓存问题...
2020-02-19 16:18:19
375
原创 小程序里面的双向绑定和vue中的双向绑定有什么区别？
小程序中的数据双向绑定首先通过 bindinput 绑定文本框的输入事件 在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值 通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 conten...
2020-02-19 12:56:50
8094
1
原创 Vue中 v-if 和 v-show 的区别
v-if 控制元素是否渲染，如果某元素渲染到页面中，几乎不再发生变化，推荐使用v-if v-show控制元素是否显示( 已经渲染到页面结构中，只是通过 css 中 display:none 属性来控制其元素的显示与隐藏 )，如果某个元素渲染到页面之后，需要进行来回之间的切换，推荐使用v-show...
2020-02-18 20:42:05
186
原创 WePY页面中发起数据请求
1. 配置 promisify 启用 async 和 await默认使用 wepy-cli 创建的项目，不支持使用 ES7 的 async 和 await 来简化Promise API的调用，需要手动开启此功能，打开 src--> app.wpy，找到 constructor() 构造函数，在构造函数中代码的最后一行，添加 this.use('promisify')即可，示例代码如下:...
2020-02-13 20:55:07
443
原创 WePY 框架
1. 什么是 WePYWePY 是 腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于MVVM 架构模式，并支持 ES6 / 7 的一些新特性，同时语法风格更接近于Vue.js ，使用 WePY 框架能够提高小程序的开发效率2. WePY的优点WePY 相比于原生小程序开发，拥有众多的开发特性和优化方案，例如：开发风格更接近于 Vue.js ,支持...
2020-02-13 20:29:14
1648
原创 小程序中组件的生命周期
1. 组件的主要生命周期组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发，其中，最重要的生命周期是 created、attached、detached，包含一个组件实例生命流程的最主要时间点组件实例刚刚被创建好时，created 生命周期触发，此时还不能调用 setData，通常情况下，这个生命周期只应该用于给组件 this 添加一些自定...
2020-02-13 16:40:10
3706
1
原创 小程序中的自定义组件
1. 组件的创建在项目的根目录中，鼠标右键，创建 components-->test 文件夹 在新建的 components --> test 文件夹上，鼠标右键，点击“ 新建Component ” 为新建的组件命名之后，会自动生成组件对应的四个文件，后缀名分别为.wxml .wxss .js .json 注意：尽量将不同的组件，存放到单独的文件夹中，从而保证清晰的目录...
2020-02-13 15:44:23
145
原创 小程序中是否存在跨域限制
小程序中没有跨域限制在普通网站开发中，由于浏览器的同源策略限制，存在数据的跨域请求问题，从而衍生了JSONP和CORS两种主流的跨域问题解决方案，但是，小程序的内部运行机制与网页是不同的，小程序中的代码并不运行在浏览器中，因此小程序开发中，不存在数据的跨域请求限制问题...
2020-02-12 21:41:58
7327
3
原创 小程序的页面导航
页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：声明式导航：通过点击 navigator 组件实现页面跳转的方式 编程式导航：通过调用小程序的 API 接口实现跳转的方式声明式导航1. 导航到非 tabBar 页面非 tabBar 页面指的就是没有被当做 tabBar 进行切换的页面示例代码如下：<navigator url="/pages/info/...
2020-02-12 21:12:10
546
原创 小程序中的转发事件
onShareAppMessage（ object ）监听用户点击页面内转发按钮( <button> 组件 open-type="share" ) 或 右上角菜单“转发”按钮的行为，并自定义转发内容，其中Object参数说明如下：参数 类型 说明 from String 转发事件来源。button：页面内转发按钮；menu：右上角转发菜单 tar...
2020-02-12 17:02:22
655
原创 小程序中启用下拉刷新的两种方式
小程序启用下拉刷新的两种方式：需要在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh，但是，一般情况下，推荐在页面配置中为需要的页面单独开启下拉刷新行为 可以通过 wx.startPullDownRefresh() 触发下拉刷新，调用后触发下拉刷新页面，效果与用户手动下拉刷新一致，该方法是在页面中绑定一个点击下拉刷新的按钮，为其绑定点击...
2020-02-12 14:58:00
1708
原创 小程序中的wx:if 与 hidden 的对比
wx:if 与 hidden 均为条件渲染被 wx:if 控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的UI结构 同时，wx:if 也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染 相比之下，hidden就简单的多，组件始终都会被渲染，只是简单的控制显示与隐藏 总结：wx:if 有更高的切换消耗而 hid...
2020-02-12 13:49:50
357
原创 小程序中的事件传参
小程序中的事件传参在小程序中的事件传参比较特殊，不能在为组件绑定事件的同时，为事件处理函数传递参数例如：下面的代码不能正常的运行：因为小程序会把 bindtap 后指定的值，统一当做事件名称来处理<button type="primary" bindtap="btnHandle(123)">事件传参</button>通过data-* 自定义属性传参...
2020-02-11 21:54:58
471
原创 什么是事件？
事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当组件触发事件时，就会执行逻辑层中对应的事件处理函数事件对象可以携带额外信息，如id，dataset，touches...
2020-02-11 20:26:50
2262
原创 小程序中的生命周期函数
1. 生命周期函数 是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行2. 生命周期函数的作用 允许程序员在特定的生命周期时间点上，执行某些特定的操作，例如：页面刚加载的时候，在生命周期函数中自动发起数据请 求，获取当前页面的数据 注意： 小程序中的生命周期强调的是时间段，小程序中的生命周期函数强调的是时间点3. 生命周期函...
2020-02-11 20:23:17
4912
原创 小程序中的生命周期
生命周期( Life Cycle ) 是指一个对象从 创建 --> 运行 --> 销毁 的整个阶段，强调的是一个时间段我们可以把每个小程序运行的过程，也概括为生命周期：小程序的启动，表示生命周期的开始 小程序的关闭，表示生命周期的结束 中间小程序运行的过程，就是小程序的生命周期小程序中的生命周期有两种类型应用生命周期：特指小程序从启动 --> 运行 -->...
2020-02-11 18:43:10
262
原创 什么是rpx尺寸单位？
rpx （ responsive pixel）响应单位rpx是微信小程序独有的、解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配rpx 和 px之间的换算在普通网页开发中，最常用的像素单位是px 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发 以...
2020-02-11 16:49:12
27258
5
原创 什么是wxss
小程序中的样式wxss( WeiXin Style Sheets ) 是一套样式语言，用来决定 WXML 的组件应该怎么显示 wxss 具有 css 大部分特性 wxss 对 css 进行了扩充以及修改，以适应微信小程序的开发 wxss 与 css 相比，wxss扩展的特性有： 尺寸单位 样式导入 wxss目前支持的选择器id选择器 标签选择器 类选择器 伪类选择...
2020-02-11 16:19:17
10409
原创 小程序页面和Vue组件的对比
Vue组件每个.vue组件，是由template 模板结构、script 行为逻辑、style 样式三个部分组成的 小程序页面每个小程序的页面，是由.wxml结构、.js逻辑、.json配置、.wxss样式表 这四个文件组成的小程序页面中每个组成部分的作用.wxml: 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法 .js: 用来定义当前页面中用到的数据、交...
2020-02-11 15:25:43
662
原创 Flex布局
更改主轴方向 flex-directionrow：定义排列方向，从左到右 row-reverse：从右往左 column：从上到下 column-reverse：从下到上是否换行 flex-wrapwrap 换行 nowrap 不换行设置元素在主轴方向上的对齐方式flex-start（默认）：左对齐 或 纵轴为主轴的话是 向上对齐 flex-end：右对齐 或 纵轴为...
2020-02-03 17:55:20
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人