自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(217)
  • 收藏
  • 关注

原创 npm和yarn的使用

异同点npm 是 Node.js 官方提供的包管理工具,他已经成了 Node.js 包的标准发布平台,用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具,使你可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包。npm 的背后,是基于 couchdb 的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。在 Node 生态系统中,依赖通常安装在

2021-04-20 11:21:22 1

原创 网络优化面试篇

1:HTML页面进行重绘和重排浏览器是如何对页面进行渲染的当我们在浏览器中打开一个HTML页面时,浏览器的渲染引擎首先会解析标签,渲染成DOM树;然后解析css样式,构建渲染树;然后从根节点递归调用,计算每一个元素的大小、位置等,并且计算每一个节点的坐标;最后遍历渲染树,绘制每一个节点,这就完成了页面的渲染。所谓重绘就是当元素的外观例如color,background-color等改变时会引起浏览器重新绘制这些元素,使之呈现新的外观。所谓重排(重构/回流)就是当元素的大小、位置等改变或显示

2021-04-13 18:20:55 11

原创 ES6面试篇

ES6新增let、const、块级作用域、箭头函数、模板字符串、BigInt,Symbol数据类型解构赋值(数组、对象)字符串新增方法数组新增方法(扩展运算符)对象新增方法新的数据结构Set 和 MapProxyPromiseasync和awaitlet、const、块级作用域let声明的变量没有变量提升,必须先声明后使用;暂时性死区。let声明的变量只能在当前块级作用域内使用let不允许在同一作用域重复声明同一个变量;const声明常量,声明就必须赋值,切不

2021-04-13 18:19:27 8

原创 H5\C3面试篇

HTML基础块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!包含a、span、em、strong、b、i、label、br;padding和margin上下属性设置是无效的,左右是有效的行内块元素:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;img,

2021-04-13 18:18:54 7

原创 js面试篇

防抖与节流防抖和节流都是为了解决短时间内大量触发某函数而导致的**性能问题,**比如触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。防抖:在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。使用场景:搜索框输入关键词搜索,监听keyup事件调取接口,就会一直调取接口;优化:(1) 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源;(2) window的resize、scroll事件

2021-04-13 18:18:17 8

原创 nuxt.js面试篇

介绍 基于 Vue.js 的通用应用框架。 SSR 服务端渲染。在服务端生成html发送至客户端 特性:异步数据加载、中间件支持、布局支持等。 优点:有利于SEO,加载速度快,自动配置路由 依赖 node 和 npm npx(npx在NPM版本5.2.0默认安装)SSR的优势更利于SEO。不同爬虫工作原理类似,只会爬取源码,不会执行网站的任何脚本(Google除外,据说Googlebot可以运行javaScript)。使用了React或者其它MVVM框架之后,页面大多数DOM元素都

2021-04-13 18:17:42 14

原创 vue3.0面试篇

1. Vue 3.0 性能提升主要是通过哪几方面体现的?1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归

2021-04-13 18:16:55 14

原创 vue2.0面试篇

$nextTick的使用答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。data为什么必须是一个函数组件中的data写成一个函数,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。delete和Vue

2021-04-13 18:16:22 9

原创 路由

路由两种模式hash模式:vue-router默认的是hash模式。使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了。对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由history模式:window.history对象打印出来可以看到里边提供的方法和记录长度。利用了

2021-04-13 18:09:48 9

原创 antDesignVue的使用

安装引入npm install -g @vue/clivue create antd-demonpm install ant-design-vue --save1、按需加载(推荐) 完整组价列表npm i babel-plugin-import --save// .babelrc or babel-loader option{ "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory"

2021-04-13 17:40:40 15

原创 小程序中mock.js使用

微信开发工具mock的使用当接口调不通或者没数据时候,可以造假数据,页面就可以正常写逻辑vuenpm install mockjs// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1 }]}

2021-04-11 20:57:10 18

原创 express实现mock数据

启动服务端根目录下新建mock文件夹login.json{ "code": 0, "message": "登录成功", "data": { "name": "张三", "token": "ququ" }}index.jsnpm i express --saveconst express = require('express')const app = express()//接口数据const login = req

2021-04-11 20:55:10 14

原创 关掉eslint

根目录新建vue.config.js文件module.exports = { lintOnSave: false}

2021-04-10 18:50:51 10

原创 短路原理JavaScript中“&&”和“||”操作符

