微信小程序，我趟过的那些坑

上面说要搞小程序，强行趟坑

微信小程序，我趟过的那些坑

坑之1（居然木法调试！）

在官方下载安装好了，微信web开发者工具，最开始我没得appid，就用的无appid模式可是，怎么都调试不起，页面一片空白，代码是有的。

后来公司申请了一个appid，我创建项目，还是调试不起，我就懵逼了，就这个样子，但是，我在手机上预览是有效果的。

什么都木有 手机上的截屏

结果，第一次启动是要连代理，也就是翻墙，（使用Chrome Inspect 第一次需要翻墙，chrome的开发调试工具），所以推断估计是用的chrome的那一套，修修改改的。

坑之二（官方的ide太弄用，如何高亮wxml和wxss文件！）

微信小程序的wxml对应hmtl，wxss对应css，只是大体上对应，还有一些差别，但是用sublime无法高亮这些文件，码起代码来，太吃力，，，，

推荐使用vs code 和 egret wing（我用的vs code， 实用一点）

vs code ：在wxml页面点右下角，适配成html，再点配置文件自动关联，这样你所有的文件就自动关联成html了，可以高亮，可以语法提示，vs code很轻量级，功能也很强大，即使你不开发小程序和前端，也是很好的选择

（补充一下，sublime也可以进行匹配，也是编辑器界面的右下角，单机左键后，最上面有个open all with current ...选项，就可以进行全局匹配了 ）

关联你的文件

vscode的wxml是使用html ,有很多wxml特有的提示没有， egret wing做了这些适配。

坑之三 （wxss并不是很css，写样式的时候要小心，仔细读文档）

1.rpx，（微信小程序独特的尺寸单位）

可以根据屏幕宽度进行自适应（这倒是很好用，比如一定比例的图片就可以用这单位）。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。

2.background-image：可以使用网络图片，或者 base64，或者使用标签

3.为什么脚本内不能使用window等对象

页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件

4. zepto/jquery 无法使用，zepto/jquery 会使用到window对象和document对象，所以无法使用

5.wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

坑之四（如何映入svg！为啥url总是不对！）

按照一般的前端流程引入icon文件，我就卡在@font-face  的url路径不对的坑上，不能动弹

结果这里多需要一步，具体看这个链接吧（微信小程序如何添加外部字体）

http://jingyan.baidu.com/article/d5a880eba54e3713f147cc91.html

最后 感言

微信小程序大量借鉴react native 和vue.js，所以一般的前端，上手还是很快，但是总要趟些坑才让你记住它，

至于js这边，又不能引入jq这样的库，所以基本原生js开发，和仔细阅读官方文档的api，这样才能减少工作量，

另外，都说了小程序是大量借鉴vue.js(angular也才不多），所以大家就不要绞尽乳汁去想怎么才能操作DOM了！用的是双向数据绑定，但是我还没看到想angular那样的指令技巧，哎，慢慢研究吧，原则上是不要操作dom的，很吃力

谢谢观看