学习微信小程序第二天（2020-06）WXML 语法参考（2）

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

view

基础库 1.0.0 开始支持，低版本需做兼容处理。

视图容器

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

Bug & Tip

1. tip: 如果需要使用滚动视图，请使用 scroll-view

image

基础库 1.0.0 开始支持，低版本需做兼容处理。

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性	类型	默认值	必填	说明	最低版本
src	string		否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
show-menu-by-longpress	boolean	false	否	开启长按图片显示识别小程序码菜单	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

mode 的合法值

值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

Bug & Tip

1. tip：image组件默认宽度300px、高度240px
2. tip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

 

image 图片标签

    1. src指定要加载的图片的路径 （默认宽高 320px * 240px）

    2. mode 决定 图片内容 如何 和 图片标签 宽高 做适配

    --1.scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

    2.aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

    3.aspectFill    缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，

    图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。  少用

    4.widthFix  缩放模式，宽度不变，高度自动变化，保持原图宽高比不变  常用

    5.bottom left （top left）...  类似以前的backgound-position

    --

    3.小程序当中的图片 直接就支持 懒加载 lazy-load

    图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

轮播图外层容器 swiper

    2.每一个轮播图  swiper-item

    3.swiper标签  存在默认样式

    -- 1.width 100% 

        2.heigth 150px   image 存在默认宽度和高度  320*240px

        3.swiper 高度 无法实现由内容撑开

        4.先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度

        原图的宽度 和 高度 为 1125 * 352px

        swiper 宽度 /swiper 高度 = 原图的宽度 / 原图的高度

        swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

        height: 100vw * 352 / 1125

        5.autoplay 是否自动切换

        6.interval 自动切换时间间隔

        7.circular 是否采用衔接滑动

        8.indicator-dots 是否显示面板指示点

        9.indicator-color 指示点颜色

        10.indicator-active-color 当前选中的指示点颜色

<swiper autoplay="{{true}}"interval="3000"circular indicator-dots="{{true}}" 
indicator-color="#0094ff" indicator-active-color="#0075aa">
    <swiper-item ><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /></swiper-item>
    <swiper-item ><image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/63/O1CN01xhHtuX1CKtYnCPBsv_!!63-0-lubanu.jpg" /></swiper-item>
    <swiper-item ><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" /></swiper-item>
</swiper>

 

导航组件 navigator

    0.块级元素 默认换行 可以直接加宽度和高度

    1.url 要跳转的路径  （可以放绝对路径 相对路径）

    2.target 要跳转到当前的小程序 还是其他的小程序的页面

        --Self 默认值 自己  miniProgram 其他小程序

    3.open-type 跳转的方式

        1--navigate  默认值  保留当前页面，跳转到应用内的某个页面，但是不允许跳到tabbar页面

        2--redirect  关闭当前页面，跳转到应用内的某个页面，但是不允许跳到tabbar页面

        3--switchTab 跳转到 tabBar 页面，并关闭其他所有的非 tabBar 页面

        4--reLaunch  关闭所有页面，打开到应用内的某个页面

        5--navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

        6--exit 退出小程序，target="miniProgram"时生效

<navigator url="/pages/demo02/demo02">轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到 tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/demo02/demo02">redirect 跳到轮播图页面</navigator>
<navigator open-type="switchTab"url="/pages/index/index">switchTab</navigator>
<navigator open-type="reLaunch"url="/pages/like/like">reLaunch</navigator>
<navigator target="miniProgram" exit>退出其他小程序</navigator>

rich-text

基础库 1.4.0 开始支持，低版本需做兼容处理。

富文本。

属性	类型	默认值	必填	说明	最低版本
nodes	array/string	[]	否	节点列表/HTML String	1.4.0
space	string		否	显示连续空格	2.4.1

space 的合法值

值	说明	最低版本
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text*

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

 

Bug & Tip

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。
7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生

button 

button  标签

    1.外观的属性

        --1. size 控制按钮的大小

                1。default 默认大小

                2。 mini 小尺寸

                3. 

        --2. type 用来控制按钮的颜色

                1.default 灰色

                2.primary 绿色

                3.warn 红色

        --3. plain 按钮是否镂空，背景色透明

        --4.loading 名称前是否带 loading 图标

        --5.disabled 是否禁用

<button >默认按钮</button>
<button size="mini">mini按钮</button>
<button size="mini" type="primary">小的primary标签</button>
<button size="mini" type="warn" plain="{{true}}">plain的warn标签</button>
<button loading="{{true}}">loading按钮</button>
<button disabled="{{true}}">disabled禁用</button>
<button open-type="contact">contact 打开客服会话</button>
<button open-type="feedback">feedback 打开“意见反馈”页面</button>
<button open-type="getPhoneNumber">getPhoneNumber 获取用户手机号</button>
<button open-type="getUserInfo">getUserInfot 获取用户信息</button>
<button open-type="launchApp">launchApp 打开APP</button>
<button open-type="openSetting">openSetting 打开授权设置页</button>
<button open-type="share">share 触发用户转发</button>

open-type 的合法值

值	说明	最低版本
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
openSetting	打开授权设置页	2.0.7
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0

 

Bug & Tip

1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. tip: 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
5. tip: 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-type 失效。

icon

基础库 1.0.0 开始支持，低版本需做兼容处理。

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

<icon class="icon-small" type="info_circle" size="23"></icon>
<icon class="" type="success" size="23" color="">
    <icon type="success_no_circle" size="46" color="" /> 
    
</icon>