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笔记(更新中)相关推荐

  1. 微信小程序知识点汇总---更新中

    微信公众平台 是基于微信公众号,为微信用户提供服务的平台 微信公众平台开发:是基于微信内进行的公众号业务开发: 前端程序员是公众平台开发的主力军 平台登录地址:https://mp.weixin.qq ...

  2. 微信小程序开发笔记 进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用

    文章目录 一.前言 二.onfire.js介绍 三.API介绍 四.实例应用 五.onfire源码 六.实例源码 一.前言 微信小程序开发笔记--导读 二.onfire.js介绍 一个简单实用的事件订 ...

  3. 微信小程序学习笔记(1)

    微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...

  4. 云开发(微信-小程序)笔记(五)----云函数,就这(上)

    云开发(微信-小程序)笔记(四)---- 还有吗?再来点 云函数 云函数即在云端(服务器端)运行的函数.在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源:各云函数完全独立 ...

  5. 微信小程序开发-笔记

    一.开发文件结构 1.根目录下有三个文件:app.js,app.json和app.wxss.一个小程序项目必须有的三个描述App的文件.这三个文件是应用程序级别的文件.这3个文件的意义: 表1.1  ...

  6. 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发

    一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...

  7. 云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)

    云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介 点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址 先去网站上http ...

  8. 微信小程序开发笔记二(WXSS和CSS样式美化)

    微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...

  9. 微信小程序开发笔记——wsdchong

    微信小程序开发笔记 一.小程序简介 小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...

最新文章

  1. memcacheq 服务安装与原理
  2. Google、Intel、Uber等巨头如何布局AI?听听他们自己人怎么说
  3. 特征重要性、特征集成+FeatureUnion、特征选择变换器+ColumnTransformer、标签特征变换+TransformedTargetRegressor、特征质量、自动学习数据中的特征
  4. 数据库分库分表(sharding)系列(三) 关于使用框架还是自主开发以及sharding实现层面的考量...
  5. Excel操作:导出到Excel并下载到web客户端
  6. 电脑文件里哪里能用计算机,电脑里的哪些无用文件是可以放心删除的?
  7. 内存总是不够?HBaseGeoMesa配置优化了解一下
  8. Java编译器调试不了_使用Maven设置Java编译器的-source和-target-不起作用
  9. eclipse package包 java类 有问号 无法读取的问题解决
  10. C++ 头文件使用规范建议
  11. Streaming源码解读 updateStateByKey-1
  12. 误删电脑配置信息还原
  13. MySQL联合主键保存_mysql联合主键
  14. 强化学习(一):简介——什么是强化学习?
  15. 从街机到抓娃娃机,硬币经济也将被移动支付取代?
  16. c语言双精度浮点数,使用C语言的十进制(浮点数,双精度)
  17. 【awk】awk 常用命令
  18. DNS和BIND总结
  19. 轻松去除微博图片logo的方法
  20. nexus私库中的releases与snapshots区分

热门文章

  1. 互联网巨头前沿科技产品一览
  2. CAD中运用CHAMFER命令的角度模式建立倒角的方式
  3. Web2.0的系统架构与六大关键问题
  4. 一个基于server酱推送服务的laravel package
  5. FTP上传文件提示550错误原因分析。
  6. 戴尔笔记本开机logo进度条时间长的解决办法
  7. C#使用公共语言拓展(CLE)调用Python3(使用TensorFlow训练的模型)
  8. 【Android】制作一个简易的画板
  9. 服务器硬盘选金盘好吗,硬盘怎么选?NAS 盘、监控盘、企业级盘区别?
  10. NUCC- Nets Union Clearning Corporation