微信小程序项目总结(一)

— KChris 2017.3.16 (=^.^=)

前言
微信小程序的开发,我应该算是赶上了第一波,所以,自然是一路踩坑而来 =。=
一月九日,小程序正式上线,早早地就到公司开始改bugs~
前不久,我又对这个项目重构了一版~
现在来做个项目总结刚好,就给我踩过的那些坑留点纪念吧~

开发时,切忌将小程序简单地想象成我们web开发中的css、js、html,否则···

微信小程序的开发,实际上是在微信封装下对项目的二次开发了。很多很多的规则我们必须要去遵守,其中很明显的就是标签元素。很多标签会让我们很自然地和html中的标签元素对应起来,建立这种对应关系确实能够帮助我们更快地入手小程序,但是一定要记得不要把它们等同起来,谨记它们是有区别的。还有,开发之前,记得看看官网文档上的Q&A,预热下。

注:
1.以下标题是按照微信开发工具上的选项进行划分的。
2.总结还在一步步地完善中,每天一点点~
3.欢迎留言指正错误,知识共享~

项目
1.开发环境不校验请求域名以及TSL版本
小程序有严格的域名检查规则,规定使用https。
所以,当你的开发环境是http时,记得将这个选项勾上,不然你是无法请求到接口数据的。

2.开启ES6转ES5
如果有用ES6语法的话,记得勾上。

编辑
编辑,也就是开发咯。

1.文件引用
在小程序中,它引入了模块机制,我们可以在页面中引入我们需要的模块,但是,这种引入是单向的。比如:
a文件:

var b = require('../libs/b.js')

那我们在b文件中如果这样:

var a = require('../libs/a.js')

开发者工具是会报错的,目前我的解决方案也只是避免这种引用,直接将自己需要的部分放在同一个文件中。

2.图片
1)通过background属性引用图片
没错,我们可以在开发工具上看到效果挺正常的,但是,打开手机测试,Ops,图片不见了。
在官方文档上有明确规定,本地资源是无法通过css获取的。
所以,当你决定用background-image属性的时候,你可以:
a=> 使用网络图片
b=> base64

2)通过image标签src属性引用图片
这种方式的引用没有资源来源方式的限制,可以引用本地资源。

调试
调试的时候最大的感悟是,无论是开发者工具上,还是手机上,记得先把缓存删干净再测。而且出现bugs的时候尽量多测几次,进行反复确定。不然的话,你可能会发现,本来测好的功能又出现问题了,或者是本来有问题的部分又没有问题了,所以,测吧测吧,多测几次。

1.页面加载,前端向后台发送数据请求。
在开发阶段,我们在进行对请求结果的业务处理时,自然是边调试边修改的,有时候我们会遇到:statusCode没处理好而导致前端不断向后台发送请求,然后,卡机了。当然,在微信开发者工具上,也是。不过,除此之外,它还会产生另外一个副作用,就是可能连小程序本身API上的请求都请求不了了。发生这种情况的话,你就喝喝茶,做做眼保健操吧,给它点时间,它会好起来的。

2.代码上传报错。
手机预览小程序。在预览之前,我们是需要在开发者工具上上传代码的,说说我遇到的报错把:
1)明确提示我的代码中哪一个文件有错误
这个比较好办,就是直接找到对应文件,结合控制台,改好之后再上传代码。
2)错误提示一个不知道什么原因的error
遇见这种情况,我的解决方案是:不用纠结,关掉我的开发者工具,打开,再上传。貌似有点无厘头,但是成功几率很高,不信你可以试试。

其他
1.开发过程中,记得时刻关注官方文档上的更新日志,保持自己的开发工具是最新的。这是避免跳坑的一大法宝,不过现在还好了,刚开始的时候是真坑~
2.学会在开发者社区上找答案,没有答案就去提问,会有人回答你的。

    原文作者:kchris
    原文地址: https://segmentfault.com/a/1190000008718099
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