||1、只要“||”前面为false,结果取决于后边,返回“||”后面的值。2、只要“||”前面为true,结果就是true,返回“||”前面的值。&&1、只要“&&”前面是false,结果是false,返回“&&”前面的值;2、只要“&&”前面是true,结果取决于后边,返回“&&”后面的值;!!!!的作用是把一个其他类型的变量转成的bool类型...

2021-04-09 18:12:24 11

原创 git代码上传https用户名密码

1、修改https密码2、修改完用户名或密码克隆时候清除git命令旧的用户名和密码sourceTree修改3、删除已有的,下次操作就会弹窗提示输入用户名和密码

2021-04-09 15:29:11 11

原创 vue3.0性能优化

1. Vue 3.0 性能提升主要是通过哪几方面体现的?1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才

2021-03-09 13:54:23 138

原创 vue3.0笔记

2020年9月18发布正式版(rc共13版)!vue3.0新增vue2.0响应式方法及缺点给对象新增一个属性,页面不会变化,需要使用 vm.$set(对象,key,值)删除对象一个属性delete obj.a页面没有变化,需要使用vm.$delete(对象,key)给数组适用下标方式新增一项(arr[3] = ‘哈哈’),页面无变化,需要使用 vm.$set(数组,3,‘哈哈’)或者使用push方法3.0响应式原理创建vue3.0项目(cli版本大于4.5.0)2.0升级命

2021-03-04 16:58:24 21

原创 class和style的书写方式

class <div :class="{ red: !name1, bb: !name2 }">1111111111</div> <div :class="[name1 ? 'yellow' : 'red', 'bb']">222222222222</div> <div :class="`${name1 ? 'yelow' : 'red'} bb`">3333333333333</div>style <di

2021-02-27 16:12:34 30

原创 computed和watch简介与异同

computed计算属性和watch侦听器例子 <h2>计算属性和侦听器</h2> <input type="text" class="flex_l mt-20" v-model="name1" /> <input type="text" class="flex_l mt-20" v-model="name2" /> <input type="text" class="flex_l mt-20" v-model="name" /

2021-02-27 15:29:08 28

原创 vue和uniapp公共样式

