李维亮_前端开发攻城狮 - 2017年7月
type: channel
link: https://liweiliang.com/2017/07/
description: 行胜于言，自强不息！纸上得来终觉浅，绝知此事要躬行！
items: It's no longer allowed to omit the '-loader' suffix when using loaders.解决办法
items: CSS3 Media Queries在iPhone4和iPad上的运用
items: CSS3 Media Queries模板
items: CSS3 Media Queries
items: APACHE利用ServerAlias servername实现一个站点绑定多个域名？
items: WebStrom 设置代码文件头部注释
items: 前端构建工具gulpjs的使用介绍及技巧
items: ajax原装js版本
items: 犹太人富过300年 全靠的是这个
items: 微信小程序开发之选项卡(窗口顶部TabBar)页面切换

It's no longer allowed to omit the '-loader' suffix when using loaders.解决办法
type: item
date: 2017-07-25T10:46:00+08:00
description: BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'style-loader' instead of 'style', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed Webpack新版本要求配置module中的loader不能缩写，也就是loader:"style-loader"中的-loader必须要写类似的还有loaders:['babel-loader','css-loader','sass-loader']坑惨我了

CSS3 Media Queries在iPhone4和iPad上的运用
type: item
date: 2017-07-24T17:17:00+08:00
description: CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。在具体开始之前，先来看看他的源码： login form 用户名： 密码： 确认密码： 现在在iPhone4竖板是OK的，如下图所示但现在需求是，在iPhone4的横板以及iPad的横板与竖板下，也需要让表单居中显示：上图显示的是iPad竖板下的需求，横板下也需要类似的效果。需求明确，做法也是有思路的，首先我按照：CSS3 Media Queries模板中的模板在样式中增加了代码：/*iPad竖板*/ @media screen and (max-device-width: 768px) and (orientation: portrait) { form { margin: 0 25%; } } /*iPad横板*/ @media screen and (max-device-width: 1024px) and (orientation: landscape) { form { margin: 0 25%; } } /*iPhone4*/ @media only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2) { form { margin: 0 ; } .controls { width: 68%; } } 加上上面代码后在iPad下是正常了，而且不会有什么问题存在。但在iPhone4上依然存在一个怪异的现象：当你iPhone4加载页面是用横板加载，再旋转到竖板，不会存在任何问题，而且显示也是蛮正常的。但是初始加载页面是竖板，然后在旋转到横板，就有问题了，表单给放大了初步给我感觉就是放大了，但具体是不是因为这个原因，我也不太清楚，查找了一些资料，也尝试了无解决办法。最后也从横板竖板的思路出发查找资料，经过一试，给解决了，下面来看看这段代码：/* iPhone 4 竖板 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){ form { margin:0; } .controls { width: 68%; } } /* iPhone 4 横板 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape), only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){ form { margin:0 10%; } .controls { width: 68%; } } 这样一来就OK了。在iPhone4和iPad的横竖板下都能正常让表单居中显示。那么以后大家在iPhone4和iPad设备上，就可以按照横竖板来定样式了：1、iPhone4竖板@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){ /*你的样式写在这里*/ } 2、iPhone横板@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape), only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){ /*你的样式写在这里*/ } 3、iPad竖板@media screen and (max-device-width: 768px) and (orientat…

CSS3 Media Queries模板
type: item
date: 2017-07-24T17:04:56+08:00
description: 那么今天我们就针对上面的问题，一起来探讨一下CSS3 Media Queries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制作。那么Media Queries是如何工作的？那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文，里面已经做过详细的介绍，这里就不在进行过多的阐述。CSS3 Media Queries模板CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板：使用max-width@media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width@media screen and (min-width: 900px) { //你的样式放在这里... } max-width和min-width的混合使用@media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里... } 同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用：iPhone和Smartphones上的运用/* iPhone and Smartphones (portrait and landscape) */ @media screen and (min-device-width : 320px) and (max-device-width: 480px) { //你的样式放在这里... } max-device-width指的是设备整个渲染区宽度（设备的实际宽度）iPads上的运用/* iPads (landscape) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { //你的样式放在这里... } /* iPads (portrait) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { //你的样式放在这里... } 针对移动设备的运用，如果你想让样式工作得比较正常，需要在“”添加“viewport”的meta标签： 有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。调用独立的样式表你可能希望在不同的设备下调用不同的样式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用： CSS3 Media Queries在标准设备上的运用下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：1、1024px显屏@media screen and (max-width : 1024px) { /* CSS Styles */ } 2、800px显屏@media screen and (max-width : 800px) { /* CSS Styles */ } 3、640px显屏@media screen and (max-width : 640px) { /* CSS Styles */ } 4、iPad横板显屏@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* CSS Styles */ } 5、iPad竖板显屏@media screen and (max-device-width: 768px) and (orientation: portrait) { /* CSS Styles */ } iPhone 和 Smartphones@media screen and (min-device-width: 320px) …

CSS3 Media Queries
type: item
date: 2017-07-24T16:35:00+08:00
description: Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： 或者这样的形式： 不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。首先来看一个简单的实例： 上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：1、screen：这个不用说大家都知道，指的是一种媒体类型；2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一起来理解一下这两个概念：一、媒体类型(Media Type)媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。页面中引入媒体类型方法也有多种：1、link方法引入 2、xml方式引入 <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？> 3、@import方式引入@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在 中的 中引入，单这种使用方法在ie6-7都不被支持 如样式文件中调用另一个样式文件： @import url("css/reset.css") screen; @import url("css/print.css") print; 在 中的 中调用： 4、@media引入这种引入方式和@import是一样的，也有两种方式：样式文件中使用： @media screen{ 选择器{ 属性：属性值； } } 在 中的 中调用： 以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或Ｇ爸，他们能帮你解决。二、媒体特性（Media Query）前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上： 转换成css中的写法为： @media screen and (max-width: 600px) { 选择器 { 属性：属性值； } } 其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：1、Media query只接受单个的逻辑表达式作为其值，或者没有值；2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；3、Media…

APACHE利用ServerAlias servername实现一个站点绑定多个域名？
type: item
date: 2017-07-21T16:56:00+08:00
description: APACHE2如何里一个站点绑定多个域名？用ServerAlias以前很笨，要使多个域名指向同一站点总是这样写：<VirtualHost *:80> ServerAdmin webmaster@admin DocumentRoot "D:/coreamp/htdocs/" ServerName localhost ErrorLog "../apache-2.2.16-project2-error.log" CustomLog "../apache-2.2.16-project2-access.log" common </VirtualHost> <VirtualHost *:80> ServerAdmin webmaster@admin DocumentRoot "D:/coreamp/htdocs/" ServerName 127.0.0.1 ErrorLog "../apache-2.2.16-project2-error.log" CustomLog "../apache-2.2.16-project2-access.log" common </VirtualHost> <VirtualHost *:80> ServerAdmin webmaster@admin DocumentRoot "D:/coreamp/htdocs/" ServerName 192.168.8.133 ErrorLog "../apache-2.2.16-project2-error.log" CustomLog "../apache-2.2.16-project2-access.log" common </VirtualHost> 这样一来就等于绑了多少域名就开了多少虚拟主机…………后来发现有个叫”ServerAlias“的东西可以用其实可以这样：<VirtualHost *:80> ServerAdmin webmaster@admin DocumentRoot "D:/coreamp/htdocs/" ServerName localhost ServerAlias 127.0.0.1 192.168.8.133 ErrorLog "../apache-2.2.16-project2-error.log" CustomLog "../apache-2.2.16-project2-access.log" common </VirtualHost> 要绑多少个域名都可以写在 ServerAlias 后面，用空格隔开即可

WebStrom 设置代码文件头部注释
type: item
date: 2017-07-21T10:24:00+08:00
description: 打开 File->Settings->Editor->File and Code Templates->Templates->Javascript File/** * Created by liweiliang 406320591@QQ.com on ${DATE} ${TIME}. */ /** * create on ${DATE} ${TIME} * @author liweiliang * @QQ 406320591 * @email 406320591@QQ.com */

前端构建工具gulpjs的使用介绍及技巧
type: item
date: 2017-07-20T17:37:00+08:00
description: gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。本文导航：gulp的安装开始使用gulpgulp的API介绍一些常用的gulp插件1、gulp的安装首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：npm install -g gulp 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：npm install --save-dev gulp 这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大体就是为了版本的灵活性，但如果没理解那也不必太去纠结这个问题，只需要知道通常我们是要这样做就行了。2、开始使用gulp2.1 建立gulpfile.js文件就像gruntjs需要一个Gruntfile.js文件一样，gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件，然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。var gulp = require('gulp'); gulp.task('default',function(){ console.log('hello world'); }); 此时我们的目录结构是这样子的：├── gulpfile.js├── node_modules│ └── gulp└── package.json2.2 运行gulp任务要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。3、gulp的API介绍使用gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，所以很容易就能掌握，但有几个地方需理解透彻才行，我会在下面一一说明。为了避免出现理解偏差，建议先看一遍官方文档。3.1 gulp.src()在介绍这个API之前我们首先来说一下Grunt.js和Gulp.js工作方式的一个区别。Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...就这样反复下去。而在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。再回到正题上来，gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，这个我们暂时不用去深入理解，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了。其语法为：gulp.src(globs[, options]) globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。options为可选参数。通常情况下我们不需要用到。下面我们重点说说Gulp用到的glob的匹配规则以及一些文件匹配技巧。Gulp内部使用了n…

ajax原装js版本
type: item
date: 2017-07-19T11:23:25+08:00
description: var fastAJax = function(args) { var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp == null) { args.handler("notSupport"); } else { xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { args.handler(xmlhttp.responseText); } else { args.handler(xmlhttp.statusText); } } }; xmlhttp.open(args.type,args.url, true); xmlhttp.send(args.data); } };

