<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Mr_Chao的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Andrexc</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Andrexc]]></copyright><item><title><![CDATA[vue3 实现全屏 loading 加载动画]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/125040850</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/125040850</guid><author>Andrexc</author><pubDate>Mon, 30 May 2022 09:41:20 +0800</pubDate><description><![CDATA[Loading.vue
&lt;template&gt;
  &lt;div class="loading-wrap"&gt;
    &lt;div v-if="mask" class="mask"&gt;&lt;/div&gt;
    &lt;div class="loading" v-cloak&gt;
      &lt;div class="load-cont"&gt;
        &lt;div class="line"&gt;&lt;/div&gt;
        &lt;div c.]]></description><category></category></item><item><title><![CDATA[vue3 封装 Dialog 弹窗组件，支持返回promise]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/125040590</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/125040590</guid><author>Andrexc</author><pubDate>Mon, 30 May 2022 09:32:49 +0800</pubDate><description><![CDATA[vue3 封装 Dialog 弹窗组件，支持返回promise

Dialog .vue
&lt;template&gt;
  &lt;div class="loading-wrap"&gt;
    &lt;div v-if="mask" class="mask"&gt;&lt;/div&gt;
    &lt;div class="loading" v-cloak&gt;
      &lt;div class="load-cont"&gt;
        &lt;div class="line"&g]]></description><category></category></item><item><title><![CDATA[vue3 封装 toast组件]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/125040429</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/125040429</guid><author>Andrexc</author><pubDate>Mon, 30 May 2022 09:22:33 +0800</pubDate><description><![CDATA[vue3 setup语法糖封装 toast 组件]]></description><category></category></item><item><title><![CDATA[微信小程序 textarea 组件中 手机软键盘挡住内容的处理方案]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/123651180</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/123651180</guid><author>Andrexc</author><pubDate>Tue, 22 Mar 2022 08:29:07 +0800</pubDate><description><![CDATA[微信小程序 textarea 组件中 手机软键盘挡住内容的处理方案
查看开发文档

设置并增大 cursor-spacing的值，可以完美处理textarea内容被键盘遮挡问题

]]></description><category></category></item><item><title><![CDATA[随机字符串码_永不重复(时间戳_随机数_随机码)]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/123061024</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/123061024</guid><author>Andrexc</author><pubDate>Tue, 22 Feb 2022 09:30:04 +0800</pubDate><description><![CDATA[根据时间戳生成随机永不重复的随机字符串编码
生成规则： 时间戳 + 随机数 + 随机码
export const getRandomCode = () =&gt; {
  var length = 10;
  var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",]]></description><category></category></item><item><title><![CDATA[url(网络图片)转base64图片编码]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/123060958</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/123060958</guid><author>Andrexc</author><pubDate>Tue, 22 Feb 2022 09:25:56 +0800</pubDate><description><![CDATA[将网络图片转换为base64编码的图片做自定义处理
export function getBas64(url, outputFormat = 'image/jpg') {
  return new Promise((resolve) =&gt; {
    let canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      img = new Image,
      dataURL = null]]></description><category></category></item><item><title><![CDATA[(px转rem)正则表达式匹配 px 像素单位转换为 rem]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/123060909</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/123060909</guid><author>Andrexc</author><pubDate>Tue, 22 Feb 2022 09:24:07 +0800</pubDate><description><![CDATA[将字符串中的px单位转换为rem单位做移动端适配
/**
 * @description:  正则表达式匹配 px 像素单位转换为 rem
 * @params ： str  字符串,width 基数 
 */
export const pxToRem = (str, width = 37.5) =&gt; {
  var reg = /(:")+(\d+(\.\d*)?)+(px")/gi; //可以匹配浮点数
  let newStr = str.replace(reg, function (_x) {]]></description><category></category></item><item><title><![CDATA[获取url中的参数]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/123060800</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/123060800</guid><author>Andrexc</author><pubDate>Tue, 22 Feb 2022 09:22:18 +0800</pubDate><description><![CDATA[通过正则表达式匹配url中的参数
/**
 *   获取url中的参数
 * @param {key}  待匹配的关键字
 * @param {url}  被匹配查询的url
 */
export const getUrlQuery = ({ key, url }) =&gt; {
  let str = url || location.href//默认获取浏览器地址栏中的url
  let reg = decodeURIComponent((new RegExp('[?|&amp;|/]' + key +]]></description><category></category></item><item><title><![CDATA[利用cookie记录状态(今日/N天内不提醒,免登录)]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/123060475</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/123060475</guid><author>Andrexc</author><pubDate>Tue, 22 Feb 2022 09:15:59 +0800</pubDate><description><![CDATA[状态设置成功后将状态值存入cookie中，设置过期时间(有需要时可重新赋值更新过期时间)

	//5天后过期
 setCookieFiveDays: function (name, value, days = 5) {
    let expiresTime = new Date();
     expiresTime.setTime(expiresTime.getTime() + 1000 * 60 * 60 * 24 * days);
    document.cookie = name + '=' .]]></description><category></category></item><item><title><![CDATA[移动端H5及微信公众号实现人脸识别的可行性demo]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/119672737</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/119672737</guid><author>Andrexc</author><pubDate>Fri, 13 Aug 2021 13:22:34 +0800</pubDate><description><![CDATA[实现思路
1.利用手机的前置摄像头获取视频流
2.利用第三方插件tracking.js捕获人脸部分
3.捕获到人脸后利用canvas绘制带人脸的照片（业务需要：转为base64编码）
4.将绘制带人脸的照片和其他数据上传到第三方校验平台进行识别对比校验
5.结束完工 (getUserMedia要在https的安全域名下使用)

html
&lt;!DOCTYPE html&gt;
&lt;html lang=en style="font-size: 37.5px"&gt;
&lt;head&gt;
  &l]]></description><category></category></item><item><title><![CDATA[仿ios菜单导航栏]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/118224824</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/118224824</guid><author>Andrexc</author><pubDate>Fri, 25 Jun 2021 17:12:26 +0800</pubDate><description><![CDATA[模仿ios 菜单导航栏，点击菜单跳转

函数
  /**
         * @Description: 浮动菜单
         * @params: menus: Array 菜单列表   [ {name: '', href: "", icon: "" }]
         * @return: { }
         *  &lt;div class="float-ball-box"&gt;
         &lt;div class="float-ball-box-layer"&gt;
 ]]></description><category></category></item><item><title><![CDATA[加载动画函数(loadingToast)]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/118224338</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/118224338</guid><author>Andrexc</author><pubDate>Fri, 25 Jun 2021 16:58:54 +0800</pubDate><description><![CDATA[自己封装的一个 loading 弹窗，以函数的形式展现
函数
/**
     * @Description: 加载动画
     * @params: text: String  文本
     * @params: duration：Number 延迟时间(s) 默认1500
     * @params: canClick：Boolean 是否可点击页面 默认 true
     * @return: { close() }
     *  &lt;div class="loading-box"&gt]]></description><category></category></item><item><title><![CDATA[html2canvas （踩坑） 网络图片显示不出来&生成图片只有一半或者空白&文字显示不出来问题处理]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/111085410</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/111085410</guid><author>Andrexc</author><pubDate>Sat, 12 Dec 2020 21:39:06 +0800</pubDate><description><![CDATA[这里只提供解决思路，代码就不粘贴出来了

图片显示不出来
就像大多数人说的一样，HTML中的图片产生了跨域，可以将网络图片转为base64后修改img 的src属性值，添加图片允许跨域的属性。调用html2canvas的API时，将跨域参数设置为true，允许跨域。
图片生成显示不全，只有半截或者空白
在有滚动的页面，产生了滚动条后，生成的图片可能会只有一半或者空白。答案只有一个，那就是要把html2canvas的配置项参数中，scrollx，scrolly都设置为0，问题就解决了。　　　　　oﾟ*｡o
恭]]></description><category></category></item><item><title><![CDATA[H5常见问题及解决方法（二）]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/107329969</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/107329969</guid><author>Andrexc</author><pubDate>Tue, 14 Jul 2020 08:34:27 +0800</pubDate><description><![CDATA[iOS 滑动不流畅
iOS 上拉边界下拉出现白色空白
页面放大或缩小不确定性行为
click 点击穿透与延迟
软键盘弹出将页面顶起来、收起未回落问题
iPhone X 底部栏适配问题
保存页面为图片和二维码问题和解决方案
微信公众号 H5 分享问题
H5 调用 SDK 相关问题及解决方案
H5 调试相关方案与策略

六：iPhone X系列安全区域适配问题
现象：头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。
原因：iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏.]]></description><category></category></item><item><title><![CDATA[H5常见问题及解决方法（一）]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/107329845</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/107329845</guid><author>Andrexc</author><pubDate>Tue, 14 Jul 2020 08:26:52 +0800</pubDate><description><![CDATA[iOS 滑动不流畅
iOS 上拉边界下拉出现白色空白
页面放大或缩小不确定性行为
click 点击穿透与延迟
软键盘弹出将页面顶起来、收起未回落问题
iPhone X 底部栏适配问题
保存页面为图片和二维码问题和解决方案
微信公众号 H5 分享问题
H5 调用 SDK 相关问题及解决方案
H5 调试相关方案与策略

 一. iOS 滑动不流畅
表现： 上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。
1.在滚动容器上增加滚动 touch 方法
方案：
将-we.]]></description><category></category></item><item><title><![CDATA[使用弹性布局 flex实现顶部固定，内容滚动]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/106965018</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/106965018</guid><author>Andrexc</author><pubDate>Tue, 07 Jul 2020 13:39:47 +0800</pubDate><description><![CDATA[这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar]]></description><category></category></item><item><title><![CDATA[移动端 h5页面 长安保存图片到手机]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/107179427</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/107179427</guid><author>Andrexc</author><pubDate>Tue, 07 Jul 2020 13:25:21 +0800</pubDate><description><![CDATA[本文使用
使用 html2canvas.min.js  插件
业务需要，这里我先将图片转译为base64,然后项html 片段替换为 绘制的 img图片
// An highlighted block

//手指长按事件
      var timeOutEvent;
      document.querySelector("#share-qr-content").addEventListener("touchstart", function (e) {
        //开启定时器前先清除定时器，防止]]></description><category></category></item><item><title><![CDATA[bootstrp_组件]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/90473665</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/90473665</guid><author>Andrexc</author><pubDate>Wed, 29 May 2019 19:38:35 +0800</pubDate><description><![CDATA[3.组件


			网页中有一些复杂的特殊效果，之前必须使用 js，dom，jq

			boot为我们封装好了很多常见的组件，我门可以之间使用

			方便快捷，但是如果需要个性化处理，比较繁琐

			boot中，大量使用元素的自定义属性来调用方法
			
		1.下拉菜单


			基本结构

			&lt;div class="dropdown"&gt;

			 &lt;button ...]]></description><category></category></item><item><title><![CDATA[bootstrap_响应式_CSS]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/90379853</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/90379853</guid><author>Andrexc</author><pubDate>Wed, 29 May 2019 19:38:19 +0800</pubDate><description><![CDATA[一.响应式布局

1.什么是响应式布局


			Responsive web page 响应式/自适应网页 可以根据浏览设备不同（pc，pad，phone）
			而自动改变布局，图片文字效果，不会影响用户浏览体验
			
		2.响应式网页必须做下面几件事


			①布局，不能固定元素宽度，必须是流式布局（默认文档流+浮动）

			②文字和图片大小随容器的大小改变

			③媒体查询技术...]]></description><category></category></item><item><title><![CDATA[CSS_CORE]]></title><link>https://blog.youkuaiyun.com/Andrexc/article/details/90270848</link><guid>https://blog.youkuaiyun.com/Andrexc/article/details/90270848</guid><author>Andrexc</author><pubDate>Wed, 29 May 2019 19:38:03 +0800</pubDate><description><![CDATA[一：复杂选择器

1.兄弟选择器


			兄弟元素：具有相同父级元素的平级元素

			兄弟选择器，只能找弟弟，不能找哥哥
			
		① 相邻兄弟选择器


			 选择器1+选择器2{ }

			获取紧紧挨在某元素后面的兄弟元素
			
		②通用兄弟选择器


			 选择器1~选择器2{ }

			获取某元素后所有符合要求的兄弟元素
			
		2.属性选择器


			...]]></description><category></category></item></channel></rss>