君，已阅读到文档的结尾了呢~~
微信：大众传播向个人传播的转化
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
微信：大众传播向个人传播的转化
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口标签： , , , , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
发表评论（目前226 条评论）
热门总排行当前位置：正文
微信扫一扫分享到朋友圈
&这款颇具毕加索抽象风格的&Kobe 9 Elite “Perspective” 将于 3 月 8 日正式发售，绿松石般的 Flyknit 鞋面点缀抢眼的荧光色细节，而抽象图纹的加持更显独特风格。货号：发售日期：3 月 8 日
分享给好友
分享到微信朋友圈：
第一步 打开微信底部扫一扫
第二步 扫下面的文章二维码
第三步 右上角点击转发
相关文章Relevant
Mike隋最新爆笑《老外屌丝2:超强18人模仿秀》三年前,一个叫“Mike隋”的老外在微博上发布了一个视频,其中他一人扮演了12个...
来自德国的摄影师Julius Ise为某棒棒糖拍摄了一组可以称得上是史上最性感的棒棒糖广告,这组作品名为《leck mich》,意为“舔我”...
一日天降暴雨,一和尚与一尼姑同在山中的土地庙中躲雨,两人生了火后便各自安歇.睡到一半时尼姑突然醒来,发现和尚正拉着她的手...
惊呆了,加美女微信lieqicun,你需要她!
笑尿了,加微信shechi2015,看更多精彩!
话说..这就是最近老外头发玩出的新花样....... 虽然号称叫..像素染!总觉得叫马赛克染更贴切嘛....你看..酷炫不.. 熙s...萌新入门微信前端开发要踩坑的！ - 简书
下载简书移动应用
写了22267字，被62人关注，获得了31个喜欢
萌新入门微信前端开发要踩坑的！
时间：-08:24作者：三月懒驴推荐萌新入微信前端开发坑的技术点有：weui + vue.js
由于最近在做react-native的应用开发，接触到很多原来做原生开发的朋友也来学习react-native。一次群里闲谈中，有人抛出一句，真不懂你们前端那么喜欢做轮子。于是就演化成：前端老司机们都喜欢一言不合就写轮子 或者对方不想和你说话，并向你抛出新的轮子等等各种表情包。
仔细想想，前端这几年轮子那么多，还不是为了兼容性问题，新的标准看起来很诱人，写起来很顺手。但是，浏览器不想和你说话，并渲染成不是你想要的样子。其中还有就是这几年从PC端转向移动端，旧的轮子大多很笨重，用它吧，性能是个问题，不用吧，那就的自己写...自己根据着业务需求，一个不小心又把轮子写重了，新来的人拿来一看，好像太重了，还是自己写...（死循环中）
（停止死循环回到那个现实）在中国，有着伟大的企鹅帝国把握了大部分网站的入口。没错，你说你的网店除了投放到朋友圈能骗几个钱之外，谁还会额外复制粘贴到浏览器去打开。而在这个入口，企鹅用了号称很好用的X5内核取代系统webview。于是，做前端的我们，坑坑洼洼的，一路跌过来了。
于是乎，本文只是给萌新看看在移动前端开发(主要是微信端)上踩过的一些坑和一些入门的链接集合。
听说大部分人学习前端的HTML+CSS+JS的基础都在这里：别说萌新，就算老鸟也是回来这里面查一查忘记的东西的。所以入门的时候不用个个死记
这才是正文
因为这是长期诉说坑的文章，所以那天我掉坑里了也会爬回来更新的。
1. meta元素
在移动端上，这个是很重要的，那天你发现你的网站的一些长的数字和邮箱在手机浏览器上变成了超链接样式的，可以在meta里面禁止。其他还有viewport在这里也是很重要的定西，这篇的文章看完基本都懂:
2. 布局的一些事情
在微信没有发布weui这个样式框架之前，有着很多很多关于布局的方案，其中比较好用的有下面两个1.[注1]2.
简单说说这两个方案吧。方案2是手淘出的：通过修改viewport进行缩放，但在部分手机（例如华为荣耀，再例如HTC）上就会有奇效，嗯，就是不生效。方案1也是一个不错的方法，但是我没用过几次，原理是根据不同屏幕给REM一个标准值，然后把CSS的单位变成REM。那么这样标准值根据屏幕变动而变动，所有值都会计算一遍来自动适应。但！问题是，大部分安卓手机对于rem的小数部分好像都忽略的，在追求比较精度的计算的时候是一个很致命的缺点。因此在很多时候选择方案2的小部分手机有问题比较好。
看不懂没所谓……简单来说就是第二个方案比较适合
注1:传送门：
那么现在weui来了，我们可以安安心心用上flex了（其实也不安心，只不过在遇到不兼容的时候，我们可以理直气壮的说，微信团队也是这样做的，这也没办法。）
新人入门去了解flex其实不难,但是Flex也是很坑的，09年出了一套标准之后，后来2012年又改了。因此有09语法和12语法两套标准。某X5内核不知道为啥，用的是09语法（安卓2.3以上和IOS都是12语法的）。于是坑又来了——看我传送门大法：
3. CSS的一些事情
说完布局的东西，那可以来谈谈CSS，CSS里面除了正规的样式设计之外，还有很多奇门淫术，下面想到啥就列举啥
：这里注意的是，如果只做移动端开发的话，学习里面的CSS实现方法就够了。
：其实叫设计师姐姐拼接好图就够了～没用过几次
还有一些比较生僻但是在移动端需要注意的CSS属性
//prevent callout to copy image, etc when tap to hold
-webkit-touch-callout:
//prevent webkit from resizing text to fit
-webkit-text-size-adjust:
//按钮点击时候高亮颜色，如果自己做点击效果就需要设置透明度为0屏蔽这个
-webkit-tap-highlight-color: rgba(0,0,0,0);
//如果设置为,则用户将无法在该文本块中开始选择文本。对输入框选择这个属性的话，输入框无法正常工作
-webkit-user-select:
//允许独立的滚动区域和触摸回弹
-webkit-overflow-scrolling:touch
当然的说说CSS3的动画：移动端做动画的主力
先说帧动画，因为我有此，请注意要翻墙。好的，帧动画说完...（当然也有一些预设好的CSS库，但是这个所见即所得的东西不是更好吗！）
过渡动画和变形：transform、transition。主要说说性能优化方面：下面是我自己日常工作总结一下性能优化：2.1 动画对象应该脱离文档层，以免文档重排——绝对定位2.2 动画对象优先使用全局变量存储。2.3 3D变形开启GPU加速2.4 动画过程闪烁的时候：backface-visibility / perspective ： hidden / 10002.5.尽量少用classname来获取元素
新手比较多遇到的不是bug的bug（新人问得多的暂时就是这两个）
4. HTML5的一些事情
HTML5里面新增了很多东西，一股脑塞下来真的很难说清，在做项目中主要用的几个无非就是video,audio,canvas，其他那些语义化的东西如同nav，header等等，能记上用着对于SEO优化也是不错的。
主要吐槽一下video！自从这个之后，很多广告商想模仿，但仅仅是做到形似而已。X5上有一个很流氓的做法：视频播放跳出了DOM去。以下是我做的X5（TBS），原生安卓（6.0），IOS(9)下video的对比（这次数据是2016年1月份做的）
class="video"
x-webkit-airplay="true"
webkit-playsinline="true"
preload="auto"
&source src="/video/1.mp4" type="video/mp4"&
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()
例子可以移动设备访问:
canvas，做游戏必备的东西。当然你也会用到它的绘画去做图片上传的预览和修改。详细学习
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三选一。毕竟市面上招聘来说，这三个出现最多，而这三个的方向也大致一样。
最后贴一个防打脸金句
请相信我我所说的一切都是错的
——和菜头
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：当前位置：正文
微信扫一扫分享到朋友圈
【建议观看方式】近视者摘掉眼镜，晚上躲在被窝里使用被窝式密闭空间立体声环绕观看，享受最佳试听效果！创意短片视频！小编看了一半就吓哭了……看完之后发现自己哭早了……2015年全国10大权威公众号排行榜◆关注方式◆◆◆搜索微信公众号ID◆◆◆◆◆ 长按二维码识别关注◆◆◆心理读心术mmbb57↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆发型穿衣搭配vipp518↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆人世间vip7604↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆社交礼仪vipp60↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆性格分析vipp990↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆天下奇聞aiqingku8↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆财运风水hfbz666↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆鬼故事会vipp37↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆商界思维vipfof↑长按ID复制↑↓长按识别关注↓◆◆◆ 长按二维码识别关注◆◆◆小小说vtimes6↑长按ID复制↑↓长按识别关注↓
分享给好友
分享到微信朋友圈：
第一步 打开微信底部扫一扫
第二步 扫下面的文章二维码
第三步 右上角点击转发
相关文章Relevant
Mike隋最新爆笑《老外屌丝2:超强18人模仿秀》三年前,一个叫“Mike隋”的老外在微博上发布了一个视频,其中他一人扮演了12个...
1.哪里有这样的教练,请!叫!上!我!2.做陶瓷真的是一件很邪恶的事,甩得少妇心花怒放.3.妈蛋,脱出去砍了!!4.国外的军训我...
一日天降暴雨,一和尚与一尼姑同在山中的土地庙中躲雨,两人生了火后便各自安歇.睡到一半时尼姑突然醒来,发现和尚正拉着她的手...
1.我已经三天没洗头了2.可以喜欢这个男生的同时,又喜欢另外一个男生,反正没男朋友管着3.第二杯半价自己喝两杯4.可以不用在疲倦...
贾斯丁比伯的裸露癖终于被广告商锁定了!做小内内的CK邀请他拍了一组荷尔蒙旺盛的大片!小比伯一下子爷们了,流气也少了,加...
惊呆了,加美女微信lieqicun,你需要她!