微信小程序前端页面书写_輕微_前端开发者

微信小程序前端页面书写

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

基础组件事件系统

一.数据绑定

1. 普通写法

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

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

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

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

2. 组件属性

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

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

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

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

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

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

3. bool类型

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

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

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

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

二. 运算

1. 三元运算

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

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

2. 算数运算

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

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

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

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

3. 逻辑判断

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

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

4. 字符串运算

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

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

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

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

三. 列表渲染

1. wx:for

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

itemwx:for-item

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

indexwx:for-index

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

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

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

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>

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

3. wx:key

提高效率使用的

四. 条件渲染

1. wx:if

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

wx:if="{{condition}}"

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

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

也可以用 wx:elifwx:else 来添加一个 else 块:

wx:elifwx:else

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

<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 控制属性。

wx:if<block/>wx:if

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

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

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

注意:<block/>

2. hidden

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

hidden始终会被渲染只是简单的控制显示与隐藏

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

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

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

wx:if

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

hiddenwx:if

五.特殊标签

1.text

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

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

2.view

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

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

3.block

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

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

4. image

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

image组件默认宽度320px、高度240px

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

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

mode 有效值:

mode 有效值:

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

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

5, swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

默认宽度 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 是否采用衔接滑动
属性名 类型 默认值 说明 属性名 类型 默认值 说明 属性名 类型 默认值 说明 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 是否采用衔接滑动 indicator-dots Boolean false 是否显示面板指示点 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 indicator-active-color Color #000000 当前选中的指示点颜色 indicator-active-color Color #000000 当前选中的指示点颜色 autoplay Boolean false 是否自动切换 autoplay Boolean false 是否自动切换 interval Number 5000 自动切换时间间隔 interval Number 5000 自动切换时间间隔 circular Boolean false 是否采用衔接滑动 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 是否静音播放
属性名 类型 默认值 说明 属性名 类型 默认值 说明 属性名 类型 默认值 说明 src String 要播放视频的资源地址,支持云文件ID(2.2.3起) duration Number 指定视频时长 controls Boolean true 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) autoplay Boolean false 是否自动播放 loop Boolean false 是否循环播放 muted Boolean false 是否静音播放 src String 要播放视频的资源地址,支持云文件ID(2.2.3起) src String 要播放视频的资源地址,支持云文件ID(2.2.3起) duration Number 指定视频时长 duration Number 指定视频时长 controls Boolean true 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) controls Boolean true 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) autoplay Boolean false 是否自动播放 autoplay Boolean false 是否自动播放 loop Boolean false 是否循环播放 loop Boolean false 是否循环播放 muted Boolean false 是否静音播放 muted Boolean false 是否静音播放
<video src="{{src}}" controls></video>

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

» 本文来自:前端开发者 » 《微信小程序前端页面书写_輕微_前端开发者》
» 本文链接地址:https://www.rokub.com/73329.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!