行胜于言，自强不息！纸上得来终觉浅，绝知此事要躬行！
It's no longer allowed to omit the '-loader' suffix when using loaders.解决办法
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的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。同一个项目，为了实现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 (orientation: portrait) { /*你的样式写在这里*/ } 4、iPad横板@media screen and (max-device-width: 1024px) and (orientation: landscape) { /*你样式写在这里*/ } 上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的，至于其他的运用，大家参考下面我重新整理的CSS3 Media Queries模板：CSS3 Media Queries 模板：1、Smartphones (竖板和横板)@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" /> 2、Smartphones (横板)@media only screen and (min-width : 321px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" /> 3、Smartphones (竖板)@media only screen and (max-width : 320px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" /> 4、iPad(竖板和横板)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" /> 5、iPad横板@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" /> 6、iPad的竖板@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" /> 7、Desktops and laptops@media only screen and (min-width : 1224px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" /> 8、Large screens@media only screen and (min-width : 1824px) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" /> 9、iPone4@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* 你的样式写在这里 */ } //===或者====// < link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" /> 10、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){ /*你的样式写在这里*/ } //===或者====// < link rel="stylesheet" href="iphone4-portrait.css" 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)" /> 11、iPhone4横板@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){ /*你的样式写在这里*/ } //===或者====// < link rel="stylesheet" href="iphone4-landscape.css" 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)" /> 上面罗列了常用的CSS3 Media Queries模板，特别是在移动设备上的几种，希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3 Media Queries的运用条件往往不只这些，大家完全可以根据自己的需求去定义不同的条件，但个人建议，使用CSS3 Media Queries采用主流就Ok了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验，可以通过下面的评论与我们一起分享。2012年04月16日更新：iPad 3 Media Query@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { // your CSS }
那么今天我们就针对上面的问题，一起来探讨一下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) and (min-device-width: 480px) { /* CSS Styles */ } 现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：// Landscape phones and down @media (max-width: 480px) { ... } // Landscape phone to portrait tablet @media (max-width: 768px) { ... } // Portrait tablet to landscape and desktop @media (min-width: 768px) and (max-width: 980px) { ... } // Large desktop @media (min-width: 1200px) { .. } 在bootstrap中的responsive.css采用的是网格布局，大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。更新CSS3 Media Queries模板查询1、Smartphones (portrait and landscape)@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 2、Smartphones (landscape)@media only screen and (min-width : 321px) { /* Styles */ } 3、Smartphones (portrait)@media only screen and (max-width : 320px) { /* Styles */ } 4、iPads (portrait and landscape)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } 5、iPads (landscape)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } 6、iPads (portrait)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } 7、iPhone 4@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 8、640px显屏@media screen and (max-width : 640px) { /* CSS Styles */ } 9、800px显屏@media screen and (max-width : 800px) { /* CSS Styles */ } 10、1024显屏@media screen and (max-width : 1024px) { /* CSS Styles */ } 11、Desktops and laptops@media only screen and (min-width : 1224px) { /* Styles */ } 12、Large screens@media only screen and (min-width : 1824px) { /* Styles */ } 那么有关于CSS3 Media Queries模板的相关介绍就说到这里了，最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值，您可以把他推荐给您的朋友，如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。2012年10月09日更新@media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Medium screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1300px) { /* Large screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */ }
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 Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种常用的Media Query如下表所示：兼容的浏览器：下面我们一起来看看Media Queries的具体使用方式一、最大宽度Max Width 上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。二、最小宽度Min Width 上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。三、多个Media Queries使用 Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。四、设备屏幕的输出宽度Device Width 上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率五、iPhone4 上面的样式是专门针对iPhone4的移动设备写的。六、iPad 在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。七、android /*240px的宽度*/ /*360px的宽度*/ /*480px的宽度*/ 我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。八、not关键字 not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。九、only关键字 only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。十、其他在Media Query中如果没有明确指定Media Type，那么其默认为all，如： 另外还有使用逗号（，）被用来表示并列或者表示或，如下 上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。
APACHE利用ServerAlias servername实现一个站点绑定多个域名？
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 后面，用空格隔开即可
打开 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是一个前端构建工具，与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内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。 ? 匹配文件路径中的一个字符(不会匹配路径分隔符) [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)? +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+ *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)* @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern) 下面以一系列例子来加深理解* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js *.* 能匹配 a.js,style.css,a.b,x.y */*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js ** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件 **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录 ?.js 能匹配 a.js,b.js,c.js a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符 [xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符 [^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 当有多种匹配模式时可以使用数组//使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html']) 使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件 gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中 此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：a{b,c}d 会展开为 abd,acd a{b,}c 会展开为 abc,ac a{0..3}d 会展开为 a0d,a1d,a2d,a3d a{b,c{d,e}f}g 会展开为 abg,acdfg,acefg a{b,c}d{e,f}g 会展开为 abdeg,acdeg,abdeg,abdfg 3.2 gulp.dest()gulp.dest()方法是用来写文件的，其语法为：gulp.dest(path[,options]) path为写入文件的路径options为一个可选的参数对象，通常我们不需要用到要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：var gulp = require('gulp'); gulp.src('script/jquery.js') .pipe(gulp.dest('dist/foo.js')); //最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js 要想改变文件名，可以使用插件gulp-rename下面说说生成的文件路径与我们给gulp.dest()方法传入的路径参数之间的关系。gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。例如：var gulp = reruire('gulp'); //有通配符开始出现的那部分路径为 **/*.js gulp.src('script/**/*.js') .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js //如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js 再举更多一点的例子gulp.src('script/avalon/avalon.js') //没有通配符出现的情况 .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js //有通配符开始出现的那部分路径为 **/underscore.js gulp.src('script/**/underscore.js') //假设匹配到的文件为script/util/underscore.js .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js gulp.src('script/*') //有通配符出现的那部分路径为 * //假设匹配到的文件为script/zepto.js .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js 通过指定gulp.src()方法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()生成的文件路径。当我们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，例如：gulp.src('app/src/**/*.css') //此时base的值为 app/src 上面我们说的gulp.dest()所生成的文件路径的规则，其实也可以理解成，用我们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径。gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src //设该模式匹配到了文件 app/src/css/normal.css .pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/css/normal.css 所以改变base路径后，gulp.dest()生成的文件路径也会改变gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib //假设匹配到的文件为script/lib/jquery.js .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script //假设匹配到的文件为script/lib/jquery.js .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js 用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。3.3 gulp.task()gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：gulp.task(name[, deps], fn) name 为任务名deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务 // Do something }); gulp.task()这个API没什么好讲的，但需要知道执行多个任务时怎么来控制任务执行的顺序。gulp中执行多个任务，可以通过任务依赖来实现。例如我想要执行one,two,three这三个任务，那我们就可以定义一个空的任务，然后把那三个任务当做这个空的任务的依赖就行了：//只要执行default任务，就相当于把one,two,three这三个任务执行了 gulp.task('default',['one','two','three']); 如果任务相互之间没有依赖，任务会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。例如：gulp.task('one',function(){ //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done') },5000); }); //two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行 gulp.task('two',['one'],function(){ console.log('two is done'); }); 上面的例子中我们执行two任务时，会先执行one任务，但不会去等待one任务中的异步操作完成后再执行two任务，而是紧接着执行two任务。所以two任务会在one任务中的异步操作完成之前就执行了。那如果我们想等待异步任务中的异步操作完成后再执行后续的任务，该怎么做呢？有三种方法可以实现：第一：在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成 //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done'); cb(); //执行回调，表示这个异步任务已经完成 },5000); }); //这时two任务会在one任务中的异步操作完成后再执行 gulp.task('two',['one'],function(){ console.log('two is done'); }); 第二：定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。gulp.task('one',function(cb){ var stream = gulp.src('client/**/*.js') .pipe(dosomething()) //dosomething()中有某些异步操作 .pipe(gulp.dest('build')); return stream; }); gulp.task('two',['one'],function(){ console.log('two is done'); }); 第三：返回一个promise对象，例如var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q gulp.task('one',function(cb){ var deferred = Q.defer(); // 做一些异步操作 setTimeout(function() { deferred.resolve(); }, 5000); return deferred.promise; }); gulp.task('two',['one'],function(){ console.log('two is done'); }); gulp.task()就这些了，主要是要知道当依赖是异步任务时的处理。 3.4 gulp.watch()gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为gulp.watch(glob[, opts], tasks) glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。opts 为一个可选的配置对象，通常不需要用到tasks 为文件变化后要执行的任务，为一个数组gulp.task('uglify',function(){ //do something }); gulp.task('reload',function(){ //do something }); gulp.watch('js/**/*.js', ['uglify','reload']); gulp.watch()还有另外一种使用方式：gulp.watch(glob[, opts, cb]) glob和opts参数与第一种用法相同cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径gulp.watch('js/**/*.js', function(event){ console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 console.log(event.path); //变化的文件的路径 }); 4、一些常用的gulp插件gulp的插件数量虽然没有grunt那么多，但也可以说是应有尽有了，下面列举一些常用的插件。4.1 自动加载插件使用gulp-load-plugins安装：npm install --save-dev gulp-load-plugins要使用gulp的插件，首先得用require来把插件加载进来，如果我们要使用的插件非常多，那我们的gulpfile.js文件开头可能就会是这个样子的：var gulp = require('gulp'), //一些gulp插件,abcd这些命名只是用来举个例子 a = require('gulp-a'), b = require('gulp-b'), c = require('gulp-c'), d = require('gulp-d'), e = require('gulp-e'), f = require('gulp-f'), g = require('gulp-g'), //更多的插件... z = require('gulp-z'); 虽然这没什么问题，但会使我们的gulpfile.js文件变得很冗长，看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:{ "devDependencies": { "gulp": "~3.6.0", "gulp-rename": "~1.2.0", "gulp-ruby-sass": "~0.4.3", "gulp-load-plugins": "~0.5.1" } } 然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件：var gulp = require('gulp'); //加载gulp-load-plugins插件，并马上运行它 var plugins = require('gulp-load-plugins')(); 然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。实质上gulp-load-plugins是为我们做了如下的转换plugins.rename = require('gulp-rename'); plugins.rubySass = require('gulp-ruby-sass'); gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。最后要提醒的一点是，因为gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是已经安装好了的。4.2 重命名使用gulp-rename安装：npm install --save-dev gulp-rename用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。var gulp = require('gulp'), rename = require('gulp-rename'), uglify = require("gulp-uglify"); gulp.task('rename', function () { gulp.src('js/jquery.js') .pipe(uglify()) //压缩 .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js .pipe(gulp.dest('js')); //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename }); 4.3 js文件压缩使用gulp-uglify安装：npm install --save-dev gulp-uglify用来压缩js文件，使用的是uglify引擎var gulp = require('gulp'), uglify = require("gulp-uglify"); gulp.task('minify-js', function () { gulp.src('js/*.js') // 要压缩的js文件 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考： .pipe(gulp.dest('dist/js')); //压缩后的路径 }); 4.4 css文件压缩使用gulp-minify-css安装：npm install --save-dev gulp-minify-css要压缩css文件时可以使用该插件var gulp = require('gulp'), minifyCss = require("gulp-minify-css"); gulp.task('minify-css', function () { gulp.src('css/*.css') // 要压缩的css文件 .pipe(minifyCss()) //压缩css .pipe(gulp.dest('dist/css')); }); 4.5 html文件压缩使用gulp-minify-html安装：npm install --save-dev gulp-minify-html用来压缩html文件var gulp = require('gulp'), minifyHtml = require("gulp-minify-html"); gulp.task('minify-html', function () { gulp.src('html/*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html')); }); 4.6 js代码检查使用gulp-jshint安装：npm install --save-dev gulp-jshint用来检查js代码var gulp = require('gulp'), jshint = require("gulp-jshint"); gulp.task('jsLint', function () { gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter()); // 输出检查结果 }); 4.7 文件合并使用gulp-concat安装：npm install --save-dev gulp-concat用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了var gulp = require('gulp'), concat = require("gulp-concat"); gulp.task('concat', function () { gulp.src('js/*.js') //要合并的文件 .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js" .pipe(gulp.dest('dist/js')); }); 4.8 less和sass的编译less使用gulp-less,安装：npm install --save-dev gulp-lessvar gulp = require('gulp'), less = require("gulp-less"); gulp.task('compile-less', function () { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')); }); sass使用gulp-sass,安装：npm install --save-dev gulp-sassvar gulp = require('gulp'), sass = require("gulp-sass"); gulp.task('compile-sass', function () { gulp.src('sass/*.sass') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); 4.9 图片压缩可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。安装：npm install --save-dev gulp-imageminvar gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); //png图片压缩插件 gulp.task('default', function () { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true, use: [pngquant()] //使用pngquant来压缩png图片 })) .pipe(gulp.dest('dist')); }); gulp-imagemin的使用比较复杂一点，而且它本身也有很多插件，建议去它的项目主页看看文档4.10 自动刷新使用gulp-livereload插件，安装:npm install --save-dev gulp-livereload。当代码变化时，它可以帮我们自动刷新页面该插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'); gulp.task('less', function() { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); }); gulp.task('watch', function() { livereload.listen(); //要在这里调用listen()方法 gulp.watch('less/*.less', ['less']); }); 如对gulp还有什么不明白之处，或者本文有什么遗漏或错误，欢迎一起交流和探讨~
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); } };
教育孩子，大多家长都倾注于读书上面，对一些生活中最基本的常识往往不以为然，犹太人的金钱教育观或许能带给父母一些启发。过去，财富可通过节俭和储蓄获得；现在，若想让孩子“真富足”，父母须做典范，从小培养他们正确的金钱观，以获得心灵满足。要对抗童年富裕病蔓延，少给遗产只是消极的做法，唯有正确的财富教育，才是良方。谈到财富教育，许多人也很容易窄化为理财教育。事实上，财富教育是要建立一套对应物质生活的价值观，深度与广度，远高于只是教孩子如何存钱、赚钱。德国汉堡大学心理学教授迈尔思提出，现代父母应该教育孩子3大财富能力：正确运用金钱的能力、处理物质欲望的能力、了解匮乏与金钱极限的能力。这些能力背后最重要的思维，也就是为自己负责，自力解决问题。培养孩子这三大财富能力，才是留给他们最有价值的资产。犹太家庭财富教育时间表3岁：父母开始教孩子辨认硬币和纸币4岁：孩子要学会简单的计算5岁：让孩子知道钱币可以购买的东西、钱是怎样来的7岁：看懂价格标签，培养“钱能换物”的观念8岁：教他们去打工赚钱，把钱储存在银行里9岁：孩子要能制定一周的支出计划，购物时知道要比较价格10岁：懂得每周省下一点钱，以备大笔开支之需12岁：看穿广告包装的假象，设定并执行2周以上的开销计划，懂得正确使用银行业务的术语
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在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 }) } } })