标签：07 name wxml 微信 如下 person demo01 模板 wx
目录WXML,WeiXin Markup Language是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构.
首先简单介绍两个基本的标签<text>,<view>,对应HTML就是<span>,<div>
编辑demo01/demo01.wxml代码如下
<!--pages/demo01/demo01.wxml-->
<text>pages/demo01/demo01.wxml</text>
<!--
text 相当于 span, 行内元素,不会换行
view 相当于 div, 块级元素,会换行
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
显示效果如下:
数据绑定
普通写法
编辑demo01/demo01.wxml代码如下
<view> {{ message }} </view>
编辑demo01/demo01.js代码如下
Page({
data:{
message:"Hello World!"
}
})
显示效果如下
总结如下:
(1)在page.wxml中使用{{ 变量名 }}来进行变量的引用.
(2)在page.js中的data属性中进行变量值的定义.
常见的JavaScript变量类型都是支持的,下面进行一个演示
编辑demo01/demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
message: "Hello World!",// 字符串类型
num: 1000, // 数字类型
ischecked: false, // 布尔类型
person:{ // 对象类型
age:74,
height:145,
weight:200,
name:"张三"
}
},
...
})
编辑demo01/demo01.wxml代码如下
<view>{{message}}</view>
<view>{{num}}</view>
<view>{{ischecked}}</view>
<view>{{person}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
显示效果如下
组件属性
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
bool类型
不要直接写checked="false",其计算结果是一个字符串
<checkbox checked="{{false}}">篮球</checkbox>
注意:在属性中使用变量,双引号和大括号不能分开,要紧挨着
正确:
<checkbox checked="{{false}}">篮球</checkbox>
错误:
<checkbox checked=" {{false}}">篮球</checkbox>
完整的demo01.wxml代码如下
<!-- 数据绑定 -->
<view>{{message}}</view>
<view>{{num}}</view>
<view>{{ischecked}}</view>
<view>{{person}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<view id="item-{{id}}"></view>
<checkbox checked="{{ischecked}}">帥哥</checkbox>
完整的demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
message: "Hello World!",// 字符串类型
num: 1000, // 数字类型
ischecked: true, // 布尔类型
person:{ // 对象类型
age:74,
height:145,
weight:200,
name:"张三"
},
id:0
},
})
显示效果如下
运算
小程序中常见的运算有
(1) 三元运算
(2) 算术运算
(3) 逻辑判断
(4) 字符串相加
三元运算
编辑demo01/demo01.wxml代码如下
<view hidden="{{flag?true:false}}">Hidden</view>
<view>{{gender?"男":"女"}}</view>
编辑demo01/demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
...
gender:false,
flag:true
},
...
)}
显示效果如下
算数运算
编辑demo01/demo01.wxml代码如下
<view>{{a+b}} + {{c}} + d</view>
编辑demo01/demo01.js代码如下
Page({
/**
* 页面的初始数据
*/
data: {
...
a:1,
b:2,
c:3
},
...
)}
显示效果如下:
逻辑判断
编辑demo01/demo01.wxml代码如下
<view wx:if="{{length > 5}}"></view>
字符串运算
编辑demo01/demo01.wxml代码如下
<view>{{"hello" + person.name}}</view>
显示效果如下:
列表渲染
wx:for
项的变量名默认为item,wx:for-item可以指定数组当前元素的变量名
下标变量名默认为index,wx:for-index可以指定数组当前下标的变量
wx:key用来提高数组的渲染性能.
关于wx:key绑定的值,有如下选择
(1) string类型,表示循环项中的唯一属性,一般使用id
list:[
{id:0,name:"张三"},
{id:1,name:"李四"},
]
wx:key="id"
(2) 保留字*this,它的意思是item本身,*this代表必须是唯一的字符串和数组.(就是普通的数组或者字符串数组)
[1,2,3,4]
["1","2","3","4"]
wx:key="*this"
如果没有指定wx:key会在控制台有警告信息出现
编辑demo01/demo01.js的如下
Page({
data: {
person:{ // 对象类型
age:74,
height:145,
weight:200,
name:"张三"
},
list:[
{
id:0,
name:"张三"
},
{
id:1,
name:"李四"
},
{
id:2,
name:"王五"
}
]
},
...
})
编辑demo01/demo01.wxml代码如下
<!-- wx:for -->
<!-- 1. 遍历数组 -->
<view wx:for="{{list}}" wx:key="id">
<view>index:{{index}} item:{{item.name}}</view>
</view>
<view >==========</view>
<!-- 2. 遍历对象 -->
<view wx:for="{{person}}">
<view>index:{{index}} item:{{item}}</view>
</view>
显示效果如下
block
渲染一个包含多节点的结构块block,最终不会变成真正的dom元素
block就类似一个占位符,
<block wx:for="{{[1,2,3]}}" wx:key="*this">
{{item}}
<block>
条件渲染
wx:if
在框架中,使用wx:if="{{条件}}"来判断是否需要渲染该代码块.
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
hidden
hidden="{{条件}}",这是通过样式来进行隐藏的.
wx:if 和 hidden 的差别?
wx:if如果为false,那么是直接就是剔除该标签,不会进行渲染.
hidden只是通过修改样式来实现隐藏标签的目的.
编辑demo01/demo01.wxml代码如下
<!-- 条件渲染 -->
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
<view hidden="{{false}}">hidden</view>
显示效果如下
标签：07,name,wxml,微信,如下,person,demo01,模板,wx 来源： https://www.cnblogs.com/Rowry/p/14288308.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。