![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
ftToday
Most people are willing to do anything to avoid real thinking
展开
-
通过配置浏览器方式解决跨域问题
复制桌面上的谷歌浏览器快捷方式,名称改为:Google-Debug浏览器快捷图标:鼠标右键----属性----目标项的最后面:空格,然后加入下面配置--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security应用----确定—使用此快捷图标打开浏览器,即可解决跨域...原创 2021-09-29 14:07:31 · 1686 阅读 · 1 评论 -
前端实现语音播放
1、原生js实现【MDN简单例子】https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis// 复制出来放到浏览器console回车就可以用看到效果let utterance = new SpeechSynthesisUtterance("Hello world!");speechSynthesis.speak(utterance);【自己总结】var msg = new SpeechSynthesisUtterance(原创 2021-09-10 14:39:03 · 6087 阅读 · 0 评论 -
el-table使用自定义列固定表头,同时存在固定列,table有滚动条最后一条数据的处理
关于el-table使用自定义列固定表头之后,最后一行无法显示的问题定义变量 noSroll:true; //是否存在滚动条定义方法 //用于判断是否存在滚动条 getSrollstate() { let dom = document.querySelector(".el-table__body-wrapper"); this.$nextTick(() => { this.noScroll = dom.getAttribute("原创 2021-09-08 13:21:53 · 1089 阅读 · 0 评论 -
Vue3快速上手
Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy代转载 2021-08-31 17:13:23 · 124 阅读 · 0 评论 -
用户人脸核身登录——人脸核身
一、腾讯云1、微信H5注:微信H5分为原生浮层模式和普通微信H5模式。创金只能使用普通微信H5模式,行业限制。接入时序图如下:详细开发配置文档见:https://cloud.tencent.com/document/product/1007/495382、独立H5前端:1、从后台获取指定参数,通过链接跳转的方式跳到腾讯云核身流程;2、核身完成后会通过参数中的url回跳到合作方H5页面并带上结果参数;3、前端解析链接拿到参数后传递合作方后台进行结果比对,前端拿到合作方后台结果后再进行用户交原创 2021-08-31 17:07:06 · 658 阅读 · 0 评论 -
微信小程序&公众号&支付宝小程序的登录授权、支付、分享、人脸识别&人脸核身
文章目录一、微信小程序1. 获取信息用户信息2.支付3.分享4. 腾讯云小程序人脸核身二、微信公众号1.获取信息用户信息2.支付3. 分享4. 人脸识别三、支付宝小程序1. 获取信息用户信息2.支付(此能力暂不支持个人账户)3. 分享4. 人脸识别四、H5(支付宝相关的大部分功能个人用户 很多需要企业用户)1. 获取信息用户信息2.支付3. 分享4. 人脸识别总结一、微信小程序1. 获取信息用户信息小程序登陆流程需要微信前端调用wx.login接口获取code。 然后再调用wx.getUser原创 2021-08-31 09:59:12 · 2995 阅读 · 0 评论 -
支付宝小程序&财富号&基金相关页面之间相关跳转
小程序跳转财富号this.$global.urlHandler(`alipays://platformapi/startapp?appId=xxxx00002019101768404279&query=publicId%3Dxxxx00002018061160393077&nbupdate=syncforcee`)小程序跳转基金组合页面this.$global.urlHandler(`https://open.antfortune.com/p/q/normal-testkczk6ol原创 2021-08-27 14:13:09 · 3036 阅读 · 2 评论 -
vue2.0 elementui2.0+ el-select选择器实现上拉加载数据,支持搜索功能
<el-form ref="form" :inline="true" :model="form" size="mini"> <el-form-item label="客户标签" > <el-select v-model="form.OUserId" v-el-select-loadmore="loadmore" placeholder="请选择客户标签" .原创 2021-08-20 10:40:36 · 526 阅读 · 2 评论 -
element-select选择器实现上拉加载更多
可以将此细分为,1.下拉到底部; 2.触发请求; 3.加载,难点便只是在下拉到底部。我们要想知道是否已经触底,首先找到拥有滚动条的元素在select 添加 ref<template> <el-select v-model="value" ref="select" placeholder="请选择" :loading="loading"> <el-option v-for="item in options" :key="item.value"原创 2021-08-10 10:42:13 · 1317 阅读 · 0 评论 -
el-table合并列&同时在分页时不被割裂开
核心思想合并大表格,留出空间给到slot 插槽,在插槽内使用小表格;效果图具体实现<template> <div> <el-table show-header :cell-style="set_cell_style" :data="tableData" border :cell-class-name="cellClassName" :span-method="arraySpanMeth原创 2021-08-04 19:05:47 · 777 阅读 · 0 评论 -
PPT的逻辑思考方式
1、思维一定要有层次感1、进度/结果/…(被人的评价等等)2、总1 总2 总33、总1分1总2分2总3分3工作具体:(1)、①前端项目计划、排期、人员安排、前端端风险管理、前端上线、人员招聘以及人员培训、代码质检;(分:具体做了什么,计划什么)②推动前端项目组新技术学习和学习分享;③邀请优秀合作厂商进行前端技术难点,分享他们的成功经验和处理规避方式;(2)、①前端项目代码管理、代码规范化以及持续迭代规范;②框架优化迭代;③标准组件规划、管理、研发;(3)、重要业务研发工作;原创 2021-08-04 13:30:04 · 466 阅读 · 0 评论 -
vue项目开发简单命名规范和vue页面顺序
命名规范1、图片命名:xxxx_xx2、scss样式命名:.xx-xx {}.xx {}3、js变量命名:小驼峰命名方式(xxXxx)4、js常量命名:采用全大写(XXX)5、vue组件命名:product-select组件中的: name: xxx-xxx (采用大驼峰命名)vue开发使用的基本模板结构顺序<template> <div class="class-1"> <h2>{{msg}}</h2>原创 2021-08-02 15:52:14 · 968 阅读 · 0 评论 -
elemenui自己本地跑起存在的问题&做自定义组件迭代规范
npm install安装依赖出现PhantomJS not found on PATH问题:PhantomJS not found on PATHPhantomJS not found on PATHDownloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zipSaving to C:\Users\ADMINI~1\AppData\Local\Temp\ph原创 2021-07-30 14:49:52 · 129 阅读 · 0 评论 -
elementui的datetime-picker选在开始时间和结束时间项目制约
原创 2021-07-07 16:42:24 · 193 阅读 · 0 评论 -
element-ui表格table中复选框只能选中一个
element-ui表格table中复选框只能选中一个方法一:<el-table stripe v-loading="loading" :data="tableData.list" class="table-box-tab table_type_five" style="padding-left:15px;padding-right:15px;" :style="{'padding-right': this.paddingRight == false? '14px':'15px'}" @selec原创 2021-06-29 13:15:55 · 839 阅读 · 0 评论 -
前端页面填加水印方案及实现
直接可以拷过去用,或者自己封装成watermark.js;var watermark = {}function setWatermark(args) { console.log(...arguments) //声明一个变量,确保id的唯一性 var id = '2019-0419-FTLC-ABCE'; var xIndex = 15;//绘制文本的 x 坐标位置 var yIndex = 65;//绘制文本的 y 坐标位置 var xInterval = 2原创 2021-05-13 14:34:11 · 700 阅读 · 2 评论 -
js中几种常用的for循环进行比较以及得出结论
for 循环有很多变形,例如 while、for、for(倒序)、for…of、forEach、for…in、for…awaitconst million = 1000000; const arr = Array(million);// 注:这是稀疏数组,应该为其指定内容,否则不同方式的循环对其的处理方式会不同:// const arr = [...Array(million)]console.time('?');var i = arr.length;while(i>0) {i--;原创 2021-05-11 14:03:27 · 578 阅读 · 0 评论 -
svg使用img标签以及其他标签中
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test-SVG</title> <style type="text/css"> .ssy { width: 300px; height: 300px; } </style><原创 2021-04-28 16:02:23 · 5252 阅读 · 1 评论 -
vue——生命周期图解
2、 vue 生命周期图生命周期图示:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示生命周期钩子:https://cn.vuejs.org/v2/api/#选项-生命周期钩子生命周期个函数<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-...原创 2021-04-16 15:22:30 · 140 阅读 · 0 评论 -
微信—前端获取openId方法和步骤
执行流程前端 --> 后端服务 --> 微信服务(openId/UnionID)<template> <div></div></template> <script>export default { name: 'Index', data () { return { } }, created () { this.getCode()原创 2021-03-31 15:10:43 · 5838 阅读 · 2 评论 -
百度统计、谷歌统计原理以及自定义统计源码
前端埋点原理图如上所示,从broswer到page,再到javascript以及后端backend,浏览器返回正常程序运行结果,本地文件中返回最终的log步骤:(一)埋点阶段(二)数据收集阶段(三)后端处理阶段如上,针对“前端埋点”,主要分为这么三部,对应到上面的原理图,步骤一即(create script element,前端做),步骤二即(collect client data,前端做),步骤三即(backend和log,后端去解析数据).埋点html的script中添加节点原创 2021-03-24 10:14:09 · 1246 阅读 · 0 评论 -
chrome浏览器降低浏览器安全实现跨域
资源: start.bat资源地址:https://download.csdn.net/download/longlc123/15563214chrome支持跨域跨域;1、找到chrome快捷键右击;2、点击—‘打开文件所在位置’3、把文件烤进去;4、点击-- start.bat 会打开chrome5、在这个浏览器的所有请求都可以跨域不收限制,关闭浏览器;正常打开桌面快捷键的浏览器恢复正常;...原创 2021-03-04 16:59:02 · 806 阅读 · 2 评论 -
js、vue、微信小程序、支付宝小程序遇到的问题---持续更新ing
js —持续更新ingvue —持续更新ing微信小程序 —持续更新ing1、自己创建一个小程序步骤:支付宝小程序 —持续更新ing原创 2021-03-04 09:15:20 · 333 阅读 · 1 评论 -
vscode实用插件以及实用配置 持续更新ing
1、vscode 代码格式化以及固定默认空格数{ "editor.wordWrap": "on", "editor.detectIndentation": false, "editor.tabSize": 4, "editor.formatOnSave": true, "workbench.settings.openDefaultSettings": true}file -> preferences -> seting 进行配置...原创 2021-03-04 09:09:10 · 160 阅读 · 1 评论 -
微信&支付宝小程序开发必去网站以及快应用
1、微信官方文档https://developers.weixin.qq.com/doc/1.1、微信开发社区https://developers.weixin.qq.com/community/search?query=ios%2520%25E6%25A1%258C%25E9%259D%25A2%25E6%25B7%25BB%25E5%258A%25A0%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F&page=1&block=1&am原创 2021-02-27 14:11:03 · 473 阅读 · 0 评论 -
移动端适配rem
//引用import { px2rem } from '@utils/px2rem';px2rem(document, window)或require("@utils/px2rem");// px2rem.js//适配不同尺寸(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : '原创 2021-02-25 18:05:03 · 85 阅读 · 0 评论 -
vue嵌入app中——首次加载慢的动画
背景:项目首次加载过慢,需要下载的资源比较大;白屏时间过长,导致用户体验不好;解决办法:index.html 下载完,(首页下载完)就像执行动画伸手党代码:加粗样式<script> //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = ` <div id="loadingDiv" style="position:absolute;left:50%;top:50%;margin-left:-35px;margi原创 2021-02-25 11:10:21 · 459292 阅读 · 0 评论 -
微信转发或分享朋友圈带缩略图、标题和描述的实现方法
1、appID和scrite 从管理后台直接拿到 (appID固定不变和scrite微信运营管理系统看不到,1、从项目中拿;2、重置看到再拿)2、后台用(appID和scrite)请求,微信拿另外几个参数3、引用cdn或者npm install weixin-js-sdk;import wx from ‘weixin-js-sdk’;4、前端配置参数和配置title,src,link,desc参数**在vue中设置**安装微信sdk// 安装微信sdknpm install wei原创 2021-02-22 15:36:54 · 1029 阅读 · 0 评论 -
npm install 安装时报错 chromedriver@2.46.0 install: `node install.js`
npm install 报错原因是chromedriver的部分文件被国内网络给墙掉了,无法下载完整的chromedirver包,解决办法:npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver这个是从淘宝镜像去下载 chromedriver这个 ;...原创 2020-11-26 13:33:17 · 877 阅读 · 0 评论 -
vux中x-input在安卓手机输入框的删除按钮失效处理
vux中x-input在安卓手机输入框的删除按钮(@on-click-clear-icon)点击没反应首先看你自己的的版本好,如果在2.6.9以上,我是在git上找到的解决办法,记录一下,希望可以帮到有需要的小伙伴。在项目中找 node_modules > vux > x-input > index.vue >找到下面Code 代码进行修改即可在x-input.vueonBlur ($event) { this.setTouched() this.va原创 2020-11-19 11:04:04 · 634 阅读 · 2 评论 -
前端vue规范&JavaScript规范
前端vue规范&JavaScript规范vue 文件基本结构<template> <div></div></template><script> export default { components: {}, data() { return {}; }, methods: {}, mounted() {} };</script><!-- 声明原创 2020-11-12 13:58:50 · 517 阅读 · 1 评论 -
HTML 规范 & 媒体文件规范
HTML 规范 & 媒体文件规范(后补)缩进统一两个空格缩进命名规范class 应以功能或内容命名,不以表现形式命名;class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔;使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class;DOCTYPE 声明HTML 文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:<!DOCTYPE html>meta 标签统一使用 “UTF-8” 编原创 2020-11-12 13:57:24 · 134 阅读 · 0 评论 -
前端CSS规范
前端CSS规范CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。1. 通用规范文件编码为了避免内容乱码,统一使用 UTF-8 编码保存。样式文件第一行设置字符集为 UTF-8@charset 'UTF-8'; /* 注意字符集说明应在第一行 */缩进规范统一使用两个空格缩进2. 初始化规范各浏览器厂商的初始样式都不一样,为了消除不同浏览器对 HTM原创 2020-11-12 13:55:52 · 248 阅读 · 1 评论 -
element-ui表格table中复选框只能选中一个
方式一<el-table stripe v-loading="loading" :data="tableData.list" class="table-box-tab table_type_five" style="padding-left:15px;padding-right:15px;" :style="{'padding-right': this.paddingRight == false? '14px':'15px'}" @selection-change="handleSelectionC原创 2020-11-11 16:37:57 · 2780 阅读 · 2 评论 -
axios自己使用的
import { getSStore, removeSStore, format} from "@/common/utils/utils";import * as env from "@/common/utils/env";let v = new Vue();// 获取url中指定的参数const getUrlParam = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|原创 2020-11-11 11:07:25 · 105 阅读 · 0 评论 -
H5页面适配 iPhoneX全面屏手机
要兼容IphoneX,尤其是使用 position: fixed;bottom: 0; 样式时,要确保底部栏处于安全区域H5开发适配:参考苹果开发者参考文档ios 开发适配:参考: https://www.jianshu.com/p/20681c58d2be原创 2020-11-08 15:16:41 · 987 阅读 · 1 评论 -
在h5页面中调起支付宝小程序中的某一个页面以及URLScheme 之 支付宝
在h5页面中调起支付宝小程序中的某一个页面直接上代码: window.location.href = 'alipays://platformapi/startapp?appId=2021001181651837&page=pages/index/index'直接上代码: window.location.href = 'alipays://platformapi/startapp?appId=20000793&pullRefresh=NO&appClearTop=false&原创 2020-11-08 15:00:30 · 17994 阅读 · 7 评论 -
npm同时执行多个打包命令
具体操作1、需要安装 concurrently 模块2、npm install concurrently案例一package.json修改如下"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "clientServer": "live-server --open=./client/index.html", "server": "node ./server/express.s原创 2020-11-02 13:44:40 · 1774 阅读 · 1 评论 -
安装nvm进行node版本切换
参考博客: nvm安装nvm version // 查看 nvm 版本nvm install 4.6.2 // 安装 node4.6.2 版本(附带安装 npm)nvm uninstall 4.6.2 // 卸载 node4.6.2 版本nvm list // 查看 node 版本nvm use 4.6.2 // 将 node 版本切换到 4.6.2 版本详细操作1.定义:nvm,全称 Node Version Manager ,也就是node版本控制;使用场景:当你同时进行两个或多个n原创 2020-10-29 15:15:47 · 230 阅读 · 0 评论 -
安装cnpm切换到淘宝源
1、安装cnpm,输入以下命令:npm install -g cnpm --registry=https://registry.npm.taobao.org原创 2020-10-27 09:12:18 · 1074 阅读 · 0 评论