犹太人富过300年 全靠的是这个
type: item
date: 2017-07-18T16:20:00+08:00
description: 教育孩子，大多家长都倾注于读书上面，对一些生活中最基本的常识往往不以为然，犹太人的金钱教育观或许能带给父母一些启发。过去，财富可通过节俭和储蓄获得；现在，若想让孩子“真富足”，父母须做典范，从小培养他们正确的金钱观，以获得心灵满足。要对抗童年富裕病蔓延，少给遗产只是消极的做法，唯有正确的财富教育，才是良方。谈到财富教育，许多人也很容易窄化为理财教育。事实上，财富教育是要建立一套对应物质生活的价值观，深度与广度，远高于只是教孩子如何存钱、赚钱。德国汉堡大学心理学教授迈尔思提出，现代父母应该教育孩子3大财富能力：正确运用金钱的能力、处理物质欲望的能力、了解匮乏与金钱极限的能力。这些能力背后最重要的思维，也就是为自己负责，自力解决问题。培养孩子这三大财富能力，才是留给他们最有价值的资产。犹太家庭财富教育时间表3岁：父母开始教孩子辨认硬币和纸币4岁：孩子要学会简单的计算5岁：让孩子知道钱币可以购买的东西、钱是怎样来的7岁：看懂价格标签，培养“钱能换物”的观念8岁：教他们去打工赚钱，把钱储存在银行里9岁：孩子要能制定一周的支出计划，购物时知道要比较价格10岁：懂得每周省下一点钱，以备大笔开支之需12岁：看穿广告包装的假象，设定并执行2周以上的开销计划，懂得正确使用银行业务的术语