vue使用lessreset.less* { margin: 0; padding: 0;}ul { list-style: none;}button,input,select,textarea { margin: 0;}html { box-sizing: border-box;}*,*::before,*::after { box-sizing: inherit;}img,video { height: auto; max-width

2021-02-26 16:32:25 68

原创 uniapp富文本组件editor的使用

文档https://uniapp.dcloud.io/api/media/editor-context?id=editorcontext新建组件editor<template> <view class="container"> <view class="page-body"> <view class='wrapper'> <view class='toolbar' @tap="format" style="height: 130p

2021-02-25 14:30:24 329

原创 收藏小技巧

替换富文本中图片宽度100%.replace(/\<img/gi, '< img style="width:100%;height:auto"');vue 动态样式:style=" 'background-image: url('+(item.close - item.open < 0 ?kimg1[i]:kimg[i]) +');' " //computedkimg(){return [require("../../assets/img/1.png"),require(

2021-02-23 13:59:15 28

原创 uniapp支付大全

H5微信支付(jsAPI)bug1:H5的jsAPI需要先授权,获取code,才能获取支付参数,在授权时报redirect_uri参数错误url必须是线上地址url需要编码需要在公众号后台配置网页授权域名bug2:当前页面的URL未注册https://ddcity.brt999.com/h5/在微信支付商户平台,jsAPI支付配置添加 url:https://ddcity.brt999.com/h5/app微信支付bug:支付失败:签名不对应微信开放平台关联ap.

2021-01-21 10:44:44 203

原创 uniapp签到页面

日历组件<template> <!-- 打卡日历页面 --> <view class='all'> <view class="bar"> <!-- 上一个月 --> <view class="previous" @click="handleCalendar(0)"> <button class="barbtn" v-if="langType=='ch'">上一月</button>.

2021-01-13 16:52:52 267

原创 uniapp支付页面模板

支付组件<template> <view> <u-popup v-model="show" mode="bottom" :closeable="true" @close="close"> <view class="plr-40"> <view class="center ptb-30">选择支付方式</view> <u-radio-group v-model="value"> &lt.

2021-01-06 17:28:28 204

原创 全国城市数据

{"name": "阿坝藏族羌族自治州",},{"name": "阿克苏市",},{"name": "阿拉尔市",},{"name": "阿拉善盟",},{"name": "阿勒泰市",},{"name": "阿里地区",},{"name": "阿图什市",},{"name": "安康市",},{"name": "安庆市",},{"name": "安顺市",},{"name": "安阳市",},{"name": "鞍山市",},{"name": "巴彦淖尔市",},{"name"

2020-12-07 14:45:56 81

原创 uniapp之uview上拉加载和下拉刷新

onLoad中需要调用getList()tab切换需要初始化data,然后调用getList()开启下拉刷新需要在json文件配置 <view class="mg-30"> <empty v-if="list.length==0" text="暂无订单"></empty> <orderItem :type="1" :item="item" v-for="(item,i) in list" :key="i" class="mb-30">&.

2020-12-07 09:45:00 1132

原创 uniapp折线图uchart

导入插件一个页面两个折线图html<view class="bg-white radius-10 mg-20 pd-20"> <view class="flex"> <view class="u-font-28 text-center w100 mtb-30">最近一周收益</view> </view> <canvas canvas-id="canvasLineA" id="canvasLineA" class

2020-11-26 18:10:14 949 2

原创 倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .

2020-11-23 14:06:01 33

原创 uniapp原生canvas绘制商品分享海报

<template> <view class="login"> <u-navbar title="canvas" :is-back="false" title-color="#333"></u-navbar> <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas.

2020-10-27 16:14:41 172

原创 uniapp微信支付

bug必须打自定义基座运行测试,但是就调起来一次,之后就掉不起来了可以打包测试一下,应该没问题点击支付 submit(){ this.$http('/api/property/rechange_index',{ type: this.isActive, money:this.items[this.active].price },"POST").then(data=>{ //data返回参数 //{ // appid:

2020-10-27 15:55:03 537

原创 uniapp发布动态——文字图片地区

页面<template> <view class=""> <view class="ptb-30"> <view class="plr"> <textarea v-model="message" maxlength="1000" placeholder="输入内容(最多1000字)" class="w100" style="height: 450rpx;" /> </view> <view c.

2020-10-23 09:44:50 55

原创 uniapp定位和选择城市

//页面<template> <u-index-list :scrollTop="scrollTop" :index-list="indexList"> <view v-for="(item, index) in list" :key="index"> <u-index-anchor :index="item.letter" /> <view class="list-cell u-border-bottom" v-for="(ite.

2020-10-12 10:34:46 929

原创 uniapp上传图片

//点击更换图像 changeUserimg() { let _this = this uni.chooseImage({ count: 1, //默认9 success: function(res) { const tempFilePaths = res.tempFilePaths; uni.showLoading({ title: '上传中' }) uni.uploadFile({ ...

2020-10-09 14:35:35 56

原创 uniapp和vue连接socket

app.vue全局获取数据并存储在vuex<script> // 解压数据 import pako from './hybrid/html/pako.js'; export default { onLaunch: function() { uni.removeStorageSync('showUp') uni.removeStorageSync('rate') uni.removeStorageSync('coin') uni.removeStorageSyn

2020-10-08 14:14:03 387

原创 uniapp后端合成分享海报

选择海报组件 share.vue<template> <view class=''> <u-popup class="popup flex flex-column" height="790" v-model="isshow" mode="bottom" @close="close"> <!-- 分享按钮 --> <view class="bg-white fixed-bottom"> <view class=".

2020-10-08 14:08:49 106 1

原创 uniapp插件使用canvas绘制分享海报

插件市场bug:浏览器上图片不显示,手机上就好了组件poster.vue<template> <view><canvas :canvas-id="id" :style="'width:' + boardWidth + '; height:' + boardHeight + ';' + customStyle"></canvas></view></template><script>/** 从 0x20 开始到

2020-10-08 11:48:38 644

原创 vue兄弟组件间传值

问题解决方法:兄弟组件传值,重新改变tab值新建bus.js文件import Vue from "vue";export default new Vue();foot组件,点击事件import Bus from '../../common/js/bus.js'goagreement(i) { if (this.$route.path.includes("agreement")) { Bus.$emit("type", i); //当前页面,为兄弟组件

2020-10-07 18:38:13 160

原创 H5微信支付

微信授权获取code,给后台获取支付参数 mounted() { if (location.href.includes("code")) { var url = location.href; console.log( 3333333, url .split("?")[1] .split("&")[0] .split("=")[1] ); this.wx

2020-09-29 14:25:07 233

原创 blob数据转ArrayBuffer转字符串

npm i pako import pako from "pako"; ws.onmessage = function(res) { console.log("blob类型数据: " + res.data); //blob let reader = new FileReader(); reader.readAsArrayBuffer(res.data, "utf-8"); reader.onload = ..

2020-09-28 10:06:21 103

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除