ZGuangJu'S NoteBook

小程序 标签和选择器

11/11/2020 微信小程序

# WXSS

# wxss 选择器

html 微信小程序
div(标签选择器) view、text、icon、input、image、navigator(标签选择器)
class(类选择器) class
id（效率最高） id(效率最高)
element,element(层级选择器) element,element(层级选择器)
:after(伪类选择器) :after :before
:frist-child等 :frist-child等(不建议,工具过滤易导致页面错乱)
.class .class .class .class(不建议,工具过滤易导致页面错乱)
群组选择器 群组选择器
后代选择器 后代选择器

小程序支持的选择器在官方公布的文档中包括.class、#id、element、element,element、::after(注意是双冒号)、::before这6种选择器。

经过测试，小程序对于:first-child、:last-child、.class-a .class-b{}，甚至更多层级的嵌套都是支持的。 不过官方并不推荐级联的这种写法，因为考虑到后面切Native的扩展可能，会没办法支持级联选择。

所以保险起见，不建议.class-a .class-b{}这种级联的写法，以免后期工具过滤导致页面错乱。

<!-- 微信小程序中placeholder的样式和html5是不一样的。需要修改placehoder的样式，通过placeholder-class=”class”来定义。 -->
<em id="__mceDel">
    <input type="text" placeholder="邮箱" placeholder-style="color:#c0c0c0" />
    <input password type="number" placeholder="密码" placeholder-class="placeholder"  />
</em>
<!--小程序里通过placeholder-style和placeholder-class修改样式，不过并不能修改点击时候input的边框颜色-->

<!--HTML5通过focus修改placeholder默认和点击时候的样式-->
input::-webkit-input-placeholder {
   /* placeholder颜色  */
   color: #aab2bd;
   /* placeholder字体大小  */
   font-size: 12px;
   /* placeholder位置  */
   text-align: right;
}
input:focus::-webkit-input-placeholder { color: transparent; }

# 尺寸单位

WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。 其中1rpx=0.5px，在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。

  • 样式引入
import "../../wxss/common.wxss";

# WXML 标签

See More
标签 说明
view 视图容器
rich-text 富文本
swiper 滑块视图容器
icon 图标
text 文字
progress 进度条
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
slider 滚动选择器
switch 开关选择器
textarea 多行输入框
label 标签
navigator 应用链接
audio 音频
image 图片
video 视频
camera 系统相机
map 地图
scroll-view 可滚动视图容器
picker-view 内嵌列表选择器
canvas 画布
movable-area 可移动区域
movable-view 可移动的视图容器
cover-view 覆盖视图
cover-image 覆盖图片
functional-page-navigator 跳转到插件功能页
live-player 实时音视频播放
live-pusher 实时音视频录制
  • 小程序里有自己的一套标签，下面和html标签对比：
HTML Wechat
<div></div> <view></view>
<h1></h1>...<h6></h6>、<p></p>、<span></span> <text></text>
<input type="text"/> <input />
<input type="checkbox"/> <checkbox />
<input type="radio"/> <radio />
<input type="file"> <view bindtap="changeImage"></view>
<select><option></option><option></option></select> <picker range=""><view>\{{area[index]}\}</view></picker>
<a href="#"></a> <navigator url="#" redirect></navigator>
<img src=""> <image mode="aspectFill" src="">
<i class="icon"></i> <icon></icon>

* 双大括号{{ }}不能识别，表中\只为禁止解析

# 常用标签介绍

注意

标签中的属性只介绍了重点或常用的，了解所有属性请访问小程序官网 (opens new window)

  1. <view></view>(视图,相当于div)

相当于HTML的div标签，小程序里的view可以用hover-class(相当于html伪类:hover)

属性 类型 默认值 必填 说明
hover-class string none 否 指定按下去的样式类。 当 hover-class="none" 时，没有点击态效果
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态(阻止冒泡)

div和view都是盒模型，默认display:block。 盒模型在布局过程中，一般推荐display:flex的写法，配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中。

  1. <text></text>(文本,相当于p或span)

相当于<span>、<h1></h1>...<h6></h6>、<p></p>

属性 类型 默认值 必填 说明
user-select boolean false 否 文本是否可选，该属性会使文本节点显示为 inline-block
space string 否 显示连续空格

除了text文本节点以外的其他节点都无法长按选中。。 截止到0.10.102800的开发者工具text支持嵌套text，不过有class的text会被面板过滤，样式不影响。

<text class="text-tips">
    <text class="text-light">* </text>友情提示!
</text>
<!--支持text嵌套text-->
<text>
    <view></view>
</text>
<!--不支持text嵌套其他标签-->
  1. <icon></icon>(图标)
属性 类型 默认值 必填 说明
type string 是 icon的类型，有效值：success, info, warn, waiting, cancel等
size number/string 23 否 icon的大小
color string 否 icon的颜色，同css的color

icon可以直接用微信组件默认的图标，默认是iconfont格式的，从WeUI那边沿袭过来的一种做法。 自定义的icon推荐svg sprite格式或者iconfont。 目前来看，市面上还没有很好的自动合并单个svg为svg sprite的工具，需要手动拼图。

  1. <image></image>(图片,同img)
属性 类型 默认值 必填 说明
src string 否 图片资源地址
mode string scaleToFill 否 图片裁剪、缩放的模式
azy-load boolean false 否 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
binderror eventhandle 否 当错误发生时触发，event.detail = {errMsg}
bindload eventhandle 否 当图片载入完毕时触发，event.detail = {height, width}

mode 的合法值

