<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[自酌一杯酒]]></title><description><![CDATA[web前端技术]]></description><link>https://blog.youkuaiyun.com/struggleThunder</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; struggleThunder]]></copyright><item><title><![CDATA[Node实现文件（图片、音/视频等）上传]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/128148647</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/128148647</guid><author>struggleThunder</author><pubDate>Fri, 02 Dec 2022 15:17:08 +0800</pubDate><description><![CDATA[node文件上传完整代码。使用 multer 中间件 来储存上传的文件，支持自定义保存到哪个文件目录下]]></description><category></category></item><item><title><![CDATA[JS实现复制内容到剪贴板的方法]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/121292942</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/121292942</guid><author>struggleThunder</author><pubDate>Fri, 12 Nov 2021 17:47:18 +0800</pubDate><description><![CDATA[复制方法
/**
 * 复制功能
 * text 传入要复制的文本
 * callback 复制完成后的回调
*/
function copy(text, callback) {
    // 实现复制方法一：
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text);
        callback &amp;&amp; callback(true);
        return;
    }

    // ]]></description><category></category></item><item><title><![CDATA[小程序转盘抽奖组件（使用简单）]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/121286967</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/121286967</guid><author>struggleThunder</author><pubDate>Fri, 12 Nov 2021 14:28:34 +0800</pubDate><description><![CDATA[项目地址
点我查看完整代码
效果图


使用方式
引入组件 .json
{
  "usingComponents": {
    "turnplate-lottery": "/components/turnplate-lottery/index"
  }
}

使用组件 .wxml
&lt;turnplate-lottery id="turnplate" list="{{prizeList}}"&gt;&lt;/turnplate-lottery&gt;
&lt;button catchtap="onSta]]></description><category></category></item><item><title><![CDATA[图解转盘抽奖布局样式，以小程序为例]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/115005624</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/115005624</guid><author>struggleThunder</author><pubDate>Fri, 19 Mar 2021 15:17:09 +0800</pubDate><description><![CDATA[目前抽奖最常见的两种：九宫格抽奖 和 转盘抽奖，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。分享我自己在自定义转盘抽奖的样式布局思路，只是样式布局，没有功能实现；

