微信小程序-wxml笔记（更新中）

1.wx:key=“index"还是wx:key=”{{index}}"
wx:key=“index”，并且直接写等于没写，需要给循环的数组赋index属性。
至于wx:key=“{{index}}”，在清楚了wx:key值的两种形式后就会知道这种形式不应当存在。
wx:key的意义：如果列表中项目(item)的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用wx:key来指定列表中项目的唯一标识符。当数组改版触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
wx:key的值的两种形式：
-字符串，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。
-*this，代表在for循环中的item本身，需要item本身是一个唯一的字符串或者数字，如一个每个元素都不同的数字列表。
warning:如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

2.wx:for注意简化开发
4.1在wx:for所在的标签中，可以对item的内容进行wx:if的判断，因为重复渲染的是包括wx:for所在标签内的部分。
举例：wx:for="{{serviceList}}" wx:if="{{item.display==='1'}}"

3.数据绑定

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

WXML 中的动态数据均来自对应 Page 的 data
3.1简单绑定
双大括号{{}}
3.2组件属性、控制属性

<view id="item-{{id}}"> </view>组件属性

<view wx:if="{{condition}}"> </view>控制属性

3.3关键字
如boolean类型、int类型

<checkbox checked="{{false}}"> </checkbox>
<view wx:for="{{4}}"> </view>

不加双引号的写法，计算结果是字符串
3.4运算
三元运算、算数运算、逻辑判断，字符串运算：

<view>{{"hello" + name}}</view> name来自data

数据路径运算：支持选择对象属性、数组下标对应元素

<view>{{object.key}} {{array[0]}}</view>

3.5组合
可以直接在标签中组合，构成新的数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>...展开对象
<template is="objectCombine" data="{{foo, bar}}"></template>对foo和bar组成对象

wxml的一种拼装写法

<image src="{{mHost}}{{item}}" class="post_img"></image>

mHost内容固定，可以只将不一样的部分组成数组循环处理(item)

4.所有组件的公共属性

属性名	描述	注解
id	组件的唯一标示	保持整个页面唯一
class	组件的样式类	在对应的wxss中定义的样式类
style	组件的内联样式	可以动态设置的内联样式
hidden	组件是否显示	所有组件默认显示
data-*	自定义属性	组件上触发的事件，会发送给事件处理函数
bind/catch	组件的事件	详见事件

微信小程序-wxml笔记（更新中）相关推荐

微信小程序知识点汇总---更新中
微信公众平台是基于微信公众号,为微信用户提供服务的平台微信公众平台开发:是基于微信内进行的公众号业务开发: 前端程序员是公众平台开发的主力军平台登录地址:https://mp.weixin.qq ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
云开发（微信-小程序）笔记（五）----云函数，就这（上）
云开发(微信-小程序)笔记(四)---- 还有吗?再来点云函数云函数即在云端(服务器端)运行的函数.在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源:各云函数完全独立 ...
微信小程序开发-笔记
一.开发文件结构 1.根目录下有三个文件:app.js,app.json和app.wxss.一个小程序项目必须有的三个描述App的文件.这三个文件是应用程序级别的文件.这3个文件的意义: 表1.1 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）
云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址先去网站上http ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...

微信小程序-wxml笔记（更新中）

微信小程序-wxml笔记（更新中）相关推荐

最新文章

热门文章