值 说明
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top 裁剪模式，不缩放图片，只显示图片的顶部区域
bottom 裁剪模式，不缩放图片，只显示图片的底部区域
...

小程序的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;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
}
  1. <navigator></navigator>(块元素，和<a></a>标签类似)
属性 类型 默认值 必填 说明
url string 否 当前小程序内的跳转链接(可以跳转到其他页或者其他小程序，不能跳转到网页)
open-type string navigate 否 跳转方式
delta number 1 否 当 open-type 为 'navigateBack' 时有效，表示回退的层数
app-id string 否 当target="miniProgram"时有效，要打开的小程序 appId
path string 否 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页

open-type 的合法值

值 说明
navigate(默认) 跳转独立页面，保留之前页面,不能跳转 tabBar 页面(可以带参)
redirect 跳转到独立页面，销毁之前页面(所以没有返回按钮),不能跳转 tabBar 页面(可以带参)
switchTab 只能跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面(不能携带参数)
reLaunch 可以跳转到tabBar页面和普通页面，关闭所有页面(包括tabBar)，打开到应用内的某个页面(可以携带参数).(万能跳转方法:能带参、跳tabBar、销毁其他页)

navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect;

navigator仅支持5级页面的跳转;

navigator不可跳转到小程序外的链接地址(用<web-view></web-view>);

<navigator class="navigator" redirect  url="../logs/index" >登录页</navigator>
// 跳转重定向到 logs

在小程序开发工具里，默认打开新页面，工具左上角有返回按钮。加上redirect，当前页打开，不出现返回按钮。

  1. <scroll-view></scroll-view>(可滚动视图区域)
属性 类型 默认值 必填 说明
scroll-x boolean false 否 允许横向滚动
scroll-y boolean false 否 允许纵向滚动
scroll-top='50' number/string 否 设置横向滚动条位置(进入页面时滚动视图初始的位置)
scroll-left='50' number/string 否 设置横向滚动条位置
<scroll-view scroll-x scroll-left="150">
    <view class="scrOut">
        <view class="box">111</view>
        <view class="box">222</view>
        <view class="box">333</view>
        <view class="box">444</view>
        <view class="box">555</view>
        <view class="box">666</view>
    </view>
</scroll-view>

/* 上例中的样式 */
.scrOut {
  border: 1px solid red;
  display: flex;
  flex-wrap: nowrap;
}

.box {
  width: 100px;
  height: 100px;
  background: yellow;
  margin-left: 10px;
  flex: 0 0 100px;
}

<scroll-view scroll-y scroll-top="150" class="scr2">
    <view class="scrOut2">
        <view class="box2">111</view>
        <view class="box2">222</view>
        <view class="box2">333</view>
        <view class="box2">444</view>
        <view class="box2">555</view>
        <view class="box2">666</view>
    </view>
</scroll-view>

/* 上例中的样式 */
.box2{
  width: 100%;
  height: 100px;
  background: pink;
  margin-top: 5px;
}
.scr2{
  height: 250px;
}
  1. <swiper></swiper> 轮播图组件
属性 类型 默认值 必填 说明
indicator-dots boolean false 否 是否显示面板指示点
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色
autoplay boolean false 否 是否自动切换
  1. <input></input>(表单) input 的类型，有效值：text, number, idcard, digit, time, date 。 input不需要设置line-height或padding来纵向居中，默认placeholder的文字是居中的。 小程序把checkbox和radio都单独做成了组件，默认的input只支持输入文本。 上传文件在小程序里需要调用chooseImage事件完成;
<input type="file" class="upload-input" accept="image/*">
<!--HTML5的上传文件-->
<view class=" upload-block" bindtap="chooseImage"></view>
<view class="upload-block" wx:for="{{imageList}}" wx:for-item="image">
  <image src="{{image}}" class="pic" data-src="{{image}}" bindtap="previewImage"></image>
</view>
<!--小程序的上传图片，可以调用app原生的拍照和上传图片接口-->

小程序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;
}

<!-- HTML5通过focus修改placeholder默认和点击时候的样式 -->
<input type="text"  placeholder="邮箱" placeholder-style="color:#c0c0c0" />
<input password type="number" placeholder="密码" placeholder-class="placeholder"  />
<!--小程序里通过placeholder-style和placeholder-class修改样式，不过并不能修改点击时候input的边框颜色-->
  1. <picker></picker>(下拉标签) picker默认支持普通、日期和时间三种选择器。 picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是系统原生的select。 这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。
    <!--HTML5的下拉框-->
<select class="select-block">
    <option value="0">选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>
    <!--picker下拉框-->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{area}}">
   <view class="picker">
      {{area[index]}}
    </view>
</picker>
    <!--js里的area数组-->
Page({
  data: {
    area: ['中国', '美国', '巴西', '日本'],
  }
})
  1. <button></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为自定义的样式名。

  • css3动画 最新版的开发工具已经支持transition和keyframes动画，不用js苦哈哈的写动画队列了。 除了官方公布的小程序的组件之外，有一些标签比如，span、em、strong、b也是支持的，只是官方并不推荐使用。

# 浏览器内核

  • 在iOS平台上，微信的浏览器渲染内核是wkwebview；

  • 而在Android平台上，微信则采用了腾讯QQ浏览器2016年4月份发布的X5内核（blink内核）作为渲染引擎。

  • 在小程序的开发工具上，小程序的JavaScript是运行在chrome内核（nwjs）中。

参考 (opens new window)

最后提交: 7/15/2022, 10:42:12 AM

小程序 PS