布局思路
整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局
一. 底部转盘背景图
1：用canvas画个转盘出来（我采用的这种，自定义更高），再转为临时路径或base64数据，放到底部背景图上；
2：用默认的转盘背景图，放到底部背景图上；
二. 奖品内容布局
首先需要]]></description><category></category></item><item><title><![CDATA[小程序中实现视图懒加载]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/112916899</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/112916899</guid><author>struggleThunder</author><pubDate>Thu, 21 Jan 2021 10:01:05 +0800</pubDate><description><![CDATA[欢迎访问我的 个人博客
前言
小程序中对初始时渲染太多wxml节点数做懒加载是很有必要的！这是一个真实案例
在写小程序时，有个页面由于要展示很多内容，光弹窗都6个，还有大量的列表，所以wxml节点数很多，超过了小程序建议的1000个节点以下。
示例项目已放到 github 和 码云 上，文章最后附有地址。
问题
这个内容很多的页面是分包的第一个页面，再此之前开发工具上能正常的运行，因此没有去管它。但是在上周六（2020年1月16日）后，开发工具上就出问题了！！！进入这个分包页面，视图半天才渲染，但事件是会立]]></description><category></category></item><item><title><![CDATA[mongoose连接多个数据库简单例子]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/109711011</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/109711011</guid><author>struggleThunder</author><pubDate>Sun, 15 Nov 2020 22:16:56 +0800</pubDate><description><![CDATA[欢迎访问我的 个人博客
执行代码前截图

server.js
const mongoose = require("mongoose");

// 通过 createConnection 连接多个数据库
var conn1 = mongoose.createConnection("mongodb://127.0.0.1:27017/wx");
var conn2 = mongoose.createConnection("mongodb://127.0.0.1:27017/test");

var Schema]]></description><category></category></item><item><title><![CDATA[web前端开发时推荐用rem做单位]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/106649044</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/106649044</guid><author>struggleThunder</author><pubDate>Tue, 09 Jun 2020 19:18:35 +0800</pubDate><description><![CDATA[欢迎访问我的 个人博客
我之前做页面写css样式的时候一直用的 px 做单位，因为直接看着PC端的设计图标注多少像素就写多少像素。 直到做了一个内容宽度是1440px 大小的PC端设计图后，我感觉用 rem 做单位才是最好的选择（个人认为），不管开发的是PC端还是移动端，还是响应式页面。
下面我说下我对 rem 的看法，和我怎样使用 rem ，为什么推荐使用 rem
一、rem 单位
rem  是一个相对单位，相对根元素 &lt;html&gt;标签 字体大小的单位，一般浏览器默认的是 1rem = 16p]]></description><category></category></item><item><title><![CDATA[Linux平台安装MongoDB详细图解]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/106638766</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/106638766</guid><author>struggleThunder</author><pubDate>Tue, 09 Jun 2020 12:39:16 +0800</pubDate><description><![CDATA[Linux上安装MongoDB4.x 图解详情]]></description><category></category></item><item><title><![CDATA[Window平台安装MongoDB4.x并启动服务详细图解]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/103891431</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/103891431</guid><author>struggleThunder</author><pubDate>Wed, 08 Jan 2020 15:04:09 +0800</pubDate><description><![CDATA[PS：我安装的MongoDB版本是4.x，MongoDB4之后的版本安装步骤和配置都变简单了。不需要手动的去创建 data 和 log 文件夹，也不需要去创建并配置 .conf 的格式的文件。但在安装MongoDB服务的时候会修改 mongod.cfg 里面的东西，删掉里面的 mp:  就可以了
一、安装MongoDB

MongoDB官网下载地址

安装步骤图解




目录结构
├── bin...]]></description><category></category></item><item><title><![CDATA[vue router页面跳转与传值取值]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/103682377</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/103682377</guid><author>struggleThunder</author><pubDate>Tue, 24 Dec 2019 14:22:59 +0800</pubDate><description><![CDATA[记录在学习vue的时候遇到的一些问题

一、页面跳转与传值
1、使用&lt;router-link&gt;标签的形式
&lt;router-link to="/home/recommend"&gt;推荐&lt;/router-link&gt;

&lt;router-link :to="{name: 'list',params:{pagename: '新闻列表'}}"&gt;新闻列表&lt;/r...]]></description><category></category></item><item><title><![CDATA[原生js + canvas 实现刻度尺效果]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/103479132</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/103479132</guid><author>struggleThunder</author><pubDate>Tue, 10 Dec 2019 17:43:38 +0800</pubDate><description><![CDATA[手势事件
touchstart 手指按下  、touchmove 手指移动 、 touchend 手指抬起

效果图：

完整代码：
ruler.js
var ruler = {
    /**
     * 初始化刻度尺插件
     * @el 容器 String
     * @height 刻度尺高度 Number
     * @maxScale 最大刻度 Number
     * ...]]></description><category></category></item><item><title><![CDATA[js项目中常用的一些工具函数]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/103124717</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/103124717</guid><author>struggleThunder</author><pubDate>Mon, 18 Nov 2019 16:28:48 +0800</pubDate><description><![CDATA[记录一下在项目中常用的工具函数，随时更新

var utils = {
    /**
     * 获取路径参数方法 返回参数值
     * @name 参数名字
     * */
    getQueryString: function (name) {
        var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&am...]]></description><category></category></item><item><title><![CDATA[vue.js + axios.js图片压缩处理并上传到服务器demo]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/102956917</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/102956917</guid><author>struggleThunder</author><pubDate>Thu, 07 Nov 2019 16:05:14 +0800</pubDate><description><![CDATA[图片压缩原理

将图片重新画入一个canvas中。可设置最大宽度，再按图片宽高比例定义canvas画布的宽高。

完整代码demo
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;上传图片&lt;/title&gt;
    &lt...]]></description><category></category></item><item><title><![CDATA[微信小程序中实现吸顶效果(流畅、不卡顿)]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/99981587</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/99981587</guid><author>struggleThunder</author><pubDate>Wed, 21 Aug 2019 18:05:37 +0800</pubDate><description><![CDATA[最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。


后面就对代码进行了调整，避免不停的去setData
效果图
吸顶前

吸顶后

代码部分
wxml
&lt;view style="width: 90%; height: 300rpx; backgrou...]]></description><category></category></item><item><title><![CDATA[JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/88190904</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/88190904</guid><author>struggleThunder</author><pubDate>Tue, 05 Mar 2019 17:14:56 +0800</pubDate><description><![CDATA[讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白

一、事件和事件流
1、什么是事件
事件是可以被 JavaScript 侦测到的行为。
鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。
2、什么是事件流
事件流，描述的是页面中接受事件的顺序。

一个完整的JS事件流是从window开始，最后回到window的...]]></description><category></category></item><item><title><![CDATA[JS实现设置cookie、读取cookie、删除cookie]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/87967953</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/87967953</guid><author>struggleThunder</author><pubDate>Wed, 27 Feb 2019 10:35:40 +0800</pubDate><description><![CDATA[设置cookie
/**
 * 设置cookie
 * @name cookie名
 * @value cookie值
 * @expiredays 过期天数
 * */
function setCookie(name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expired...]]></description><category></category></item><item><title><![CDATA[JS实现JSON数组合并和去重]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/87786374</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/87786374</guid><author>struggleThunder</author><pubDate>Wed, 20 Feb 2019 12:00:32 +0800</pubDate><description><![CDATA[数组合并用的是concat方法，它可以用于字符串之间的连接和数组之间的连接；
JSON数组去重利用对象的属性名不可重的特性来做判断，然后得到新的数组，就是去重后的数组；]]></description><category></category></item><item><title><![CDATA[Node.js+Mock.js+Vue.js实现接口和上拉加载数据]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/87375249</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/87375249</guid><author>struggleThunder</author><pubDate>Fri, 15 Feb 2019 17:57:22 +0800</pubDate><description><![CDATA[Node.js+Mock.js+Vue.js实现接口和上拉加载数据效果图一、接口1、创建项目2、代码部分3、启动服务二、页面1、代码部分
效果图

一、接口

需要用到Express 和 Mock.js ， 如果不熟悉Express和Mock.js的建议先去他们的官网看看
Express官网  、 Mock.js官网

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一...]]></description><category></category></item><item><title><![CDATA[vue.js数据渲染完成后，获取页面高度问题]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/86999816</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/86999816</guid><author>struggleThunder</author><pubDate>Mon, 11 Feb 2019 15:13:51 +0800</pubDate><description><![CDATA[获取整个页面的高度用的$(document).height();
遇到的问题

在没有数据的时候页面的高度是690px;
调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）;
我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px;

解决问题
需要用到$......]]></description><category></category></item><item><title><![CDATA[微信小程序自定义组件-环形进度条]]></title><link>https://blog.youkuaiyun.com/struggleThunder/article/details/84677173</link><guid>https://blog.youkuaiyun.com/struggleThunder/article/details/84677173</guid><author>struggleThunder</author><pubDate>Sat, 01 Dec 2018 18:36:25 +0800</pubDate><description><![CDATA[微信小程序自定义组件官方教程

环形进度条的组件已经放在github上

环形进度条效果图

创建步骤

1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。
2、创建名为canvas-ring的文件夹，用来放环形进度条自定义组件。
3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Component” 取名canvas-ring。

结构图：

环形进度条组...]]></description><category></category></item></channel></rss>