微信小程序前端页面书写

微信小程序前端页面书写

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

一.数据绑定

1. 普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2. 组件属性

**简直和上面没区别啊**

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

3. bool类型

不要直接写 checked="false"，其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

二. 运算

1. 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2. 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

4. 字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

三. 列表渲染

1. wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

2. wx:for

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3. wx:key

提高效率使用的

四. 条件渲染

1. wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

2. hidden

hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

<view hidden="{{condition}}"> True </view>

类似 wx:if 不同是hiden控制显影,而if控制是否渲染

因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

五.特殊标签

1.text

<!-- <text> </text>  相当于span标签 -->

2.view

<!-- <view></view>    相当于div标签 -->

3.block

 <!--block标签就是只显示内容不会嵌套任何标签 -->

4. image

图片标签，image组件默认宽度320px、高度240px

**注意：该标签 其实是 web中的 图片标签 和 背景图片的结合！！！ 并且不支持以前的web中的背景图片的写法！！！ **

属性名	类型	默认值	说明
src	String		图片资源地址，支持云文件ID（2.2.3起）
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

5, swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否采用衔接滑动

6.swiper-item

滑块

默认宽度和高度都是100%

7.video

视频。该组件是原生组件，使用时请注意相关限制。

属性名	类型	默认值	说明
src	String		要播放视频的资源地址，支持云文件ID（2.2.3起）
duration	Number		指定视频时长
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放

<video src="{{src}}" controls></video>