前端
文章平均质量分 56
WeirdoPrincess
不要太着急否定一些东西
你可能是今天心情不好
展开
-
使用WalletConnect Web3Modal v3 链接钱包基础教程
新建一个js文件,在main.js中引入,初始化配置sdk。以上调用方法可以自己结合使用, 具体可以参考官方文档。我使用的是vue+ethers。初始化引用之后再调用。原创 2023-12-01 11:55:19 · 2875 阅读 · 1 评论 -
vue3中使用Pinia+SecureLS做加密持久化储存
【代码】vue3中使用Pinia+SecureLS做加密持久化储存。原创 2023-08-04 09:45:05 · 739 阅读 · 0 评论 -
关于vue运行报错:webpack < 5 used to include polyfills for node.js core modules by default.
在使用vue3开发时安装使用web3等工具,运行报错webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it解决方案1.安装 node-polyfill-webpack-pluginnpm install node-po原创 2022-03-17 15:45:31 · 32403 阅读 · 26 评论 -
Naive UI 全局按需引入
安装npm add naive-ui全局按需引入组件新建文件 plugins/naive.jsimport { // create naive ui create, // component NConfigProvider, NMessageProvider, NButton, NIcon,} from 'naive-ui'const naive = create({ components: [ NConfigP原创 2022-03-16 16:10:19 · 2757 阅读 · 1 评论 -
Vue3.0 ref、reactive、toRef、toRefs、customRef的区别
一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数,返回一个具有响应式状态的副本。获取数据值的时候直接获取,不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const state = reactive({ count: 0})// 打印count的值console.log(state.count)二、refref 用于为数据添加响应式状态。由于reactive只能传入对象原创 2021-10-18 16:34:05 · 222 阅读 · 0 评论 -
vue3 路由hash与history的设置
一、history关键字:createWebHistoryimport { createRouter, createWebHistory } from 'vue-router'const routes = [ { path: '/userinfo', name: 'UserInfo', component: () => import('../views/UserInfo.vue')}]const router = createRouter({ history: createW原创 2021-10-18 15:28:19 · 761 阅读 · 0 评论 -
使用 NVM 安装切换 NodeJs 和 NPM
一、【问题背景】生活里偶尔穿梭在大街小巷中,工作中时常并行于多项目任务里…当多个项目并行时,由于创建的时间或人为选择等因素,各个项目里有着差异的node版本,这样我们在不同的项目里需要切换不同版本的Node.js,所以nvm应运而生。二、【NVM】NVM (Node Version Manager): Nodejs的版本管理工具早期的nvw只支持Linux 和Mac,而window用户较多使用的是nvmw。但最近由于重装系统偶然发现已有更新nvm支持window,而且快捷方便,不需要设置环境变量。原创 2021-10-12 19:23:01 · 744 阅读 · 0 评论 -
实战中的一些小魔法 - vue笔记
能让你首次加载更快的路由懒加载,怎么能忘?路由懒加载可以让我们的包不需要一次把所有的页面的加载进来,只加载当前页面的路由组件就行。举个????,如果这样写,加载的时候会全部都加载进来。const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About'原创 2021-08-28 14:13:37 · 107 阅读 · 0 评论 -
iframe页面跨域父子传参通信
基本概念:window.self: 当前窗口自身的引用window.parent: 上一级父窗口的引用window.top: 最顶层窗口的引用当页面中不存在 iframe 嵌套时,则三者均是当前窗口自身的引用。同域iframe相互调用:子页面调用父页面方法:window.parent.fatherFn();父页面调用子页面方法: window.sonFrameName.sonFn(); (sonFrameName是iframe的name值)非跨域 父调子//父页面<button c原创 2021-08-05 11:02:40 · 1657 阅读 · 0 评论 -
Vue 网站加载优化项
本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用,其他就是对接口优化等一、 vendor.js 优化由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!第一步:cdn引入各种包index.html中cdn的方式引入vue、vuex、axios、iview、等包,如下图:第二步:在使用vue等包的地方,注释掉import引入打开main.js文件 注释掉需原创 2021-07-28 13:34:16 · 179 阅读 · 0 评论 -
Error:Node Sass version 5.0.0 is incompatible with ^4.0.0 问题解决
此错误来自sass-loader。semver不匹配,因为node-sass @latest为v5.0.0,而sass-loader期望值为^ 4.0.0。他们的存储库中存在一个未解决的问题,需要对其进行修复。解决方案:卸载node-sassnpm uninstall node-sass然后安装最新版本(5.0之前)...原创 2021-03-03 10:57:15 · 315 阅读 · 0 评论 -
微信 8.0 「裂开」「炸弹」的特效代码
微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神,我就想看看能不能实现一个类似的特效。折腾许久之后,做出来的效果如下:项目的核心是使用到了 lottie 动画库。Lottie 是 Airbnb 出品的、全平台(Web、Android、IOS、React Native)的动画库,它的特点在于能够直接播放使用 A转载 2021-02-04 14:55:57 · 737 阅读 · 1 评论 -
vue中全局公共方法调用
首先,在assets文件夹下,新建js文件夹,创建common.jsexport default { istest(){ console.log("this is test") }}如果是全局(多页面)使用:1.在main.js中引入/* 引入公共js*/import common from '@/assets/js/common.js'Vue.prototype.common=common;2.在vue中使用this.common.istest(); //thi原创 2020-12-07 15:48:40 · 2310 阅读 · 0 评论 -
uni中vue组件父子值传递
一、父组件向子组件传递数据(props)//child<template> <view class="container" style="background: #0062CC;"> <view class="child"> hi {{showModal}}</view> </view></template><script> export default {原创 2020-12-02 10:56:28 · 125 阅读 · 0 评论 -
时间转时间戳在iOS中时间显示NaN
数据返回时间格式: 2000-01-01 01:01:00var time = new Date('2000-01-01 01:01:00').getTime();var time = new Date('2000-01-01 01:01:00').valueOf();以上在安卓设备输出没有问题,在iOS部分设备中会输出成NaN解决方法:1.使用新的时间格式 2000/01/01 0...原创 2019-04-18 13:59:35 · 1444 阅读 · 0 评论 -
兼容移动pc的上传头像截取插件
兼容移动pc的上传头像截取插件效果图懒得写文章了,有需要直接下载吧。。。。。。百度云链接:链接:https://pan.baidu.com/s/1xMMgmEp_6dpErlLeIK9W5g提取码:ybgr...转载 2019-01-06 16:53:30 · 603 阅读 · 6 评论 -
Flex 布局教程 语法详解
一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{...转载 2019-05-08 17:41:55 · 240 阅读 · 0 评论 -
css3 keyframes 实现无限旋转360度
<div class="rotate"></div>.rotate{ -webkit-animation: circle 20s infinite linear; -moz-animation: circle 20s infinite linear; -ms-animation: circle 20s infinite linear; -o-animation:...原创 2019-01-11 11:40:27 · 4343 阅读 · 1 评论 -
CSS - 利用伪元素修改checkbox样式
<div class="label_rem"> <input type="checkbox" name="moren" id="checkbox_aa" class="remember" /> <label for="checkbox_aa"></label><原创 2019-01-06 15:43:27 · 594 阅读 · 0 评论 -
原生JS - 简单的时分秒倒计
效果图代码片 直接copy就可以调用<div id="timer"></div>setInterval("leftTimer(2020,1,1,00,00,00)", 1000); //倒计时function leftTimer(year, month, day, hour, minute, second) { var leftTime ...原创 2019-01-06 16:04:50 · 181 阅读 · 0 评论 -
h5移动端手机长按事件
h5移动端手机长按事件<div style="width:100%;"> <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div></div>var timeOutEvent=0原创 2019-01-06 15:33:05 · 6430 阅读 · 1 评论 -
微信H5网页跳转小程序,这一篇就够了!
鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去?所以鄙人记录下这篇文章,以便帮助到一些人。废话不多说,上才艺!<html><head> <meta charset="utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scala转载 2020-11-26 10:16:03 · 644 阅读 · 0 评论 -
UNI-APP使用微信SDK(微信H5)
npm方式使用下方指令进行安装npm install jweixin-module --save 在项目中引用为了方便使用,我单独出一个微信相关的 js 文件,进行相关的初始化等操作。wechat.js 「该文件我放置在项目根目录,可以根据自己情况选择」//自己封装的 uni.requestimport http from '@/common/api'var jweixin = require('jweixin-module');export default { /* 判断是否在微原创 2020-09-21 16:07:09 · 3004 阅读 · 1 评论 -
uni-app i18n 国际化/多语言配置
基于uni-app的项目去配置多语言首先在项目中安装vue-i18nnpm install vue-i18n配置main.jsimport Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n);const i18n = new VueI18n({ locale: 'zh-CN', messages: { 'zh-CN': require('@/language/zh_CN.json'), 'en-U原创 2020-08-06 16:43:12 · 1195 阅读 · 0 评论 -
uniapp uni.setClipboardData成功默认提示
uni.setClipboardData({ data: 'hello uniapp', success: function() { //重点~做笔记 //在success中加入uni.hideToast()可以解决 uni.hideToast(); //以下就可自定义操作了~ }, fail: function(err) { uni.showToast({ title: '复制失败', duration: 2000, icon: 'none' }); }原创 2020-07-08 16:33:08 · 8808 阅读 · 2 评论 -
解决uni-app开发中刘海屏下背景不能全屏铺满的问题
使用原生占位(仅App端支持)mainfest.json 文件 app-plus 节点下配置 safearea"safearea": { "background": "#CCCCCC", "bottom": { "offset": "auto" } } 不使用原生占位(非App端可以不配置mainfest)mainfest.json 文件 app-plus 节点下配置 safearea"safearea": { "bott原创 2020-07-06 17:53:40 · 5977 阅读 · 0 评论 -
安装webpack出现警告:npm WARN notsup Unsupported engine for [email protected]
警告如下:npm WARN notsup Unsupported engine for [email protected]: wanted: {“node”:"<8.10.0"} (current: {“node”:“10.16.0”,“npm”:“6.13.1”})npm WARN notsup Not compatible with your version of node/npm: [email protected] WARN optional SKI原创 2020-07-02 10:58:46 · 15930 阅读 · 1 评论 -
uni-app 页面&组件生命周期
不论是app还是小程序,生命周期是非常重要的知识点。uni-app 支持如下生命周期函数:页面的生命周期onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),参考示例onShow 监听页面显示onReady 监听页面初次渲染完成onHide 监听页面隐藏onUnload 监听页面卸载onPullDownRefresh 监听用户下拉动作onReachBottom 页面上拉触底事件的处理函数onShareAppMessage 用户点击右上角分享 微信原创 2020-07-01 11:10:12 · 20289 阅读 · 1 评论 -
canvas 图片模糊
html5 canvas drawImage图片模糊解决办法:只能在标签里写width =某数字, 不能加 ‘px’ ,也不能写成 ‘100%’ ,也不能写在style里, 想动态修改只能 用document.getElementById(‘cvs’).width=123;<canvas width="100" height="100" ></canvas>...原创 2020-04-13 17:39:40 · 523 阅读 · 0 评论 -
uni-app中添加RSA加密教程
使用yarn安装至uniapp(同vue)项目yarn add jsencrypt --dep或者使用npmnpm install jsencrypt --dep引入jsencrypt项目中会出现node_modules文件夹,进入文件,再进jsencrypt***,再进bin文件用下面的附件解压出来替换jsencrypt.js文件引入jsencryptimport { JSEn...原创 2020-04-13 17:37:16 · 6712 阅读 · 4 评论 -
12个前端必会 H5 问题及解决方法
前言作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下,并在后面给出坑产生的原理,和现阶段常规的填坑方案。由此来做一个阶段性的总结。问题下面列举了我遇到的一些常规问题,如有遇到其他问题请在评论区补充,之后我也会实践后加以补充,感谢!(经常更新该文)移动端 H5 相关问题汇总:1px 问题响应式布局iOS 滑动不...转载 2020-04-06 16:55:51 · 407 阅读 · 0 评论 -
实现网页图文变灰效果
html.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXIm...原创 2020-04-04 22:14:50 · 193 阅读 · 0 评论 -
vuejs生命周期函数
beforeCreate第一个生命周期函数,表示实例完全被创建出来之前,会执行它注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的属性与方法定义都还没有没初始化created第二个生命周期函数,在 created 中,data 和 methods 都已经被初始化好了! 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只...原创 2020-04-01 21:22:12 · 224 阅读 · 0 评论 -
vue 绑定的点击事件 处理冒泡
通用解决办法事件冒泡了,那就阻止事件冒泡呗。 鉴于不同浏览器阻止事件冒泡方法不一样,建议手写一个事件阻止冒泡方法。function stopPropagation(event){ var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容 if(window.event){...原创 2019-11-25 14:59:47 · 1234 阅读 · 0 评论 -
在JS里创建JSON数据然后遍历使用
直接在JS里创建JSON数据,然后遍历使用~创建代码如下:(创建的是JSON对象)var YearSelect = {}; var Year = 2014; var DateOption; for (var i = Year; i &lt; Year + 12; i++) { DateOption = {'Year':i, 'Month':i-Year+1}; / alert(D...转载 2019-01-11 18:29:49 · 1226 阅读 · 0 评论 -
轮播插件 swiper 的配置
swiper 的基本配置以[email protected]为例,swiper 的基本配置如下:let instance = new Swiper('.swiper-container', { direction: 'vertical', // 设置slide的方向为竖直排列 slideActiveClass: 'active', // 活动块的className slideNe...原创 2019-01-22 17:17:28 · 610 阅读 · 0 评论 -
vue 的点击事件怎么获取当前点击的元素
//缩写: @click=&quot;reverseMessage&quot; &amp;lt;div v-on:click=&quot;reverseMessage&quot;&amp;gt; &amp;lt;button&amp;gt;&amp;lt;/button&amp;gt;&amp;lt;/div&a原创 2019-03-13 11:27:55 · 4096 阅读 · 0 评论 -
vue vue-i18n实现多语言
兼容性:支持 Vue.js 2.x 以上版本(vue-i18n 仓库地址)安装方法:npm install vue-i18n使用方法:1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)import VueI18n from 'vue-i18n'Vue.use(VueI18n)2、准备本地的翻译信息const messages = { zh: ...原创 2019-06-03 14:11:28 · 600 阅读 · 0 评论 -
解决第三方网页在微信浏览器中点击图片会自动放大
原因:微信Android客户端在底层支持了img标签自动放大的功能传统方式:$(document).on('click', 'img', e => { e.preventDefault();})这个方式可能会把所有的默认的属性都屏蔽了,典型的就是a标签不能跳转css方式:img{ pointer-events: none;}这个会让img标签的点击事件失效,如果想要点...原创 2019-06-03 15:04:51 · 1685 阅读 · 1 评论 -
html2canvas截屏 生成base64图片文件
html2canvas(document.querySelector("#capture")).then(canvas => { const context = canvas.getContext('2d'); // 关闭抗锯齿形 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnab...原创 2019-07-12 17:58:04 · 4357 阅读 · 0 评论