WXML

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

一个微信小程序就是由以上几个部分组成的。对于前端开发人肯定都知道。在前端中存
在 html 、 css 、 js ，其实就分别对应的是小程序中的 wxml 、 wxss 、 js 文件。其中小程序中的 wxml 中的标签和语法，稍微和 html 有点不一样。 wxss 语法采用的都是大部分的 css 语法，并且增加了导入的功能。

数据绑定

在很多时候，view其实就是span标签的意思。下面就是小程序中的Hello world

但是小程序中的数据一般情况下需要动态的从服务端获取,然后再道染输出到视图中显示。
WXML中的动态数据均来自对应Page的data。数据绑定使用 Mustache语法(双大括号)将变量包起来。

其实双大括号就是Django的模板变量，总而言之一句话：需要使用js中传过来的值，就必须使用双大花括号。

WXML基本语法

WXML的语法，和一些模板语法比如Django中的模板语法非常的类似。其实就是条件渲染，列表渲染。

1.   在指定的标签中使用 wx:if="条件" ，如果条件成立，则会渲染这个标签。示例代码如下：<view wx:if="{{age > 18}}">      进入网吧</view>
2.  else 和 elif 可以直接在 if 下面使用。示例代码如下：<view wx:if="{{weather == '晴天'}}">      出去旅游</view><view wx:elif="{{weather == '阴天'}}">      去逛街</view><view wx:else>      哪里都不去</view>
注意：elif和else只能跟在if后面，否则会报错
3.  如果需要通过条件来判断是否需要渲染一组标签，那么可以使用 block 。示例代码如下：<block wx:if="{{weather == '晴天'}}"><view>          出去旅游</view></block><block wx:elif="{{weather == '阴天'}}"><view>          去逛街</view></block><block wx:else><view>哪里都不去</view></block>

列表渲染：

1.   通过语法 wx:for="{{列表}}" 来渲染一个列表。示例代码如下：<view wx:for="{{[1,2,3,4]}}">{{item}}    </view>
2.  循环中，默认的下标名称是 index ，默认的值的名称是 item 。如果想要修改循环列表的值和下标的名称，那
么可以通过 wx:for-index 和 wx:for-item 来指定。示例代码如下：<view wx:for="{{[1,2,3,4]}}" wx:for-index='idx' wx:for-item="value">{{index}}/{{value}}    </view>

这里会报Now you can provide attr wx:keyfor a wx:for to improve performance.，无视即可。

下面代码是一个九九乘法表
`

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view>
</view>

具体使用参考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

系统组件

下面补充下小程序的系统组件，下一篇继续复习。

视图容器：cover-image、cover-view、movable-area、movable-view、scroll-view、swiper、swiper-item、view
基础内容：icon、progress、rich-text、text
表单组件：button、checkbox、checkbox-group、editor、form、input、label、picker、picker-view、picker-view-column、radio、radio-group、slider、switch、textarea
导航：functional-page-navigator、navigator
媒体组件：audio、camera、image、live-player、live-pusher、video
地图：map•画布：canvas
开放能力：ad、official-account、open-data、web-view
原生组件说明：native-component
无障碍访问：aria-component
导航栏：navigation-bar
页面属性配置节点：page-meta

具体使用参考：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

四十七、微信小程序开发页面结构WXML相关推荐

微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
微信小程序开发---页面生命周期
微信小程序开发---生命周期何为生命周期小程序全局[app.js]---生命周期小程序页面[pages/pagename.js]---生命周期何为生命周期生命周期是指一个事物从创建到销毁的一 ...
微信小程序开发页面总结-文档(ing)
公共样式定义 /* 公共样式 */ page{height: 100%;background: #f7f7f7; } view,image,input,text,button,textarea {bo ...
微信小程序开发页面无法显示，未注册报错
微信小程序开发 VM507 WAService.js:2 Page "pages/post/post" has not been registered yet 在对应的js文件中检 ...
微信小程序开发-页面跳转的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个 ...
四十九、微信小程序开发页面样式WXSS和页面交互JS
@Author:Runsen 一天不写博客,混身不爽.今天继续复习小程序中的WXSS和JS. 文章目录 WXSS JS WXSS WXSS(WeiXin Style Sheets)是一套样式语言,用于 ...
微信小程序开发教程：wxml
wxml与html的区别 wxss与css的区别数据绑定基本原则在data中定义数据在wxml中使用数据 Mustache语法应用场景绑定内容(见上图实例) 绑定属性运算(三元运算.算术运算 ...
微信小程序开发教程：项目四组件布局课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简单地介绍微信小程序flex布局的使用. 2.如何 ...

四十七、微信小程序开发页面结构WXML

文章目录

WXML

数据绑定

WXML基本语法

系统组件

四十七、微信小程序开发页面结构WXML相关推荐

最新文章

热门文章