新手学习微信小程序开发过程中的一些心得

因为我也才开始学习微信小程序不久，下文也是现在的一时之言，大家有不同的想法也可以在群里共同交流讨论，希望文章能给大家提供一点点帮助。

最近接触到了一些前端框架，像Vue.js，React，发现小程序的框架体系跟它们很像。它们都推崇模块化，组件化，数据与元素绑定。这样没有繁琐的DOM操作，组件之间完全分离，样式和逻辑全都封装在模板里，别人写好的组件可以拿来直接用，这会明显地提高我们前端开发的速度。

另外，微信小程序界面小，样式好调。这意味着，我们从纸面原型到能跑的APP的实现将会是很快的，所以我们可以多花一点时间去找，或者去构思，怎么的排版，什么样子的组件会更好看，怎样的特效用户体验会更好。当然，在此之前必须要熟悉微信框架以及熟练地使用css来调样式。

对于CSS，个人觉得比较难调的就是定位（搞懂fixed,absolute,relative的区别就OK）和布局（flex很好用）了。大家可以参考上面的链接来学习，像flex，它有很多属性，每个属性又有很多值，一下子不可能都记住。其实主要的还是多用，你可以先过一遍，大致知道有哪些东西，然后直接上手项目去调样式，对着文档调，很快就记住了。其实用的比较多的就flex-direction, align-items 和 justify-content。

这又让我想起来刚开始看《小程序开发入门》那本书的时候，我把所有的组件还有他们的属性都认认真真看了一遍，看的时候还尽量去记。但是后来一个星期没学，用的时候全忘光了。还有前两天，团队赶项目，老板没办法了让我一个实习生去帮着做页面。为了能跟项目框架合并，我必须得用一个从没用过的框架来写。根本没时间去熟悉整个框架，只能大致过一下，然后就开始写。之后我发现，过程进行的还算顺利，在写代码的过程中，会发现这个框架的一些小细节，你会去想办法弄懂它，然后就慢慢地熟悉了这个框架。但是，就算你在一开始学就有人告诉你这个细节，你也不一定能消化掉。就比如说，我记得《小程序开发入门》那本书就有讲js更改数据必须要通过调用this.setData()不能直接用this.data.Variable=value，之后是一段解释。后来我几乎忘记了它是怎么解释的，直到去调试一个组件的时候，我想要知道怎样能把后台请求得到的数据实时渲染到页面，google说用this.setData()吧，原来直接赋值只是改变了逻辑层的数据，而setData可以在逻辑层数据更改之后立刻通知表示层，数据变了，你渲染一下。

 

 

所以我就有一个体会了，当你有一定的前端基础之后，学习新的框架就是两个过程：熟悉框架和上手项目。而更快速高效的方法就是适当缩短前一个过程，把时间用在练手上。这里练手并不完全指对照着别人的项目或者看着模板组件写，相反我应该尝试着过一遍他的代码之后自己去实现，碰到不会实现的地方再去看。我之前就有过，对照着视频里面的代码敲，连它给的id都不敢改，生怕什么地方不一样，代码跑不起来，但是关了视频自己敲又下不了手了。这让我想起来一个图，我感觉挺恰当的。看着代码敲就像是老师讲课，一条路到终点，而自己写中途就可能会遇到各种问题，但是正是这个过程能够让你认识到这个框架的各种细节问题，从而帮你更快速的熟悉框架。当然，当你已经熟悉了框架之后，你想怎么玩就怎么玩。

image.png

下一个阶段，当我们熟悉了框架之后，不应该只把目标定为完成需求。现在互联网前端发展了这么久，各种UI框架，特效都已经做的相当好了，说句实话，你的页面不够好看，排版不够清晰，特效不够炫酷，我很可能刚进去就点返回了。所以，在没有UI设计师的前提下，我们能做的就是自己去搜罗现有页面的更好替代品，参考成功APP的排版、风格、色调、优美的组件等等。

学习案例体验