上面说要搞小程序,强行趟坑
坑之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的,很吃力
谢谢观看