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

时间: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三选一。毕竟市面上招聘来说,这三个出现最多,而这三个的方向也大致一样。

最后

最后贴一个防打脸金句

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略And...
    Mycro阅读 586评论 0 2
  • meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略And...
    Mycro阅读 867评论 0 11
  • 小时候,村子四周被一条环形的护城河围绕。村东的护城河,还连着一个池塘。记得一年夏天,雨过天晴的上午,池塘边躺着一个...
    一声笑阅读 589评论 0 0
  • 不能说的地方在下不能说的雨我不知道你明不明白但是不能说的地方在下不能说的雨 这场雨…… 怎么说呢我不知道要怎么形容...
    _DeepSea_阅读 136评论 0 1
  • 文/孤鸟差鱼 精神上的足亏 别认真
    孤鸟差鱼阅读 112评论 0 5