微信小程序开发之选项卡(窗口顶部TabBar)页面切换
type: item
date: 2017-07-18T16:15:55+08:00
description: 微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.总算做出来了.分享出来看看.先看效果:再上代码:1.index.wxml <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view> <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view> </view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <swiper-item> <view>我是哈哈</view> </swiper-item> <swiper-item> <view>我是呵呵</view> </swiper-item> <swiper-item> <view>我是嘿嘿</view> </swiper-item> </swiper> 2.index.wxss/**index.wxss**/ .swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} .swiper-tab-list{ font-size: 30rpx; display: inline-block; width: 33.33%; color: #777777; } .on{ color: #da7c0c; border-bottom: 5rpx solid #da7c0c;} .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } .swiper-box view{ text-align: center; } 3.index.js//index.js //获取应用实例 var app = getApp() Page( { data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, onLoad: function() { var that = this; /** * 获取系统信息 */ wx.getSystemInfo( { success: function( res ) { that.setData( { winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); }, /** * 滑动切换tab */ bindChange: function( e ) { var that = this; that.setData( { currentTab: e.detail.current }); }, /** * 点击tab切换 */ swichNav: function( e ) { var that = this; if( this.data.currentTab === e.target.dataset.current ) { return false; } else { that.setData( { currentTab: e.target.dataset.current }) } } })