小程序踩坑之旅

xyi-express

在那山的那边海的那边有一群猿~

奥特曼.jpeg

要点

• 1.项目初始化，请参考相关文档；
• 2.本项目很多语法以及模块导出和导入采用ES6写法，如import,export,箭头函数，，，etc；
• 3.本项目有支付功能，需有商户号并开通微信支付功能；
• 4.项目需引入地图控件，并连接websocket实时显示飞机位置;
• 5.待续。。。

简介

麻雀虽小，五脏俱全

踩坑

1.图片加载引发的血案

这个呢，，，按照惯例，先问候一下若干人及若干人的亲戚，，，
事情的起因就不说了，直接说结果吧！
在小程序中，加载远程服务器的图片，有时候（注意这个“有时候”）会
加载不出来，
为嘛是有时候？？？什么鬼？
你要是一直都能加载出来或者一直加载不出来，咱们都好商量，
这种问题一般比较直接，解决方案也比较直接，是骡子是马，拉出来
遛遛就一清二楚。
关键是有时候，这个就WTF了！

在尝试了以下解决方案之后，怒火值是随着解决方案的数量而成正相关的。
a.问候别人亲戚——很明显，不管用；
b.以为图片大小问题；
那为嘛人家图片比你大好几倍的都可以，而且还是多张图片？？？

img001.png

自己问题，别往人家身上找原因，好好做好自我教育和自我反省；

——并没卵用；
c.图片布局问题;
有问题的那货：

没问题的那货：

——也和人家mode没关系

d.图片路径引入问题；
有问题的那货：

没问题的那货：

——和人家路径也没有关系
是的，既然不是View层的问题，那差不多就是js的问题了
e.尝试更换js写法;
——也没什么卵用
此时，怒火值一定达到一定高度，无力感也开始上升，为嘛就是不行呢！

offbike.jpg

深吸 一口气，不行，那再深吸一口气~~~

f.那就观察吧；
不断点击页面，我点，我点，我点点点，我再点点点，，，

click.gif

终于有规律了，再点，

click agin.gif

难道和js执行，页面渲染有关系？？？或者其他页面渲染，
会占用太多内存吗？也不太像啊！
——也不是
g.在f的基础上，我给渲染页面数据的函数加了个定时器，150毫秒之后，
再执行，幸福来的太突然了。果然OK了！然后，总觉得哪里怪怪的，，，
TMD到底为什么呢？？？不过，好在问题是解决了。
h.没事问问度娘？（注意，以后和别人吹牛逼时，一定要说，
我是用Gooogle的，还必须是英文google）
虽然找了半天，并没什么结果，但是（但是很重要），偶然间看到了
这个图片（想什么呢，不是你想的那张），

beauty.png

什么？？？就是你想的那张？
哦，不好意思，放错了，是下面这张，关于小程序生命周期的图，，，

mina-lifecycle.png

原来如此，恍然顿悟啊！原来我把数据请求和重新渲染的函数放在了onLoad
里面，这样会有一种极端情况，就是页面第一次进来，View Thread还
没inited，onLoad执行太快，里面的函数已经执行完毕，
这时怎么和View视图进行数据交互，人家还没准备好呢！
因为在View Thread和APPService Thread初始化时，都是毫秒级别的，而且
我看控制台是个位数毫秒级别的（10毫秒以内），所以，
很难保证哪个先执行完毕，所以就出现了上面的问题，
图片有时候加载出来，有时候加载不出来。
设置了定时器，
延迟onLoad里面函数的执行，此时View层也初始化完成了，
正好误打误撞啊！
果然有时‘太快’不好，，，

最后呢，还是那句话——好事多磨~

参考文献：

小程序官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/

小程序开发者论坛: https://developers.weixin.qq.com/home

阮一峰ES6入门: http://es6.ruanyifeng.com/

箭头函数: http://www.cnblogs.com/huansky/p/5684867.html