蒲公英芽-CSDN博客

原创 vue项目使用canvas画图实现canvas带背景的橡皮擦 canvas转base64 canvas转file文件方法

用户手动在画板上进行绘制图案，绘制完成后，将绘制好的作品上传到服务器。涉及到的功能点：1. 项目的运行环境是在手机端，canvas 的尺寸单位是px，需要做好不同设备的适配。2. 选择画笔颜色、大小后，笔触要跟随手指的移动画出图案。3. 画板的橡皮擦功能，带有背景图片的canvas，实现橡皮擦功能。4.canvas的一键清除画布功能。5. 上传图片到服务器，将用户画好的作品上传到服务器。

2022-11-01 01:07:08 7783 2

原创微信小程序实现手机屏幕左右旋转，页面元素左右移动，小程序加速计

一、业务背景在做微信小程序的项目时，有一个需求是当用户左右旋转手机屏幕时，页面上特定的元素要随着用户的旋转动作左右移动。当将手机屏幕向左旋转时，人物向左移动；手机屏幕向右旋转时，人物向右移动。二、用到的微信API这里主用到了微信小程序的加速计：开始监听加速度数据，wx.startAccelerometer(Object object)监听加速度数据事件，wx.onAccelerometerChange(function callback)官方文档链接：https://developers

2022-05-24 19:16:27 6130

原创 css3 抽奖实现炸弹爆炸效果卡片翻转效果雪花效果

一、业务背景：最近接了一个“扎水球”的小程序项目，用户使用“金针”扎破水球，可以扎到奖励，或者扎到炸弹，其实也可以看作是一次抽奖，扎破水球后，显示对应的奖励。关于页面样式及扎水球后的结果，UI同学给了下面两张图：经过我的一番“添油加醋”后，做出的效果是下面这样的，感谢UI同学，给了我自由发挥的空间，让我又提起“笔”，写了这篇博客。 css3 抽奖实现炸弹爆炸效果卡片翻转效果雪花效果

2022-05-20 23:00:31 5433 1

原创 uniapp项目webview页面给小程序传参 postMessage 接收不到参数

一、项目背景：使用uniapp框架开发的小程序，因业务需求，要在小程序的webview里嵌入第三方的h5页面。当用户点击小程序右上角的三个点进行分享的时候，要将h5页面传过来的参数作为分享数据。二、小程序端先来了解一下小程序的 web-view 组件：web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。小程序的 web-view 页面和本身的内容不能共存，如果想在页面上悬浮内容，可以使用 uni.showToast()、**

2021-08-16 17:10:56 19474 7

原创小程序授权返回小程序解密失败

小程序获取手机号的代码，在 getphonenumber 回调函数里，先调用 login 拿到 code，再用 code 请求后端的接口。会有一定概率返回小程序解密失败。在回调中使用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者`提前进行 login`获取 code；或者在回调中先`使用 checkSession 进行登录态检查`，避免 login 刷新登录态。

2021-04-04 11:12:40 1902

原创 CSS3 菱形拼图实现只旋转div 背景图片不旋转

实现只旋转div ，背景图片不旋转。每个元素都使用背景定位的方式展示背景图的固定区域，中间的拼图做了旋转。但是旋转后，又遇到了个问题：背景图片也跟着旋转了。可以在当前元素的外层套一个盒子，将外层盒子向右旋转45度，再将当前元素向左旋转45度。

2021-03-27 15:03:27 1407

原创 Vscode中 vue项目中使用eslint保存时自动格式化代码

一、依赖1.1 安装vscode插件vscode中添加 eslint 、 vetur插件。1.2 安装第三方依赖在终端中执行yarn add eslint eslint-friendly-formatter eslint-loader eslint-plugin-html -S安装如下依赖"eslint": "^4.19.1","eslint-friendly-formatter": "^4.0.1","eslint-loader": "^2.0.0","eslint-plugin-

2020-12-07 17:55:28 2262 3

原创 vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果。用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示loading效果。

2020-11-14 16:23:13 5520

原创 CSS3媒体查询适配不同型号的手机 IphoneX/IphoneXR等

