小程序怎么将视觉搞实现成ui
原创
1、使用flex布局
这个真的是强烈建议，对于一个页面，首先应该大致的看一下可以划分为哪几个模块，通常的划分方式是，整体来看，是row排列，还是column排列的，那么，最擅长做这种划分的布局方式是什么，没错，就是flex布局了。
说起来，这个并没有那么的恐怖。首先你要了解一下主轴的概念，然后，你在了解一下副轴的概念，然后在了解一下。
有了这些认识之后
你就可以看看已主轴角度来看的排版方式了
以主轴角度来看的排版方式了，补充一点，这里如果子控件中也使用，那么，子空间自己的权重大一些，这里有点类似于android中的linerlayout
辅轴上如何对齐，比如居中，居上等等。
然后其他的属性也关注一下，关于如何分配空间的问题，比如以下这个就比较重要了
2、熟悉position
有没有发现使用flex没有办法搞定一个问题，那就是,布局覆盖在一个布局之上的情况。
那么，这时候，position就可以跳出来帮助你了。
重点注意一下，absolute,relative即可。
3、掌握一些常用的css属性。
这个是没有办法逃避的，也是只能靠积累，而且必须记，必须多练习，像margin,padding,font-szie,text-aligin这类简单的，不要指望这里会给你一一介绍，这些都太简单，如果你有过Android，或者iOS开发的经验，这些简直就是白菜，不用学，直接和那边的概念完全一致，只有掌握了这些基本的，你才能慢慢很熟练的写出你心目中所想的布局。当然熟悉这些，你发现并不大够，有时候就是整不出，怎么办，我一开始也没办法，如是只好去google问，问着问着，就学到了一些css属性了，那些对于做某样的布局起决定性作用的css属性。我这里就整理了一些，一方面算作是自己的积累，一方面，方便与和我一样的css小白吧。
- white-space The
white-spaceCSS property determines how whitespace inside an element is handled. 这个属性很显然很多人都不是很了解，但是掌握了这个，你写出那种页面头部很多可滑动的tab的布局就很容易了。 - box-sizing The
box-sizingCSS property defines how the user agent should calculate the total width and height of an element. 很明显，这个属性很多人也不知道吧，当你使用了border的css属性时，你很可能需要关注他，来调整整个元素的大小。 - position The
positionCSS property specifies how an element is positioned in a document. Thetop,right,bottom, andleftproperties determine the final location of positioned elements.
4、使用组件库
好好的利用轮子，github上已经有很多很好看的风格的VUE库,但是使用之前，一定要看看，是否兼容了小程序。
(https://github.com/opendigg/awesome-github-vue)
5、记得参考微信小程序示例
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。