或者

分享一下写移动适配规则的技巧

作者:长瘦不老i 浏览:261 发布时间:2018-04-03
分享 评论 0

  经常看到有人提问说,移动适配规则到底怎么写?为什么我的适配失败?当然适配失败情况有多种,其实很多还是因为适配规则没写对。今天我就来说一说适配规则的写法。


  说到移动适配,首先必须要提到的一个概念就是“正则表达式”,所以上面说,对于懂点技术的人来说,可能都懂点正则表达式,对于不懂的人来说,正则表达式就是个很复杂的东西(其实对于懂的人来说也很复杂),但很庆幸的是,移动适配所需要了解的正则表达式知识很简单。


  对于不懂正则表达式的人来说,可能不知道这是个什么东西,但你应该知道另一个概念叫“通配符”,通配符大家应该都了解,比如中学时老师就教我们说,你在windows搜索时,使用“*.jpg”就是搜索所有jpg的图片,因为星号“*”表示匹配任意个字符,现在暂且不说通配符和正则表达式的区别,你只要知道,反正不管通配符或正则表达式都是用来文本匹配的就行了。


  正则表达式和通配符一样,不同的字符表示不同的含义,比如:


  代码说明


  .匹配除换行符以外的任意字符


  \w匹配字母或数字或下划线或汉字


  \s匹配任意的空白符


  \d匹配数字


  \b匹配单词的开始或结束


  ^匹配字符串的开始


  $匹配字符串的结束


  当然还有很多其它的,而且不同的组合方式会匹配出非常复杂的文本。


  但对于百度移动适配,实际上就是利用正则表达式来替换PC和移动URL中动态可替换的一些参数。


  比如:PC页面URL为:www.baidu.com/1.html,移动页面URL为:m.baidu.com/1.html,其中的数字1就是可替换的动态参数,因为它可能变成2、3、4等又是另外的页面了。所以我们就可以用:www.baidu.com/(\d+).html,以此来匹配www.baidu.com/{这里是数字}.html的所有页面。移动页面URL直接用${1},${2},……来表示这个链接被替换了多少个参数即可,所以我们该移动页面URL规则为:m.baidu.com/${1}.html


  其中\d 就表示匹配一个数字,\d+ 由于多了个加号,就表示匹配多个数字。


  同理,比如:PC页面URL为:www.baidu.com/a.html,移动页面URL为:m.baidu.com/a.html,其中的字母a就是可替换的动态参数,因为它可能变成b、c、d等又是另外的页面了。所以我们就可以用:www.baidu.com/([a-zA-Z]+).html,以此来匹配www.baidu.com/{这里是字母}.html的所有页面。同样,我们该移动页面URL规则还是为:m.baidu.com/${1}.html


  其中[a-zA-Z]就表示匹配一个字母,[a-zA-Z]+ 由于多了个加号,就表示匹配多个字母。


  当然你会想,正则表达式这么复杂,我要遇到很复杂的URL该怎么匹配,其实,百度现在仅仅只支持简单的几个正则表达式:


  a)确定都是数字的,则用 (\d+)表示


  b)确定都是字母的,则用 ([a-zA-Z]+) 表示


  c)确定是字母数字混合,则用 ([a-zA-Z0-9]+) 表示


  d)确定是字母数字下划线混合,则用 (\w+) 表示


  只有在pattern的粒度无法用上述a和b形式表示时,才用c形式表示;


  只有在pattern粒度无法用a、b、c表示时,则才用d形式表示。


  如果这4种规则都无法满足你的需求,那很不幸的告诉你,你就只能试用URL适配了。


  如果你还是对移动适配规则写法不太懂,那可以参考百度站长学院的移动适配工具帮助,再看我这篇文章,你应该会有一个深的了解。