一、定义使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。二、简单使用如果文档宽度小于 300 像素则修改背景颜色(background-color)：@media screen and (max-width: 300px) { body { background-co

2020-10-21 16:06:03 3610

原创使用mongoose在nodeJs里操作mongoDB数据库

启动mongoDB1、终端中输入mongod，启动mongo服务端，出现下面的样子就是启动成功了。2、新建一个终端窗口，输入mongo，出现下面的样子就是启动成功了。3、mongo启动成功后，就可以对数据库进行操作了。点击https://blog.csdn.net/Charissa2017/article/details/105016264查看mongdb简介及常用的命令Node连接mongoDBnode连接mongodb，需要使用第三方模块mongoose，mongoose支持promi

2020-09-11 16:34:14 653

原创 js 将微信二维码转为url，qrcodeJs解析二维码，qrcode.decode is not a function报错

前言工作中遇到的需求：上传相册中的图片，判断这个图片里的二维码是不是微信二维码，如果是则上传到服务器；不是，则提示用户重新上传。百度了下，qrcode.js是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制而成，不依赖任何库。看了看文档，感觉好简单，从github上下载了源码就开干了。可以将 url 转成二维码，但是用 qrcode.decode 时解析二维码图片时，一直提示Github 地址：https://github.com/

2020-07-31 17:57:06 4813

原创 threeJs学习随笔（一），附百度网盘下载地址

threeJS简介为了真正能够使用three.js显示任何内容，我们需要三件事：场景，相机和渲染器，以便我们可以使用相机渲染场景。github地址：https://github.com/mrdoob/three.js，直接下载，会非常慢，出现下载不成功。奉上资源的百度网盘地址：https://pan.baidu.com/s/1d5miM_0qmntxVt8QdvZ8UQ ，密码:mu1rthreeJs的几个核心对象：Scene（场景）Camera（相机）Light（光源）Mesh（模型）Re

2020-06-27 15:52:16 3461

原创 threeJs导入3D皮卡丘.obj模型，使用.jpg贴图，实现缩放旋转查看功能

实现手指/鼠标缩放旋转查看功能。默认情况下，three.js 仅包含少数几个加载器（例如JSONLoader），**其他加载器应单独添加到应用程序中**。例如：导入OBJ格式的模型，除了导入必要的three.js文件外，还需要导入OBJLoader.js文件。three.js中导入外部模型的加载器下载地址：

2020-06-27 15:50:47 10371 7

原创 js实现一个函数，将200元红包金额随机分成n份

实现一个函数，将200元红包金额随机分成n份。用到四个变量：res，最后返回的金额数组range，每次生成随机金额的范围preTotal，已经生成的金额的和item，每次生成的随机金额每次生成随机金额后，从范围内减去已经生成的金额，并将该金额添加到preTotal中，循环完成后，用total减去preTotal，计算最后一个数，并添加到结果数组中返回出来。function getRandomNum(n, total) { var res = []; //最后返回的数组

2020-06-19 09:07:53 5767 2

原创 js实现将一个二维数组转换成树结构

用js实现将一个二维数组转换成树结构。例如：将下面的二维数组：var arr = [ ["a", "aa", "aaa", "aaaa"], ["b", "bb", "bbb"], ["a", "ab", "aba"], ["a", "aa", "aab"]]转成下面树结构的对象数组：[{ "name" : "a", "child" : [ { "name" : "aa", "chil

2020-06-18 23:01:32 3440 2

原创 Immutable入门使用_在react项目中使用redux-immutable

定义不可变数据 (Immutable Data )就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是持久化数据结构（ Persistent Data Structure），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的s性能损耗，Immutable 使用了结构共享（Structural Sharing），即如果对象树中一个

2020-06-14 14:48:50 1325

原创从五个方面聊聊前端开发中的性能优化

一方面是基于环境的优化，如网络环境、服务器资源等，这方面的问题是”硬件“的问题，在前端开发中是解决不了的；另一方面是代码环境的优化：例如Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化、按需加载等等。下面我们从这一方面来分析怎样做性能优化；影响性能的关键因素有以下几点： 1. `延迟`，比如网络的延迟； 2. `带宽`，网络环境，流量控制； 3. `DNS解析`，从域名解析成IP的时间。可以在终端里执行 `ping 域名`，查看域名的解析时间；

2020-06-14 12:08:44 1897

原创 React Hooks 从认识到使用_hooks优缺点

前言Hook 是 React 16.8 的新增特性。它是完全可选的，并且100%向后兼容。它可以让你使用函数组件的方式，运用类组件以及 react 其他的一些特性，比如管理状态、生命周期钩子等。从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。优点：1、代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护。例如，每个生命周期中常常

2020-06-13 14:43:06 6876 1

原创在React项目中使用mobx实现简单的todolist功能

最终效果：目录结构├── index.jsx //入口文件├── Count.jsx //显示页面内容的组件├── Button.jsx //按钮组件├── store.js //创建一个store，用来集中管理state dispatch action├── reducer.js //业务逻辑层，对数据进行操作，并返回新的state├── connect.js //将redux和展示组件做关联，将redux中的属性和方法挂载到组件里index.js 入口文件：import Reac

2020-06-12 13:51:57 914 1

原创跨组件通信_状态管理之_Mobx入门使用

简介状态管理，可以使用 vuex、redux、cn.mobx.js.org做状态管理的，通过actions去修改，改变了stote，会自动更新computed values（相当于vue中的计算属性）核心概念observable state 可观察的状态computed values 计算值，现有属性衍生出新的属性reactions 反应，相当于vue中的watch 数据更改后的反馈yarn add mobx -Simport {observable} from ‘mobx’第一步，定

2020-06-12 13:46:53 1315

原创数据可视化之_D3.js简介_svg_d3.selection API

前言什么是数据可视化将结果数据的每一个数据项，作为单个图元元素展示，大量的数据集构成数据图像，同时将数据的各个属性以多维度的方式展现，从而提高数据的可读性。数据可视化的优点图形化展示比文字的描述能力更强。降低大数据据阅读门槛。清晰有效地传达与沟通信息。具体做法：是指将大型数据集中的数据以图形图像形式表示。基于几何的技术、面向像素技术、基于图标的技术、基于层次的技术、基于图像的技术和分布式技术等等。数据处理流程数据收集：将已经存在的数据管理起来（收集、采集）；数据清洗 ETL (

2020-05-27 08:43:57 1664

原创使用webpack搭建项目开发环境_配置解析装饰器 decorator 的 babel-loader

前言之前写过关于 webpack 的详细介绍及各个属性的含义，不明白什么意思的可以查看之前的文章https://blog.csdn.net/Charissa2017/article/details/105055945这篇文章主要是对搭建 webpack 环境做个简单的总结，顺便再介绍一下关于 babel-loader 的配置。搭建步骤：npm init -y，生成 package.json 配置文件；yarn add webpack webpack-cli webpack-dev-server

2020-05-24 14:33:17 1283

原创 javascript_ES5_ES6中_判断变量是否为数组_将元素集合转为数组

判断一个变量是否为数组ES6中提供了 isArray ( arr ) 方法，返回 true 或者 false。ES5中可以使用 arr.constructor = = = Array 或者 Object.prototype.toString.call(arr) = = ="[object Array]"来判断。 //ES6 console.log(Array.isArray(arr));...

2020-05-20 14:32:44 3161 1

原创 vsCode扩展_SFTP_实现访问域名服务器（或者公网IP）指向本地开发环境

上一篇文章中讲到使用 SSH通道，当用户发送请求到服务器后，服务器通过SSH通道，将请求再转发到本地环境，实现访问域名服务器（或者公网IP）指向本地开发环境。转发需要一定的时间、这种方式受网络因素的影响比较大。本篇文章介绍另一种实现穿透的方式：使用 vsCode里的 SFTP 扩展。使用SFTP，将本地代码上传到服务器中，修改本地代码，同步服务器中的代码更新，在服务器端启动项目，用户发送请求，直接从服务器端返回数据。1. vsCode中安装 SFTP 扩展vsCode 中安装 SFTP 扩展，扩展工具

2020-05-19 13:18:12 1305

reqrcode-demo.zip

空空如也