萌新入门微信前端开发要踩坑的！

2016-05-21  本文已影响1823人  三月懒驴

时间：2016.5.21-08:24
作者：三月懒驴
推荐萌新入微信前端开发坑的技术点有：weui + vue.js

前言

由于最近在做react-native的应用开发，接触到很多原来做原生开发的朋友也来学习react-native。一次群里闲谈中，有人抛出一句，真不懂你们前端那么喜欢做轮子。于是就演化成：前端老司机们都喜欢一言不合就写轮子 或者对方不想和你说话，并向你抛出新的轮子等等各种表情包。


仔细想想，前端这几年轮子那么多，还不是为了兼容性问题，新的标准看起来很诱人，写起来很顺手。但是，浏览器不想和你说话，并渲染成不是你想要的样子。其中还有就是这几年从PC端转向移动端，旧的轮子大多很笨重，用它吧，性能是个问题，不用吧，那就的自己写...自己根据着业务需求，一个不小心又把轮子写重了，新来的人拿来一看，好像太重了，还是自己写...（死循环中）

（停止死循环回到那个现实）在中国，有着伟大的企鹅帝国把握了大部分网站的入口。没错，你说你的网店除了投放到朋友圈能骗几个钱之外，谁还会额外复制粘贴到浏览器去打开。而在这个入口，企鹅用了号称很好用的X5内核取代系统webview。于是，做前端的我们，坑坑洼洼的，一路跌过来了。

于是乎，本文只是给萌新看看在移动前端开发(主要是微信端)上踩过的一些坑和一些入门的链接集合。

正文

入门

听说大部分人学习前端的HTML+CSS+JS的基础都在这里：w3school
别说萌新，就算老鸟也是回来这里面查一查忘记的东西的。所以入门的时候不用个个死记

这才是正文

因为这是长期诉说坑的文章，所以那天我掉坑里了也会爬回来更新的。

1. meta元素

在移动端上，这个是很重要的，那天你发现你的网站的一些长的数字和邮箱在手机浏览器上变成了超链接样式的，可以在meta里面禁止。其他还有viewport在这里也是很重要的定西，这篇的文章看完基本都懂:萌新传送门

2. 布局的一些事情

在微信没有发布weui这个样式框架之前，有着很多很多关于布局的方案，其中比较好用的有下面两个
1.web app变革之rem[注1]
2.使用Flexible实现手淘H5页面的终端适配

简单说说这两个方案吧。方案2是手淘出的：通过修改viewport进行缩放，但在部分手机（例如华为荣耀，再例如HTC）上就会有奇效，嗯，就是不生效。
方案1也是一个不错的方法，但是我没用过几次，原理是根据不同屏幕给REM一个标准值，然后把CSS的单位变成REM。那么这样标准值根据屏幕变动而变动，所有值都会计算一遍来自动适应。但！问题是，大部分安卓手机对于rem的小数部分好像都忽略的，在追求比较精度的计算的时候是一个很致命的缺点。因此在很多时候选择方案2的小部分手机有问题比较好。

看不懂没所谓……简单来说就是第二个方案比较适合

注1:传送门：关于REM是什么鬼 && REM还没理解完，vw/vh又来了

那么现在weui来了，我们可以安安心心用上flex了（其实也不安心，只不过在遇到不兼容的时候，我们可以理直气壮的说，微信团队也是这样做的，这也没办法。）

新人入门去了解flex其实不难,但是Flex也是很坑的，09年出了一套标准之后，后来2012年又改了。因此有09语法和12语法两套标准。某X5内核不知道为啥，用的是09语法（安卓2.3以上和IOS都是12语法的）。于是坑又来了——看我传送门大法：

1.阮一峰的网络日志:Flex入门教程
2.Flex布局新旧混合写法详解
3.Flex碰到的坑

3. CSS的一些事情

说完布局的东西，那可以来谈谈CSS，CSS里面除了正规的样式设计之外，还有很多奇门淫术，下面想到啥就列举啥

  1. 徒手画各种图形
  2. 单/多行文本溢出变省略号：这里注意的是，如果只做移动端开发的话，学习里面的CSS实现方法就够了。
  3. 使用CSS mask 实现图片的斜线拼接：其实叫设计师姐姐拼接好图就够了～没用过几次
  4. 还有一些比较生僻但是在移动端需要注意的CSS属性
     //prevent callout to copy image, etc when tap to hold
     -webkit-touch-callout: none;
    //prevent webkit from resizing text to fit
    -webkit-text-size-adjust: none;
    //按钮点击时候高亮颜色，如果自己做点击效果就需要设置透明度为0屏蔽这个
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    //如果设置为none;,则用户将无法在该文本块中开始选择文本。对输入框选择这个属性的话，输入框无法正常工作
    -webkit-user-select: none; 
    //允许独立的滚动区域和触摸回弹
    -webkit-overflow-scrolling:touch

  1. 当然的说说CSS3的动画：移动端做动画的主力

    1. 先说帧动画，因为我有此神器，请注意要翻墙。好的，帧动画说完...（当然也有一些预设好的CSS库，但是这个所见即所得的东西不是更好吗！）
    2. 过渡动画和变形：transform、transition。主要说说性能优化方面：传送门
      下面是我自己日常工作总结一下性能优化：
      2.1 动画对象应该脱离文档层，以免文档重排——绝对定位
      2.2 动画对象优先使用全局变量存储。
      2.3 3D变形开启GPU加速
      2.4 动画过程闪烁的时候：backface-visibility / perspective ： hidden / 1000
      2.5.尽量少用classname来获取元素

  2. 新手比较多遇到的不是bug的bug（新人问得多的暂时就是这两个）

    1. 子节点margin-top绑架父节点
    2. 子节点float之后，无法撑开父节点

