Monthly Archives: 六月 2017

rem-移动端响应式适配方案

借助rem单位,我们可以实现移动端网页内元素随着屏幕宽度的改变而正相关地改变大小。假设美工提供的设计稿宽度为750px。那么你需要用类似下面这样的代码去动态修改html元素的font-size值,进而影响那些使用rem为单位设定尺寸的元素的大小。

然后页面上的元素,就根据从750px的设计稿上量取到的长度,除以100,来计算采用rem单位时需要写的值。比如,如果一个div在750px设计稿上对应的宽度为600px,那给这个div写宽度值时就可以这么写:

直接除以(对,除和除以是不一样的。。。)100,是不是计算起来很方便-_-。

1px像素解决方案

目前了解到的1px解决方法有以下几种:

一、视觉欺骗

让边框的颜色靠近背景色(通常可以这么做,或者你也可以到打开下面这个地址,设置midpoints中点数为一个大于1的值,点击blend混合按钮后从palette调色板中选取你比较细喜欢的颜色:http://meyerweb.com/eric/tools/color-blend/#FF33FF:::hex),这样人眼看过去就会觉得比较细。但有时候边框颜色和附近的背景色在设计稿上已经定下来了而且二者可能差别还挺大的,这样也没事,你可以用rgba(r, g, b, a)来稍微给边框颜色加一点透明度,一般这点小改动是可以被接受的。

二、伪元素与transform

以下代码参考自vux(一个vue移动端样式、组件、插件库,基于微信weui样式库,存在点小bug,总体不错)。

我自己项目中目前用的代码是这样子的:

三、其他

比如用图片什么的,平时项目中我没用过这些方案。

-webkit-overflow-scrolling让iOS下页面滚动如丝般顺滑

现象描述:给html元素设定了overflow: auto;后,当元素内部内容较多时会出现滚动条,这个滚动条在安卓机里滚动很正常,但是在iOS机里就显得很不丝滑了,滑哪停哪(iOS软件内嵌页面和iOS微信客户端内都存在这个现象)。经测试,在该html元素对应样式的overflow: auto;的下面加一句-webkit-overflow-scrolling: touch;即可解决问题。

Safari CSS Reference页面里有对这个css属性进行介绍:

描述:指定是否对设定样式 overflow:scroll 的元素使用类似IOS原生的滚动条滚动效果。

可选值:

  • auto:单手滚动(不带动量);
  • touch:类似原生的滚动效果(自带一堆效果,如透明、遮罩、transform转变);
  • 默认值为auto。

可用性:适用于iOS 5.0及之后的版本。

说明:

经实测,-webkit-overflow-scrolling: touch;这个样式除了像文档中说的那样对 overflow:scroll 的元素有效外,对 overflow:auto的元素也是有效的。

另外需要注意的是,如果你的页面上有position; fixed定位的元素的话,-webkit-overflow-scrolling: touch元素滚动时可能会出现position: fixed元素短暂错位(滑动结束后会复位)的现象,所以改完样式后记得在真机上测一下。

参考:
  • https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling

ES6中的Destructuring assignment解构赋值

通过解构赋值destructuring assignment表达式,你能够将数组中的元素或者对象的属性直接取出来赋值给变量。

一、语法:

二、描述:

对象和数组的字面表达式({}、[])提供了一个临时保存数据集合的简便方法。

解构赋值采用的语法与上述代码相似,只是在赋值语句的左侧来定义需要从数据集合中取哪些值。

诸如Perl、Python这样的编程语言中,也有类似的特性。

三、数组解构

2.1、基本的变量赋值

2.2、变量赋值与声明分开

2.3、默认值

解构赋值可以指定默认值,这个默认值会在取到的值为undefined时生效。

2.4、变量交换

交换变量值的操作可以直接在一个解构赋值语句中实现了,不需要再临时声明一个变量用来存值了。

2.5、解析函数返回的数组

函数直接返回数组的情况是很常见的。借助解构赋值,可以让处理函数的数组返回值的代码更精炼。

在下面这个例子里,f()会返回数组[1, 2],通过解构赋值,只需要一行代码就可以解析这个数组了。

2.6、忽略部分返回值

如果数组中有一些返回值是你不感兴趣的,可以通过类似下面这样的代码予以忽略:

你也可以忽略所有的返回值(不过讲道理,这代码有啥用?):

2.7、将数组中剩余元素赋值给一个变量

注意,如果在上述代码中…b右边加上逗号的话,是会报错的。

2.8、从正则匹配结果中取值

通过正则表达式的exec()方法,你会得到一个这样的数组[正则完整匹配的字符串,  正则中第一个括号内表达式所匹配的字符串,  正则中第二个括号内表达式所匹配的字符串, …, 正则中最后一个括号内表达式所匹配的字符串],通过解构,你能更方便的取你想要的值。

四、对象解构

3.1、基本的变量赋值

3.2、变量声明与赋值分开

说明:

  • 在对对象字面量解构赋值时,若不是同时进行变量声明的话,解构赋值语句两侧的括号是需要的。
  • 从语法上来说,单独{a, b} = {a: 1, b: 2}这样的代码并不是有效的代码,因为等号左侧的{a, b}会被当作块级表达式而非对象字面量。
  • 不过,({a, b} = {a: 1, b: 2})这样的代码就跟var {a, b} = {a: 1, b: 2}一样,都是有效的。
  • 提醒:如果你的解构赋值代码(…)的上一行是一个函数,你可能需要在你的(…)解构赋值代码前加一个分号,不然可能就直接执行调上一行的函数了-_-。

3.3、赋值给新的变量名

3.4、默认值

可以对对象进行解构赋值时指定默认值,当解构出来的值为undefined时,就会使用默认值。

3.5、设定函数入参的默认值

3.6、嵌套对象/数组解构

3.7、for of遍历和解构

3.8、从函数的对象类型入参中取字段

3.9、对象的计算属性与解构

3.10、将对象的剩余属性赋值给一个变量

3.11、无效的JS identifier作为对象属性名

参考:
  • https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

分享网页到微信朋友圈时怎样才能带上缩略图和简介

分享网页到微信朋友圈时怎样才能带上缩略图和简介?首先这个事要分两种情况来讨论:

一、在微信浏览器内分享网页到朋微信友圈

这里还要再分2种情况-_-。

1.1、公众号文章

公众号文章指的就是那种直接在公众号后台「素材管理」中添加的文章(文章标题下面会有「日期」、「分类」、「公众号名称」等元素,文章末尾会有「阅读原文」链接、「阅读总数」、「点赞数」、「投诉」按钮和「精选留言」等元素)。这种文章被分享到朋友圈时,是可以显示缩略图的,也会显示标题,但是不会显示简介信息。

1.2、第三方页面

如果第三方页面未接入微信JSSDK或已接入但JSSDK调用失败,则只会显示默认缩略图和标题,不会显示简介。具体可以参考微信官方公众号「微信开发者账号」发布的这篇文章:《JSSDK自定义分享接口的策略调整》。不过需要注意的是,原文中说,如果未接入微信JSSDK或已接入但JSSDK调用失败,是会显示简介的。但是我实测是没有显示简介的。

二、在微信浏览器外分享页面到微信朋友圈

我测了下几个肯定没有针对微信jssdk进行处理的网页(比如我这个博客和一些其他带图片的PC端网页)。我是在iPhone 5s的Safari浏览器中打开页面的,通过浏览器自带的分享到微信朋友圈功能分享到微信朋友圈之后,朋友圈里这个分享卡片里会显示缩略图和标题(没有简介)。但是如果你点击朋友圈里的这个分享卡片后在打开的页面上再次进行分享到朋友圈操作,或者直接复制链接地址到聊天界面里发出去再点击发出去的链接后进行朋友圈分享,看到的就又是带默认缩略图和标题(不带简介)的分享卡片了。

目测,有些通过第三方分享工具分享到微信朋友圈会带缩略图是因为那些第三方分享工具可能使用了(猜测)微信开放平台的API。具体可参考:微信开放平台=>资源中心=>移动应用=>分享与收藏功能。所以同一个网页,通过有些第三方分享工具分享就能显示缩略图,而我们自己在微信浏览器内进行分享就不会显示缩略图了。

ES6中的import和export

一、import

语法:

引入模块的整个内容。下例会将myModule添加到当前作用域内,myModule会包含my-module模块暴露的所有东西(但不会包含默认输出的member):

引入模块的单一member。下例会将myMember添加到当前作用域内。

引入模块的多个member。下例会将foo和bar都添加到当前作用域内。

将模块的一个member以别名进行引入。下例会将别名shortName添加到当前作用域内。

将整个模块引入,但是并不需要所引模块中暴露的方法、属性等,需要的只是side effects。可以通过下面这种方法进行引入。说明:比如,你引入一个模块不是为了要用它暴露出来的方法、属性等,只是为了实现某种初始化,这就算side effects。

引入模块默认输出的member。

默认member也可以和其他member一同引入。在这种情况下需要先声明默认member再声明其他member。比如这样:

或者这样:

二、export

export声明用于暴露给定文件(或模块)中的函数、对象、或JS基本数据类型。

语法:

export分两种形式:Named exports和Default exports(每个脚本里只能有一个默认输出)。

下面是named exports的例子:

下面是default export(每个脚本里只能有一个默认输出)的例子(请注意,此处结尾处不用分号):

请注意,下面这种写法不会暴露默认输出的member:

如果,你需要输出默认member,用下面这种写法替换上面的:

 

参考资料:
  • https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import
  • https://stackoverflow.com/questions/41127479/es6-import-for-side-effects-meaning
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

VueJS项目实践总结

说起来,从最初用客户端vue.js,到后面用vue-cli使用的Vue1 + webpack模版,再到后面使用Vue2+webpack,用这个框架做SPA应用也有一年半的时间了。做一些总结吧,想到哪里写哪里(针对Vue2 + webpack)。

一、页面按需加载

这主要是为了加快首屏加载速度。这样做的好处是第一屏所需加载的文件大小变小了,代价是如果用户会走完整个SPA的话,实际的总代码下载量是变多了的。按需加载页面主要就是修改/src/router/index.js文件,示例代码如下:

因为觉得上面那样引入组件的代码重复的地方很多,本着DRY(Don’t Repeat Yourself,中文意思是“懒” -_-)的原则,试过用下面这种方式引入组件:

是不是感觉这样写的话,引入组件的时候能少敲很多代码呢?然而实践发现这样子npm run build后各个页面被打包成了一个js,貌似是把所有这些都当成一个页面了。

二、通过script标签引入第三方js库

这种方式或许并非比较好的实践,个人保留意见,只是告知一下其实还有这种操作方法。这样能减少本地打包后的vendor.js文件的大小,同时也利用了CDN,但是也增加了very first time的首屏加载时间,后面这些第三方js文件被缓存了,首屏加载时间是会快一点的。假设说,现在你的package.json文件中定义的依赖包有:

然后,在这些依赖包(第三方js文件),其实都是可以通过script标签引入的。打开/index.html文件,示例如下(mockjs未处理,一样一样的):

当然,事情没有这么简单,还需要修改/build/webpack.base.conf.js文件的externals部分(不记得脚手架生成的初始文件里有没有externals部分,如果没有的话自己加-_-):

然后vue、vue-router、vuex、jquery、fastclick这些还是平常怎么用就怎么用,比如:

但是vuex的使用是个例外,需要注释掉Vue.use(Vuex)这句代码,因为通过使用script标签加载window.Vuex时,Vuex会被自动安装,无需手动安装:

三、定义一个合并对象属性的merge方法,方便操作vuex store中的数据

/src/scripts/store.js:

merge方法的定义:

注意这个merge方法是假设如果你赋的值有数组的话那些数组都是临时创建的数组对象,而不是从其他地方引用来的数组对象,比如这样:

如果你赋的数组值是引用的其他地方的数组对象,建议修改下merge方法,对每个数组元素(包括数组里的数组元素)都用a = [].concat(arrB)或者a = arrB.slice(0)这种方式赋一个全新的数组对象。但是就我自己的项目而言,这种情况几乎没有,多加这样的代码除了影响性能外没啥好处。

四、延迟加载不需要立即加载的js文件

主要是延迟加载一些日期插件之类的js文件,这样首屏加载速度能快一点。示例代码如下(写在/index.html文件中):

五、移除打包后图片文件文件名中的hash

如果你跟我一样,项目中频繁修改的是css和js代码,图片很少有改动,要改也是增删,很少有更新图片的操作的话,建议移除打包后图片文件名中的hash,这样可以将图片文件更好的缓存起来。要修改的文件为/build/webpack.base.conf.js:

或者,也可以将[hash:7]改成[chunkhash],根据webpack官方文档https://webpack.js.org/guides/caching/,这个是根据单个文件的内容产生的hash,只要这个文件内容不变,chunkhash的值也不会变。而[hash]是根据当前编译环境来生成的,只要当前编译的文件中有一个文件发生了变化,这个[hash]产生的hash值就会变化。

六、图片压缩

可以在https://tinypng.com/这个网站上事先对你的图片文件进行压缩,效果感人。

七、确保CSS值不被改写

有段时间发现本地npm run dev的时候样式好好的,npm run build后在手机里样式就变了,后面发现是一个插件搞的鬼,修改/build/webpack.prod.conf.js文件:

重点就是这个cssProcessorOptions: { safe: true }的配置,有些版本的vue2+webpack模板里没有这行配置,会导致比如你的z-index值被优化(坑)到你没脾气。所以如果你现在的文件里有这样配置就最好了,没有的话需要手动添加一下。

八、使用minxin避免过大的重复代码,提高可维护性

Vue提供了minxin这种在组件内插入组件属性的方法,个人建议这货能少用就少用,但是有个场景则非常建议使用minxin:当某段代码重复出现在多个组件中,并且这个重复的代码块很大的时候,将其作为一个minxin常常能给后期的维护带来很大的方便。

比如说,有个post请求,传参字段有二三十个,后端回参也有几十个字段,整个一个请求下来要写的代码量都好几十行了,这个就比较适合作为一个minxin来用了。minxin怎么用就不说了,vue官网上都有的。

CentOS7-配置Apache虚拟主机

With Apache, you can use virtual hosts to direct http traffic for a given domain name to a particular directory (i.e. the root directory of the website for the domain in the request). This feature is commonly used to host multiple websites, but it’s suggested to using it for every website on your server including the first.

Install the Apache web server

If you haven’t have Apache installed on you server, please refer to this passage to install Apache first: CentOS7安装LAMP环境. And then return back to do the following operations.

Set up the virtual host

Create content for the website

Upload your files you prepared to the public_html folder you created in the last section.

Configure your virtual host directories

We’re going to copy a configuration usually used in Ubuntu/Debian and create two directories: one to store the virtual host files (sites-available) and the other to hold symbolic links to virtual hosts that will be published (sites-enabled).

Create sites-available and sites-enabled directories

Edit your Apache configuration file

Edit the main configuration file (httpd.conf) so that Apache will look for virtual hosts in the sites-enabled directory.

Create virtual host file

We’re going to build it from a new file in your sites-available directory.

1. Create a new config file:

2. Paste the code bellow in, replacing your own domain for example.com:

The lines ErrorLog and CustomLog are not required to set up your virtual host, but we’ve included them, in case you do want to tell Apache where to keep error and request logs for your site.

3. Save and close the file.

4. Enable your virtual host with a sym link to the sites-enabled directory.

5. Restart Apache

Reference:
  • Configure Apache Virtual Hosts – CentOS 7: https://hk.godaddy.com/help/configure-apache-virtual-hosts-centos-7-17338

CentOS7安装LAMP环境

LAMP is short for Linux, Apache, MySQL, PHP. Of course, you already have a Linux OS (CentOS), so  this article mainly introduces installation of Apache, MySQL and PHP. I need this environment because I use WordPress program which should run on basis of this environment.

Install Apache

To verify the installation of Apache, open “http://your server’s IP address”, and if Apache was successfully installed, you should see an Apache Text Page.

Install MySQL

You will be asked for the root password, because you didn’t set it earlier. Press Enter to set a password now.

Set root password and confirm the new password (this password is the password for your MySQL root account).

You will then be asked a series of questions as part of the security configuration. It’s a best practice to respond “Y” to these system prompts.

Install PHP

Install PHP modules

If your applications requires any PHP modules, you can install them now.

Test PHP processing on Apache

Firstly, create a new PHP file under the /var/www/html directory:

Then, type in the following code to info.php:

Then, save and close the file:

Lastly, open the url in your browser: “http://your server’s IP address/info.php”. You should see a page displaying information such as the PHP version, extensions, build date and etc., if PHP is successfully installed.

Reference:
  • Build a LAMP stack (Linux, Apache, MySQL, PHP) – CentOS 7: https://hk.godaddy.com/help/build-a-lamp-stack-linux-apache-mysql-php-centos-7-17344

花生壳内网映射导致请求失败

有段时间,不知何故,本地的请求通过node环境中的一个叫http-proxy-middleware的包转发本地请求到别人通过花生壳映射的内网后,总是请求失败,会报错:ORAY-ERROR-3。这个显然不会是朋友那边本地服务器的问题,因为这个服务放在公网上时,里面的服务都是可以用的。

我用的是vue-cli脚手架配套的webpack模版。经过尝试,发现只要修改一下转发的请求头里的Host字段即可。具体要修改的文件为:/build/dev-server.js,需要修改的地方见下面的代码:

代码中config.hostUsed即为花生壳内网映射时对应的外网地址,这个值不需要包含http或https这种协议字符,只需要’www.example.com’这部分就可以了。