- 博客(25)
- 收藏
- 关注
原创 vue中解决TypeError: Cannot read properties of undefined (reading ‘slice‘)报错
项目中,因为业务需求通常会在节点中渲染数据,并对数据进行截取。原因是当我们页面刷新数据并没有获取到。这个时候就可能会在控制台报错。换成三元表达式就可以解决。
2023-01-04 10:58:45 5999 2
原创 js中的宏任务和微任务
js线程JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。JavaScript 的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript 的主要用途是与用户互动,以及操作 DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。所以,为了避免复杂性,从一诞生,JavaScript 就是单线程,这已经成了这门语言的核心特征,将来也不会改变。为了利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多
2020-12-07 21:46:53 165
原创 App中的微信支付和支付宝支付如何实现
一.vue微信支付微信支付又分为微信内支付和微信外支付流程如下1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内//判断是在微信内 is_weixn(){ var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger'){ return true;
2020-12-07 21:43:33 1061
原创 rem的原理
什么是rem?rem是响应式布局的一种,是相对于根元素(即html元素)font-size计算值的倍数的一个css单位。因为rem的特性相对长度单位,常被用来做移动适配,pc端页面不推荐使用remrem布局的本质是等比缩放,一般是基于宽度针对设计稿的宽度 利用js动态获取屏幕的宽度rem是相对于根元素的字体大小的单位,也就是html的font-size大小,浏览器默认的字体大小是16px,所以默认的1rem=16px如何根据设计图设计rem比例rem中的核心公式7.5是设计图的宽度除以100p
2020-12-07 21:22:47 4348 2
原创 什么是混合开发?前端开发如何调用
首先搞清楚什么是混合APP开发(Hybrid App)HybridApp(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”通俗来讲,就是将h5我们写好的移动端页面,放到ios设备以及安卓设备中,在里面我们可以享受ios和安卓给我们的所有支持,通过方法调用,回调函数进行使用 给我们提供的方法其次搞清楚APP都有哪些类型?一,原生APP现在的智能手机操作系统就是主流的ios和And
2020-12-07 20:49:59 6012
原创 uni-app的使用和介绍
uni-app 介绍uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。创建 —— 运行 —— 打包——发布创建:1.通过 HBuilderX 创建HBuilderX官网:https://www.dcloud.io/hbuilderx.html在点击工具栏里的文件 -> 新建 -> 项目:2.选择uni-app类型,输
2020-12-04 21:46:10 1478
原创 微信小程序在开发过程中遇到的常见问题以及如何解决
在开发过程中,我们总会遇到各种各样的问题,下面就为大家搜集一些常见的BUG问题:问题1:小程序中渲染json数据,,一大串字符串,如何渲染到页面中解决方案:通过rich-text标签中的nodes属性渲染数据问题2:需要一个占满小程序页面的盒子 且做到 自适应大小 起初用的 rpx 但rpx并不能做到自适应大小 其本质是1rpx = 0.5px 并不能动态的改变大小解决方案:改用 vh vw,小程序中虽然px不能使用了 但vh vw是不受影响的问题3:使用富文本组件展示后台返回的数据图片超出屏幕
2020-11-29 20:52:11 2790
原创 微信小程序登录授权步骤
微信小程序的登录逻辑先来一张微信登录的流程图:具体操作步骤:1,首先用户打开小程序,进入之后通过 wx.getSetting 判断是否有授权过wx.getSetting({//wx.getSetting方法获取用户的当前设置(查看是否授权)sucsess:res=>{//调用成功的回调函数 if (res.authSetting[‘scope.userInfo’]) {//如果res.authSetting[‘scope.userInfo’]有值时,代表已授权}else{//否则就是
2020-11-29 20:09:01 2023
原创 微信小程序创建,组件传值,生命周期
创建步骤一,准备工作1.登录微信公众号平台完成注册2.注册完成,点击登录(注意这一步需要扫码登录)3.进入之后保存小程序ID点击开发---------------开发管理-----------------开发设置记住自己的小程序ID,很重要(唯一标识)5.下载开发者工具工具--------------------开发工具------------------------------开发者工具7.安装开发者工具到这里准备工作就完成了二,开发者工具的使用1.添加创建项目点击+号
2020-11-21 21:08:32 602 1
原创 浅谈JavaScript深拷贝,浅拷贝
浅拷贝和深拷贝概念简单来说,浅拷贝就是只拷贝一层,深层次的对象级别的就拷贝引用,深拷贝就是层层拷贝,每一级别的数据都会拷贝出来;如何区分深拷贝与浅拷贝?简单点来说就是,假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明是浅拷贝,如果B没变,那就是深拷贝。深入点来说,就是B复制了A,如果B复制的是A的引用,那就是浅拷贝,如果B复制的是A的本体,那就是深拷贝。在深入了解深拷贝和浅拷贝之前,我们先得了解堆栈和数据类型。堆栈和数据类型在js中,数据类型分为两种,基本类型和引用类型。基
2020-11-17 21:58:25 246 1
原创 webpack使用
webpack是什么静态资源打包工具(简称打包工具) ------------------------前端必备webpack核心1.入口文件(entry): 好比main.js2.出口文件(output):好比dist 打包之后的文件夹3.插件(plugins):自动生成html文件等插件 4.转换器(loader):sass less 转换成我们想要的文件类型5.服务器(dev-serve):使我们webpack在本地运行 服务6.模式(mode):可以切换开发环境 和 生成环境webp
2020-11-17 17:08:11 1081 3
原创 Cookie的使用和封装
什么是cookieCookies是一种技术,它能够把你bai在访问网站时的产生的一些行为信息给读取保存下来。最常见的便是我们在访问某些网页的的时候提示我们是否要保存用户名和密码,我们点击确定后,再次来到网站的时候,网站就能够读取到cookies,知道我们的用户信息,做出相应的处理机制,我们则不用再输入用户名和密码。cookie的使用场景1.页面用来保存信息(1)比如:自动登录、记住用户名,浏览记录等2.cookie的特性(1)同一个网站中所有的页面共享 一套cookie(因为不可 能在同一个
2020-11-15 21:49:45 209
原创 初识JavaScript,基础篇
为什么学习 JavaScript?JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:HTML ------------------------定义了网页的内容CSS--------------------------描述了网页的布局JavaScript------------------网页的行为什么是JavaScript(简称JS)JavaScript是一门脚本语言JavaScript是一门解释性语言JavaScript是一门动态类型的语言JavaScript是一
2020-11-15 20:26:10 144
原创 使用promise封装 原生ajax,$.ajax(),fetch
如何使用promise封装原生ajax// Promise 封装 ajax//url:请求的API//method:请求方式function myAjax(url, method) {method = method.toLowerCase(); //toLowerCase() 方法用于把字符串转换为小写。return new Promise((res, rej) => {var xhr = new XMLHttpRequest(); //创建XMLHttpRequest的实例化对象
2020-11-12 21:06:53 245
原创 http/https协议、常见状态码、get/post、http缓存机制
http/https协议基本概念HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法,被用于在 Web 浏览器和网站服务器之间传递信息。HTTP 默认工作在 TCP 协议 80 端口,用户访问网站 http:// 打头的都是标准 HTTP 服务。HTTP 协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直
2020-11-11 19:58:23 506
原创 ES6新增常用特性及详解
ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。JavaScript发展的时间轴:1、1995:JavaScript诞生,它的初始名叫LiveScript。2、1997:ECMAScript标准确立。3、1999:ES3出现,与此同时IE5风靡一时。4、2000–2005: XMLHttpRequest又名AJAX。5、
2020-11-10 20:04:17 722
原创 VUE动态添加样式,单选效果,多选效果样式实现,style,class的样式切换
Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。动态添加样式v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。C
2020-11-09 19:42:28 738
原创 Vue常用指令
1,文本插值:{{ }} Mustache2, DOM属性绑定: v-bind3,指令绑定一个事件监听器:v-on4. 实现表单输入和应用状态之间的双向绑定:v-model5. 控制切换一个元素的显示:v-if 和 v-else6. 列表渲染:v-for7. 根据条件展示元素:v-show8. 渲染变量内容:v-html9.绑定标签内显示内容:v-text10. v-if 、 v-showv-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和
2020-11-09 19:22:30 808
原创 对vuex的理解
一、概念vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化)。二、五大核心属性核心属性为:state,getter,mutation,action,modulestate:存储数据,存储状态;在根实例中注册了store 后,用 this.$store.state 来访问;对应vue里面的data;存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新。getters
2020-11-09 08:38:15 104
原创 vue登录注册,带token验证
Vue项目中实现token验证大致思路如下:其过程大致如下:① 用户首次登录,将输入的账号和密码提交给服务器② 服务器对输入内容进行校验,若账号和密码匹配则验证通过,登录成功,并生成一个token值,将其保存到数据库,并返回给客户端③ 客户端拿到返回的token值将其保存在本地(如cookie/local storage),作为公共参数,以后每次请求服务器时都携带该token(放在响应头里),提交给服务器进行校验④ 服务器接收到请求后,首先验证是否携带token,若携带则取出请求头里的token值
2020-11-01 21:56:55 1542
原创 Vue中Axios封装API接口的思路及方法
Vue中Axios封装API接口的思路及方法一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余。第一步,安装np
2020-11-01 21:19:58 669 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人