WeirdoPrincess-CSDN博客

依靠 Pinia 实例，在所有调用中共享同一个store实例。大多数情况下，只需调用useStore()函数，即可开箱即用。例如，在setup()中，您无需执行任何其他操作，实际上，useStore()给你的 app 自动注入了 pinia 实例。但在组件之外，情况有些不同，意味着如果 pinia 无法自动注入实例，则必须手动将其提供给useStore()函数。你可以根据不同的应用，以不同的方式解决这个问题。

2023-07-11 09:15:46 3571 2

原创解决uni-app无法使用icon-font彩色图标(Symbol方式)

解决uni-app无法使用icon-font彩色图标(Symbol方式)

2022-07-08 14:41:28 1911 2

原创关于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 33145 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 2896 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 257

原创 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 782

原创使用 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 790

原创实战中的一些小魔法 - vue笔记

能让你首次加载更快的路由懒加载，怎么能忘？路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个????，如果这样写，加载的时候会全部都加载进来。const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About'

2021-08-28 14:13:37 127

原创 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 1872

原创 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 215

原创原生JS Web3Modal Demo (笔记)

<html> <head> <title>Simple vanilla JS example of Web3modal usage</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel

2021-05-11 18:13:25 3794 3

原创 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 330

转载微信 8.0 「裂开」「炸弹」的特效代码

微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神，我就想看看能不能实现一个类似的特效。折腾许久之后，做出来的效果如下：项目的核心是使用到了 lottie 动画库。Lottie 是 Airbnb 出品的、全平台（Web、Android、IOS、React Native）的动画库，它的特点在于能够直接播放使用 A

2021-02-04 14:55:57 768 1

原创 uni中requestAnimationFrame的使用

<template></template><script module="animate" lang="renderjs"> export default { methods: { animate(){ // 动画... requestAnimationFrame(() => { this.animate() }) } } }</script>在官方示例（hello uniapp

2021-01-21 10:19:52 3684

原创 uni-app+uview 购物车模块组件(笔记)

<template>  <view class="wee-cart"> <view class="bg"></view> <view class="tips" v-if="goodsList.length==0"> <u-image class="tips-img" width="305" height="200" src="/static/base/shopping-cart.png"

2020-12-18 10:46:10 3537 6

原创 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 2374

原创 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 150

转载微信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 668

原创 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 3188 1

原创解决jsencrypt在小程序中报错appName的问题

/** * 以下是解决jsencrypt在小程序中报错的bug * 注解：源码中有用到navigator.appName和navigator.userAgent两个字段, * 对于appName主要用与判断浏览器选择不同的大数处理方式, * 这里我们可以考虑直接删除其他代码选择am3, * 或者构造一个navigator.appName = 'Netscape'; * 对于userAgent主要用于IE11之前的浏览器做兼容处理，对此我们也可以直接给userAgent赋值来绕过。 *//

2020-08-20 19:35:22 908

原创 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 1233

原创 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 8978 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 6193

原创安装webpack出现警告：npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0

警告如下：npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: 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: watchpack-chokidar2@2.0.0npm WARN optional SKI

2020-07-02 10:58:46 16075 1

原创 uni-app 页面&组件生命周期

不论是app还是小程序，生命周期是非常重要的知识点。uni-app 支持如下生命周期函数：页面的生命周期onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参），参考示例onShow 监听页面显示onReady 监听页面初次渲染完成onHide 监听页面隐藏onUnload 监听页面卸载onPullDownRefresh 监听用户下拉动作onReachBottom 页面上拉触底事件的处理函数onShareAppMessage 用户点击右上角分享微信

2020-07-01 11:10:12 21887 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 556

原创 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 7015 4

转载 12个前端必会 H5 问题及解决方法

前言作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。问题下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文）移动端 H5 相关问题汇总：1px 问题响应式布局iOS 滑动不...

2020-04-06 16:55:51 435

原创实现网页图文变灰效果

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 210

转载小程序 — 小程序生命周期及页面生命周期

1、小程序生命周期（1）首先小程序的生命周期函数是在 app.js 里面调用的，App(Object) 函数用来注册一个小程序。接受一个 Object 参数，指定其小程序的生命周期回调；一般有onLaunch 监听小程序初始化、onShow 监听小程序显示、onHide 监听小程序隐藏等生命周期回调函数。（2）看文字对概念有点模糊对不对？理解概念的最好方法就是上手实际操作一遍。那么，我们来看...

2020-04-01 21:36:47 1094

原创 vuejs生命周期函数

beforeCreate第一个生命周期函数，表示实例完全被创建出来之前，会执行它注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的属性与方法定义都还没有没初始化created第二个生命周期函数，在 created 中，data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只...

2020-04-01 21:22:12 242

原创 vue 绑定的点击事件处理冒泡

通用解决办法事件冒泡了，那就阻止事件冒泡呗。鉴于不同浏览器阻止事件冒泡方法不一样，建议手写一个事件阻止冒泡方法。function stopPropagation(event){ var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容 if(window.event){...

2019-11-25 14:59:47 1267

原创倒计时进度条动态效果

效果图HTML<div class="progress-bar-box"> <div class="wrap"> <div class="box"> <div class="text">0%</div> </div> </div> <div class="hint">倒计时：...

2019-10-11 18:30:30 1439

转载原生 JavaScript 的 DOM 操作汇总

什么是 DOM？外行看来前端工程师的工作就是改页面（HTML、CSS），写脚本（JavaScript）。当你意识到你不是在改HTML而是在操作DOM时，你就升级了！那么什么是DOM？MDN: 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和...

2019-08-30 17:37:57 213

空空如也

空空如也