<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ygx_work的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ygx_work</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ygx_work]]></copyright><item><title><![CDATA[小程序 转盘抽奖 demo]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/109464570</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/109464570</guid><author>ygx_work</author><pubDate>Tue, 03 Nov 2020 10:57:12 +0800</pubDate><description><![CDATA[// pages/draw/draw.js
const app = getApp()
let {
  config,
  Comm
} = require('../../utils/util.js');
let {
  AJAX,
} = require('../../utils/ajax.js');
var timer;
var n = 1;
var which = 1; //中奖项  
var drawCode = 0;
var deg; //中奖度数
// var luck = [15, 45, 75]]></description><category></category></item><item><title><![CDATA[vue excel文件上传、下载、预览、预览日期格式转换]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/109238957</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/109238957</guid><author>ygx_work</author><pubDate>Fri, 23 Oct 2020 11:48:18 +0800</pubDate><description><![CDATA[安装xlsx

npm install xlsx
import XLSX from 'xlsx'

上传与预览
页面组件
   &lt;el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body&gt;
      &lt;el-upload ref="upload" accept=".xlsx, .xls" :disabled="upload.isUploading" action="" ]]></description><category></category></item><item><title><![CDATA[小程序开发 登录]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/107760615</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/107760615</guid><author>ygx_work</author><pubDate>Mon, 03 Aug 2020 14:10:32 +0800</pubDate><description><![CDATA[小程序的登录
一般来说可将登录的方法写在app.js中，这样可方便其他的页面调用。
第一步，获取登录凭证（code）
getAppCode: function (callback) {
    let _this = this;
    wx.login({
      success: function (data) {
        // console.log(data);
        callback &amp;&amp; callback(data.code)
      },
      ]]></description><category></category></item><item><title><![CDATA[小程序开发 封装页面跳转常用的方法]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/107418483</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/107418483</guid><author>ygx_work</author><pubDate>Sat, 18 Jul 2020 00:07:50 +0800</pubDate><description><![CDATA[封装常用的公共方法需要定义一个公共的js文件，保证其他页面可以正常使用。因此我将页面跳转常用的方法放在了utils文件当中。
const utils = {
        /* 保留当前页面，跳转到指定url页面，但是不能跳到带tabbar的页面 */
        pageGo: function (url, cb) {
            if (url) {
                wx.navigateTo({
                    url: url,
      ]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的浏览器兼容问题]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106317204</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106317204</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:52:30 +0800</pubDate><description><![CDATA[css兼容性问题

不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符*来设置各个标签的内外补丁是0（即设置margin和padding为0）；
div的垂直居中问题 vertical-align：middle；文字居中：将行距增加到和整个div一样，高line-height=行高；
margin加倍问题：设置为float的div在ie下的margin会加倍。解决方案：为这个div设置样式：display:inline;

js兼容性问题

在标准的事件绑定中绑定事件的方法函数为addEventL]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的html5新元素]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106317124</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106317124</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:47:57 +0800</pubDate><description><![CDATA[用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如 article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；


...]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的浏览器向服务器的请求方式]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106316937</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106316937</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:38:05 +0800</pubDate><description><![CDATA[GET：获取数据
POST：提交数据
HEAD：请求头信息
PUT：上传文档到服务器
DELETE：删除远程服务器上的某个文档
OPTION：本地环境请求接口的时候，每次请求接口之前都会多一次OPTIONS请求


]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的线程与进程的区别]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106316826</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106316826</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:30:47 +0800</pubDate><description><![CDATA[一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的attribute和property的区别]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106316716</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106316716</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:26:51 +0800</pubDate><description><![CDATA[定义
Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。
Attribute]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的用js去除字符串空格]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106316581</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106316581</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:23:16 +0800</pubDate><description><![CDATA[正则
去除所有空格:：str = str.replace(/\s*/g,"")
去除两头空格:：str = str.replace(/^\s*|\s*$/g,"")
去除左空格： str = str.replace( /^\s*/, “”)
去除右空格： str = str.replace(/(\s*$)/g, "")
str.trim(str)
局限性：无法去除中间的空格
var str = "   xiao  ming   ";
var str2 = str.trim();
console.log(st]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的BFC]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106303354</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106303354</guid><author>ygx_work</author><pubDate>Sun, 24 May 2020 16:12:12 +0800</pubDate><description><![CDATA[什么是BFC?
BFC指的是Block Formatting Context，它提供了一个环境， html元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局，决定了元素如何对其内容进行定位，以及和其他元素的关系和相互作用。
其中：FC(Formatting Context)指的是页面中的一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。
块级格式化上下文，指的是一个独立的块级渲染区域， 只有block-level box参与，该区域拥]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的微信小程序优劣势]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106303087</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106303087</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 17:28:24 +0800</pubDate><description><![CDATA[优点

无需下载，通过搜索和扫一扫就可以打开。
良好的用户体验：打开速度快。
开发成本要比App要低。
安卓上可以添加到桌面，与原生App差不多。
为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。

劣势

限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
依托]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的微信小程序与H5的区别]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106303045</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106303045</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 17:15:43 +0800</pubDate><description><![CDATA[运行环境的不同
传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
开发成本的不同
只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG。
获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接。
应用在生产环境的运行流畅度
长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体.]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的html5 为什么只需要写DOCTYPE]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106303016</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106303016</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 17:12:47 +0800</pubDate><description><![CDATA[原因
html5 不是基于sgml (标准通用标记语言)，不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，否则浏览器将开启怪异模式，而html4.01 基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型。
作用
&lt;!DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。告诉浏览器按照何种规范解析页面
严格模式与混杂模式
严格模式的排版和JS运作模式是  以该浏览器]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的优化图像的方法]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106302595</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106302595</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 16:53:37 +0800</pubDate><description><![CDATA[不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或.]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的微信小程序相关文件类型]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106302547</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106302547</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 16:50:04 +0800</pubDate><description><![CDATA[WXML:（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以	 构建出页面的结构。内部主要是微信自己定义的一套组件。
WXSS :(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，
js :逻辑处理，网络请求
app.json:必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入	口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置	导航条样式，配置默.]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的微信小程序原理]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106302454</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106302454</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 16:45:45 +0800</pubDate><description><![CDATA[微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。
JavaScript
首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。
WXML
WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的小程序生命周期]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106302366</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106302366</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 16:40:27 +0800</pubDate><description><![CDATA[Data Object	页面的初始数据
onLoad	Function	生命周期函数–监听页面加载
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件.]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的小程序页面跳转]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106302277</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106302277</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 16:36:50 +0800</pubDate><description><![CDATA[wx.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
wx.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
wx.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。


...]]></description><category></category></item><item><title><![CDATA[笔记 前端需要了解的jQuery选择器]]></title><link>https://blog.youkuaiyun.com/ygx_work/article/details/106302019</link><guid>https://blog.youkuaiyun.com/ygx_work/article/details/106302019</guid><author>ygx_work</author><pubDate>Sat, 23 May 2020 16:24:43 +0800</pubDate><description><![CDATA[基本选择器：#id，class，element，*；
层次选择器：parent &gt; child，prev + next ，prev ~ siblings；
基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt；
内容过滤器选择器： :contains ，:empty ，:has ，:parent；
可见性过滤器选择器：:hidden ，:visible；
属性过滤器选择器：[attribute] ，[attribute=value] ，[at.]]></description><category></category></item></channel></rss>