关注
分享
每周练习一个例子，总结一些知识点
无物勿吾
项目经理、全栈工程师，丰富的前端开发经验。
展开
-
配置alias（设置别名@）
【代码】配置alias（设置别名@）原创 2024-01-31 11:02:28 · 1079 阅读 · 0 评论 -
css实现虚线和点的平移动画
【代码】css实现虚线和点的平移动画。原创 2023-12-15 14:51:30 · 521 阅读 · 0 评论 -
封装axios实现基础网路请求
【代码】封装axios实现基础网路请求。原创 2023-12-13 10:22:18 · 352 阅读 · 0 评论 -
二维码生成
1，uni-app的二维码生成器https://www.npmjs.com/package/tki-qrcode原创 2021-06-05 09:11:48 · 210 阅读 · 0 评论 -
处理uni-app打包webview的app返回键处理
<template> <view class="content"> <uni-nav-bar class="nav-bar" fixed :status-bar="true" :left-icon="back" :left-text="leftText" @clickLeft="onLeft" color="#ffffff" background-color="#2F78E4"> <view class="title">{{ title ? ti.原创 2021-05-21 15:10:55 · 1724 阅读 · 0 评论 -
css省略号...的实现
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow: hidden;text-overflow:ellipsis;white-space: nowrap;接下来重点说一说多行文本溢出显示省略号，如下。display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hid原创 2021-01-05 14:47:09 · 253 阅读 · 0 评论 -
图文混排模板HTML
后台使用的图文混排插件如：editor、Markman等，得到的页面，前端使用v-html显示的不美观，所以有时候需要前端自己出一个，后端替换文字和图片部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />原创 2020-10-14 21:16:54 · 3685 阅读 · 0 评论 -
微信公众号、微信小程序调用第三方api（百度人脸实名认证），设置回调页面，页面交互处理
使用场景在做人脸识别认证时，使用的是H5版，需要传给插件两个回调页面，一个成功认证后回调，一个失败后回调。这两个页面是要放在服务器的，此时页面与手机端的页面不好做数据和功能交互，于是就需要下面的处理方式。首先是服务器需要的回调页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatibl原创 2020-10-14 20:54:34 · 3908 阅读 · 2 评论 -
Web面试题整理
问：Doctype作用是什么? 严格模式与混杂模式如何区分？它们有何意义?答：Doctype位于整个文档的最前面，用于告知浏览器解析器用什么文档类型来解析该文档；严格模式：使得排版和JS运作以浏览器支持的最高标准运行混杂模式：使得排版和JS运作以向后兼容的方式运行，防止比较老的站点无法工作的问题；问：tcp三次握手，一句话概括答：客户端发起请求连接服务端确认，服务端也发起连接客户端确认，每次握手的作用：第一次握手：服务端只可以确认 自己可以接受客户端发送的报文段；第二次握手：客户端可以确原创 2020-09-21 16:49:07 · 166 阅读 · 0 评论 -
web开发工具包
http://youmightnotneedjquery.com/1，动画库Velocity.js move.js animate.css2，正则表达式https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24https://c.runoob.com/front-end/854原创 2020-09-21 16:19:31 · 115 阅读 · 0 评论 -
pc浏览器的适配
1，窗口尺寸var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var hight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;2，原创 2020-09-21 15:37:03 · 491 阅读 · 0 评论 -
vue3.0本地调试，设置代理（解决跨域）
1，在项目根目录创建vue.config.jsmodule.exports = { devServer: { open: true, proxy: { '/api': { target: 'http://localhost:3000',//要代理的本地api地址，也可以换成线上测试地址 changeOrigin: true,//允许跨域原创 2020-09-15 20:25:26 · 4566 阅读 · 1 评论 -
Ecma Script 6入门
1，关于let和var的区别，请先看下面的实例var a = [];for(var i = 0 ; i < 10 ; i++){ a[i] = function (){ console.log(i); };}a[6]();//10上面的代码，变量i是var生命的，在全局内都有效，所以每循环一次，新的i值都会覆盖旧值，导致最后执行方法时，输出的都是最后一轮的i值。var a = [];for (let i = 0 ; i < 10 ; i++原创 2020-08-05 09:20:03 · 184 阅读 · 0 评论 -
BFC
BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。Box：css布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属转载 2020-08-03 15:10:22 · 89 阅读 · 0 评论 -
vue-router路由的元信息meta
使用场景：有些页面需要登录判断，在路由配置的时候，在meta对象属性中加上需要登录的标识{ path: '/index', name: 'index', component: Index, meta: { login_require: false },},{ path: '/orders', name: 'orders', component: Orders, meta: { login_require: true }, children原创 2020-07-30 09:33:19 · 282 阅读 · 0 评论 -
box-shadow属性详解
#### 1.box-shadow属性语法>box-shadow 属性接受值最多由五个不同的部分组成。 >box-shadow: offset-x offset-y blur spread color position;>换句说： 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }>不像其它的属性，比如 border，它们的接受值可以被拆分为一系列子属性，box-shadow 属性没...原创 2020-07-30 08:34:27 · 988 阅读 · 0 评论 -
css实现menu菜单
效果如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>menu菜单</title> <style type="text/css" media="all"> #menu{ display: block; box-siz...原创 2020-07-29 14:51:04 · 1163 阅读 · 0 评论 -
小程序引入中文字体
做小程序的时候，有时候会遇到，设计的UI中出现了特殊的字体，而单独的导入一个中文字体库是很大的，而且容易经常加载失败。这个时候我们可以想办法将字库中用到的字单独提取出来，这样就会减少体积，保证使用了。具体步骤如下：1）在线提取字体https://www.fontke.com/tool/subfont/比如上图，我的小程序只需要7个字，单独提取出来只有几K2）再到这个网站https://transfonter.org/转成base64只有十几k3）在小程序中引入使用即可原创 2020-07-21 20:35:41 · 3691 阅读 · 0 评论 -
CSS 百分比 margin & padding
转载：https://swordair.com/css-persentage-margin-and-padding/?utm_source=tuicool&utm_medium=referralmargin和padding都可以使用百分比值的，但有一点可能和通常的想法不同，就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度。引用标准(2.1)原来的表达：The percent.转载 2020-07-11 07:57:58 · 192 阅读 · 0 评论 -
网页布局高度不满时，实现布局置底
问题：如果网页内容不够长，让网页的footer部分始终在浏览器窗口的底部。方法一：将内容部分的margin-bottom设为负数（兼容所有浏览器）<div class="wrapper"> </div><div class="footer">footer</div>html, body { margin: 0; padding: 0; height: 100%;}.wrapper { min-height: 10..原创 2020-07-11 07:47:00 · 627 阅读 · 0 评论 -
JavaScript基础知识2
7，在 JavaScript 编程中，函数表达式是一种非常有用的技术。使用函数表达式可以无须对函数命名， 从而实现动态编程。匿名函数，也称为拉姆达函数，是一种使用 JavaScript 函数的强大方式。以下总结 了函数表达式的特点。 函数表达式不同于函数声明。函数声明要求有名字，但函数表达式不需要。没有名字的函数表 达式也叫做匿名函数。 在无法确定如何引用函数的情况下，递归函数就会变得比较复杂； 递归函数应该始终使用 arguments.callee 来递归地调用自身，不要使用函原创 2020-07-05 09:54:20 · 127 阅读 · 0 评论 -
html使用JavaScript动态添加资源
参考下面的示例代码：EventUtil.addHandler(window, "load", function(){ var script = document.createElement("script"); EventUtil.addHandler(script, "readystatechange", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event);原创 2020-07-04 20:54:04 · 356 阅读 · 0 评论 -
浏览器兼容事件处理
要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。 第一个要创建的方法是 addHandler()，它的职责是视情况分别使用 DOM0 级方法、DOM2 级方 法或 IE 方法来添加事件。这个方法属于一个名叫 EventUtil 的对象，本书将使用这个对象来处理浏览 器间的差异。addHandler()方法接受 3 个参数：要操作的元素、事件名称和事件处理程序函数。 与 addHandler()对应的方法是 removeHandler()，它也接受相同的参数。这个方法的职责原创 2020-07-04 20:35:03 · 148 阅读 · 0 评论 -
JavaScript知识系列1
1，把 JavaScript 插入到 HTML 页面中要使用<script>元素。使用这个元素可以把 JavaScript 嵌入到 HTML 页面中，让脚本与标记混合在一起；也可以包含外部的 JavaScript 文件。而我们需要注意的地方有： 在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL。而这个文件既可 以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。 所有<script>元素都会按照它们在页原创 2020-07-04 10:21:28 · 83 阅读 · 0 评论 -
Mac下node和npm安装及环境配置
一，官网下载地址：http://nodejs.cn/download/二，安装双击安装包，一直下一步，直到最后一步，记住你的安装路劲，一会环境配置需要。三，环境配置打开命令行工具：输入：node -v输入：npm -v现在的新版本安装后基本上不用配置了...原创 2020-06-07 12:55:38 · 6362 阅读 · 0 评论 -
vue引入微信jssdk，完美实现
1.安装SDKnpm install weixin-js-sdk --save2.微信分享的封装工具类（wxShare.js)/* eslint-disable */import Vue from 'vue';import wx from 'weixin-js-sdk';//存储服务器授权链接 const jsSDKAuth = 'XXX/wx_jssign_package.json'; //存储各个链接的签名信息const signMap = new Map(); // 设置默原创 2020-05-18 15:48:56 · 14728 阅读 · 1 评论