⼩程序源码免费html5，⼩程序静态页⾯案例（附源码）⼩程序出来有段时间了，最近抽空写了个静态案例练练⼿。由于没有公测名额，⽆法测试，没有接⼝，所以先这样吧。
⾸先上图，整个app的演⽰是这样的：
图⼀
⼀、⼩程序和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中配置的静态数据，通过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小时内删除。