⼩程序静态页⾯案例
⼩程序出来有段时间了，最近抽空写了个静态案例练练⼿。由于没有公测名额，⽆法测试，没有接⼝，所以先这样吧。
⾸先上图，整个app的演⽰是这样的：
图⼀
相关链接：
⼩程序调试⼯具下载：
⼩程序api下载：
案例git地址：
⼀、⼩程序和html5标签的区别：
⼆、wxss 选择器
HTML5⼩程序
div（标签选择器）view、text、icon、input、image、navigator（标签选择器）
class(类选择器)class
id(id选择器)（效率最⾼）id(效率最⾼)
element,element(层级选择器)element,element(层级选择器)
：after（伪类选择器）：after    ：before
：frist-child等：frist-child等(不建议（⼯具过滤易导致页⾯错乱）)
.class  .class.class .class(不建议（⼯具过滤易导致页⾯错乱）)
组选择器组选择器
后代选择器后代选择器
三、接着是程序的结构：
下⾯是app.json的配置根据⼩程序的api可以配置pages、window、tabBar（最多配置5个路由）前两个⽐较简单：（加⼀点：⼩程序更新page模块，增加页⾯不再需要单个页⾯配置四个⽂件，只需要在app.json中在page下增加该页⾯，⼩程序会⾃动⽣成四个⽂件）
下⾯是tabBar
我们⽤list属性来配置tab列表，最少2个，最多5个。根据个⼈需求不同进⾏不同的配置即可。
⾸页我们⾸先有个轮播图，实现代码为：
js实现轮播图最简代码
之后的优质投资模块，在js中配置的静态数据，通过wx:for="{{}}"语句渲染到了页⾯上，有接⼝的话我们获取后渲染。
这个模块实在局部滚动的，那我们调⽤下⾯这段代码。
注意（关于开发中的⾃适应）：
⼀、我们⽤html5写⾃适应的话需要⽤到百分⽐或是函数计算⽐例，但⼩程序可以让我们避免了这个⿇烦，我们可以⽤rpx，在ipoone6的开发环境下，1rpx=0.5px；我们采⽤这个单位就可以在完成后，省掉兼容的⼀部分问题了。（当然我这⾥⾯没有考虑到）
⼆、这⾥有个开发中可能遇到的坑，由于背景图是全覆盖的，所以这⾥可以在wxss⽂件中添加语句：.indexBox{height:100%;} page{height:100%}  都需要设置，要不然没法⾃适应，注意⼤⼩写。
三、模板的引⽤和js公⽤部分⽂件的引⽤（没有实现）
四、底部table切换，需要先写完前⾯的页⾯，后⾯的页没法显⽰。
投资理财页⾯使⽤了tablei切换，列表渲染，
登陆页⾯以及表单验证
表单中placeholder的样式和html5是不⼀样的。想给⼩程序input的placeholder添加样式如下：
总的下来技术难度三个星，对于有⼯作经验的前端来说，可以很快上⼿，不过细节⽅⾯还是有很多需要注意的⽅⾯。相互学习，共同进步。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。