小程序学习之小程序框架--视图层

最新推荐文章于 2023-11-22 15:51:01 发布

baked_donut

最新推荐文章于 2023-11-22 15:51:01 发布

阅读量306

点赞数

分类专栏：微信小程序

微信小程序专栏收录该内容

32 篇文章 4 订阅

订阅专栏

1.wxml

1）数据绑定

简单绑定 {{变量名}}形式
组件属性绑定 eg：<view id='{{id}}'>hello</view>
控制属性绑定 eg：<view wx:if='{{condition}}'></view>
关键字绑定在引号内写布尔值也必须用双花括号括起来否则会被认为是字符串转换为布尔值以后表示true
运算绑定花括号内可以进行简单运算，支持三元运算、算术运算、逻辑判断、字符串运算、数据路径运算
组合绑定在双花括号内直接进行变量和值的组合，构成新的对象或数组

ps：也可以使用"..."符号将对象内容展开显示

<!--wxml页面代码-->
<template is="test" data="{{...student,gender:2}}"></tenplate>

//JS代码
Page({
  data:{
    student: {
      stuID: '123',
      stuName: '张三'
     }
  }
})

//结果：stuID:'123',stuName:'张三',gender:2

元素key和value名称相同时，可以省略表达。存在相同key名称，后者会覆盖前者内容。如下：

2）列表渲染

简单列表使用wx:for绑定一个数组，用数据中的每个元素依次渲染该组件，形成批量效果
嵌套列表 wx:for嵌套出现，如九九乘法口诀表的例子
多节点列表将wx:for用在<block>标签上以渲染一个包含多节点的结构块
wx:key属性如果列表中项目位置会动态改变或者有新项目添加到列表中，可能导致列表乱序，可用此属性指定列表中的项目唯一标识符。两种形式提供：

ps：当数据改变导致页面被重新渲染时会自动校正带有key的组件，以确保项目被正确排序，并且提高列表渲染时的效率

3）条件渲染

简单条件 wx:if="{{condition}}"判断是否需要渲染该代码块
多节点条件一次性判断多个组件标签，可用<block>标签将多个组件包装起来
wx:if与hidden 属性对比如下

ps：如果需要频繁切换组件，用hidden更好；如果运行时条件很少改变，用wx:if更好

4）模板(template)

定义代码片段，后在不同页面被重复调用

定义模板

<template name="myTemp">
 <view>
    <text>Name:{{name}}</text>
    <text>Age:{{age}}</text>
 </view>
</template>

使用模板

在新的wxml页面继续使用template标签可引用模板内容，引用的时候必须带有is属性，用来指定正确的模板名称才能成功引用，使用data属性将模板所需要的数据值引入。

<!--wxml-->
<template is="myTemp" data="{{...student}}"></template>

//JS文件代码
Page({
    data:{
      student:{
        name:'张三',
        age: 20
      }
   }
})

5）事件

从视图层到逻辑层的通信方式