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

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

最近接触到了一些前端框架,像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的排版、风格、色调、优美的组件等等。

你可能感兴趣的:(学习微信小程序开发过程中的一些心得)