⼩程序开发中⽤到的标签及详解
在进⾏⼩程序开发过程中，遇到了不少问题，现在总结⼀下，刚开始写⼩程序页⾯时经常会使⽤h5中的⼀些标签导致页⾯有问题，现在总结⼀下⼩程序中的标签和标签对应的属性。
标签
1、view
view是盒模型，默认display:block。
盒模型在布局过程中，⼀般推荐display:flex的写法，配合justify-content:center;align-items:center；的定义实现盒模型在横向和纵向的居中。
2、text
除了text⽂本节点以外的其他节点都⽆法长按选中。
3、 icon
icon可以直接⽤组件默认的图标，默认是iconfont格式的，从WeUI那边沿袭过来的⼀种做法。
⾃定义的icon推荐svg sprite格式或者iconfont。
⽬前来看，市⾯上还没有很好的⾃动合并单个svg为svg sprite的⼯具，需要⼿动拼图。
4、input
input 的类型，有效值：text, number, idcard, digit, time, date 。
input不需要设置line-height或padding来纵向居中，默认placeholder的⽂字是居中的。
⼩程序把checkbox和radio都单独做成了组件，默认的input只⽀持输⼊⽂本。
上传⽂件在⼩程序⾥需要调⽤chooseImage事件完成;
input标签placeholder属性⼩程序CSS⾥的 :focus 不⽣效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。
.login .input-group input::-webkit-input-placeholder {
color: #c0c0c0;
}
.
login .input-group input:focus::-webkit-input-placeholder {
color: transparent;
}
5、picker
picker默认⽀持普通、⽇期和时间三种选择器。
picker通过bindchange事件来调取range中⾃定义的数据数据，并展⽰到页⾯中，调⽤的是系统原⽣的select。
这⾥⼩程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终⽤picker代替了。
{{area[index]}}
Page({
data: {
area: ['aa', 'bb', 'cc', 'dd'],
}
})
6、 navigator
navigator⽀持相对路径和绝对路径的跳转，默认是打开新页⾯，当前页⾯打开需要加redirect;
navigator仅⽀持5级页⾯的跳转;
navigator不可跳转到⼩程序外的链接地址;
登录页
在⼩程序开发⼯具⾥，默认打开新页⾯，⼯具左上⾓有返回按钮。加上redirect，当前页打开，不出现返回按钮。
7、image
⼩程序的image与HTML5的img最⼤的区别在于：⼩程序的image是按照background-image来实现的。
默认image的⾼宽是320*240。必须通过样式定义去覆盖这个默认⾼宽，auto在这⾥不⽣效。(开发者说这样设置的原因是：如果设置
auto ，页⾯布局会因为图⽚加载的过程有⼀个闪的现象(例如⾼度从 0 到 height )，所以要求⼀定要设置⼀个宽度和⾼度。)
最新的api⽀持获取图⽚的⾼宽。不过这⾥返回的⾼宽是px单位，不⽀持屏幕⾃适应;
图⽚包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式，三种缩放模式的实现原理对应如下：
scaleToFill{
background-size:100% 100%;//不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素
}
aspectFit{
background-size:contain;//保持纵横⽐缩放图⽚，使图⽚的长边能完全显⽰出来。也就是说，可以完整地将图⽚显⽰出来。
}
aspectFill{
background-size:cover;//保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。也就是说，图⽚通常只在⽔平或垂直⽅向是完整的，另⼀个⽅向将会发⽣截取。}
8、button
额外补充下button的实现⽅式，button的边框是⽤:after⽅式实现的，⽤户如果在button上定义边框会出现两条线，需⽤:after的⽅式去覆
盖默认值。不过这个应该会在最近的开发者⼯具中修复。
button::after {
content:" ";
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
}
⼩程序不⽀持button:active这种样式的写法，button的点击态通过.button-hover{}的样式覆盖，也可修改hover-class为⾃定义的样式
名。
9、css3动画
最新版的开发⼯具已经⽀持transition和keyframes动画。
除了官⽅公布的⼩程序的组件之外，有⼀些标签⽐如，span、em、strong、b也是⽀持的，只是官⽅并不推荐使⽤。
⼩程序的⽀持平台
⼩程序的运⾏环境有 3 个平台，iOS 的 WebKit（苹果开源的浏览器内核），Android 的 X5 (QQ 浏览器内核)，开发时⽤的 nw.js
平台渲染js 运⾏环境
iOS WKWebView JavaScriptCore
Android X5 基于 Mobile Chrome 37 内核X5 JSCore
开发⼯具Chrome WebView nw.js

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