微信小程序——学习心得一

一、模板：
①定义模板
1.在 内定义代码片段，使用name作为唯一标识属性，作为模板的名称；

在实践操作中自己的问题在于容易忽视掉必要的{{}}括号和个别语句的架构问题，经过对语言的校对和修改慢慢可以改正错误，逐渐熟练。

示例如：

<template name = " chengxu" />
<view>
<text>{{ index }} : {{ cheng }} </text>
<text> Time : {{ time }} </text>
</view>
</template>

②.在WXML文件里，使用is属性，声明需要使用的模板名称；再将模板所需要的date数据传入
示例如：

<template is = " chengxu" date = "{{ item }}"/>
Page({
date : {
item:{
index : 0,
cheng : '这是小程序模板',
time : '2020-02-18'
}
}
})
</template>

is属性 可以使用三元运算，来动态决定要渲染哪一个模板
示例如：

<template name = " chengxu1" />
<view>单数</view>
<template name = " chengxu2" />
<view>双数</view>
<block wx:for = "{{1,2,3,4,5,6}}">
<template is = "{{ item % 2 == 0 ? 'chengxu1' : 'chengxu2'}}">
</block>

二、引用
WXML提供两种引用方式 import 和 include
两者的区别：import引用的是模板文件
include引用的是除了 template 标签下之外的所有文件

1. import 引用
   ①import可以在此文件中使用目标文件所定义的 template ;
   例如在 item.wxml 中定义了一个模板名称叫 first 的 template ；
   示例如：

<!--item.wxml-->
<template name = "first">
<text>{{text}}</text>
</template>

接下来在item.wxml中来引用index。wxml
示例如：

<import src = "item.wxml">
<template is = "first" date = "{{text:'import的引用'}}"/>

2.include引用
①include可以将除了 template 的目标文件整体代入，这其实相当于市复制到 include 位置
示例如：

<!--index.wxml-->
<include src = "header.wxml"/>
<view>页面主要内容</view>
<include src = "footer.wxml"/>
<!--header.wxml>
<view>头部文件</view>
<!--footer.wxml-->
<view>尾部文件</view>

三、数据绑定
1.组件属性绑定：它是将data里的数据绑定到微信小程序的组件上
示例如：

//wxml
<view id = "item-{{num}}"></view>
//js
Page({
data:{
num:0
}
})

2.控制属性绑定：用来进行if语句的条件判断
示例如：

//wxml
<view wx:if = "{{demo}}"> </view>
//js
Page({
data:{
demo:true
}
})

3.关键字绑定：例如复选框组件，checked关键字如果等于true，则表示复选框被选中；如果等于false，则表示不选中复选框；
示例如：

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

在这里有一个需要注意的问题是，checkbox 中不能直接写成 checked = “false” ，这个表达式的计算结果是一个字符串。

4.微信小程序支持的几种运算：三元运算，数学运算，逻辑运算，逻辑判断，字符串运算，数据路径运算。

5.列表渲染：
①wx : for 列表渲染单个组件
在组件中使用它时绑定一个数组就可以使用这个数组中的各项的数据重复渲染这个组件了；默认情况下数组的下标变量名为index，变量名为item
②block wx ：for 列表渲染多个组件
想渲染包含多节点的结构块，需要 wx : for 应用在 block 标签中
③wx : key 指定唯一标识符
列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态时用它来指定列表项目的唯一标识符

• 点赞
• 收藏
• 分享
• 文章举报