微信小程序前端页面书写

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:elifwx: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>

微信小程序前端页面书写的更多相关文章

  1. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  2. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  3. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  4. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  5. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  6. 图解微信小程序---实现页面的跳转与返回操作

    图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...

  7. 微信小程序前端与myeclipse的数据交换过程(SSH)

    这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...

  8. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 微信小程序,前端大梦想(一)

    小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...

随机推荐

  1. 洛谷 P1525 关押罪犯 NOIp2010提高组 (贪心+并查集)

    题目链接:https://www.luogu.org/problemnew/show/P1525 题目分析 通过分析,我们可以知道,这道题的抽象意义就是把一个带边权的无向图,分成两个点集,使得两个集合 ...

  2. Java反序列化漏洞原理解析(案例未完善后续补充)

    序列化与反序列化 序列化用途:方便于对象在网络中的传输和存储 java的反序列化 序列化就是将对象转换为流,利于储存和传输的格式 反序列化与序列化相反,将流转换为对象 例如:json序列化.XML序列 ...

  3. xml文档的解析并通过工具类实现java实体类的映射:XML工具-XmlUtil

    若有疑问,可以联系我本人微信:Y1141100952 声明:本文章为原稿,转载必须说明 本文章地址,否则一旦发现,必追究法律责任 1:本文章显示通过 XML工具-XmlUtil工具实现解析soap报文 ...

  4. 遇到XML-GB2312网页编码的处理方法

    报的错误:encoding error : input conversion failed due to input error, bytes  I/O error : encoder error 1 ...

  5. 为什么Kubernetes使用Pod作为最小调度单元

    一.Pod说明 Pod只是一个逻辑概念,一个原子调度单位,其优势在于 可以统一调度一组容器到指定的node上 共享资源,Pod的容器可以使用localhost进行通信,使用volume进行文件共享.使 ...

  6. Spring Boot 多站点利用 Redis 实现 Session 共享

    如何在不同站点(web服务进程)之间共享会话 Session 呢,原理很简单,就是把这个 Session 独立存储在一个地方,所有的站点都从这个地方读取 Session. 通常我们使用 Redis 来 ...

  7. Day 25 网络基础2

    ip地址划分 ip地址由32位二进制组成. 什么是二进制?0101 10进制 0-9 10 2进制 0-1 10 二进制1100 ==1X2^3+1X2^2+0X2^1+0X2^0 =12 十进制15 ...

  8. 37 (OC)* 类别的作用

    问题: OC中类别(Category)是什么?Category类别是Objective-C语言中提供的一个灵活的类扩展机制.类别用于在不获悉.不改变原来代码的情况下往一个已经存在的类中添加新的方法,只 ...

  9. [VB.NET Tips]程序的启动和终止

    当执行一个VB.NET应用程序时,CLR会把IL翻译成x86指令,并且寻找一个名为Main的方法. 并从该方法开始执行程序.Main方法也称为程序的"入口"(entry point ...

  10. Vue学习之vue中的v-if,v-show,v-for

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...