4. HTML5的一些事情

HTML5里面新增了很多东西，一股脑塞下来真的很难说清，在做项目中主要用的几个无非就是video,audio,canvas，其他那些语义化的东西如同nav，header等等，能记上用着对于SEO优化也是不错的。

  1. 主要吐槽一下video！自从吴亦凡入伍新闻刷爆朋友圈这个之后，很多广告商想模仿，但仅仅是做到形似而已。X5上有一个很流氓的做法：视频播放跳出了DOM去。以下是我做的X5（TBS），原生安卓（6.0），IOS(9)下video的对比（这次数据是2016年1月份做的）
<video 
    class="video" 
    x-webkit-airplay="true" 
    webkit-playsinline="true" 
    preload="auto"
>
    <source src="/video/1.mp4" type="video/mp4">
</video>

1.播放前
1.1. 原生安卓： 不显示，并且不支持poster属性（是视频未加载的时候显示图片属性）
1.2. TBS：覆盖上内置播放器，先黑屏，后有微信自带加载进度，video一切属性，能读不能改
1.3. IOS：视频过大会卡在第一帧（发送请求加载video，先返回一段关于视频的信息。如果缓存已经存在的话，则直接从缓存拿出来播。这段请求导致即时缓存已经有的视频也会在网络不好的时候卡在第一帧）
2.播放的时候
2.1. 原生：无特殊事件
2.2. TBS：如果视频不在可视区域内/或者video标签尺寸比例和video不符合，就会跳出浏览器全屏播放
2.3. IOS：无特殊事件
3.播放后：
3.1. 原生安卓：无特殊事件
3.2. TBS：无特殊事件
3.3. IOS：无特殊事件

2.auido：video上因为微信的X5而痛不欲生！但是auido却又因为微信的而可以自动播放。auido的自动播放属性只能在PC端有效，而所有移动端，都是禁止流媒体的自动加载的（加载都不行了，怎么播放！），只有高级别事件触发之后才能播放：比如说第一次touch了屏幕，才就会加载。而从很久以前，微信就有一个JS对接到应用去的API:WeixinJSBridgeReady。在这里面调用音频播放即可使用实现移动端的自动播放。就算是一年前出了JS-sdk，监听WeixinJSBridgeReady也是有效的。

document.addEventListener("WeixinJSBridgeReady", function () {
    document.getElementById('sound').play()
}, false)

例子可以移动设备访问:这里

  1. canvas，做游戏必备的东西。当然你也会用到它的绘画去做图片上传的预览和修改。详细学习地址

  2. svg，使用svg去绘制形状，icon和做动画都是一绝～类似新的X5内核对SVG支持更加好了。学习地址

5. JS的一些事情

js的框架那是一个叫多！回顾这几年，移动时代到来，jq的统治地位开始松动。angularjs作为当时最优秀的MV框架，一骑绝尘，成为各大公司招聘前端的必备条件。而react-js却又凭借react-native上位，把MV的概念再砍去一层，号称仅仅是view层次的框架，傲视群雄，连angular都自愧不如，挥刀自宫，回炉重做，诞生了不一样的自我——angular2。而made in chain的vue也凭借自身小巧而上位，除此之外还有如同Emberjs，Elm等等各种框架分割大家的视野。相比以前JQ时代的把元素从document里面找出来，赋予事件。这些新的流行框架都是偏向于，把元素和事件写进document去。新旧时代的流行库，在概念上有了巨大的改变。而很多时候，选择怎样的库，还得看项目的规模还有项目的开发时间。因为不管你选择原生JS去开发还是各种各样的库去入坑，你都要明白一件事

不要相信在野党，上位之后都一样——不要相信新的框架/库有多好，你用了之后都要填坑。

建议萌新入门熟练原生JS之后必学JQ，新框架太多了，可以在angular/react/vue三选一。毕竟市面上招聘来说，这三个出现最多，而这三个的方向也大致一样。

最后

最后贴一个防打脸金句

请相信我
我所说的一切
都是错的
——和菜头

上一篇下一篇

猜你喜欢

热点阅读