小程序基本元素,wxml

一、初介绍

    .
    ├── app.js     # 小程序的逻辑文件 入口文件调用App()函数启动
    ├── app.json   # 小程序的全局配置文件 （"Pages"数组:记录所有页面的路径）
    ├── app.wxss   # 全局公共样式文件
    ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    │   └── logs   # logs页面
    │       ├── logs.js      # 页面逻辑
    │       ├── logs.json    # 页面配置
    │       ├── logs.wxml    # 页面结构
    │       └── logs.wxss    # 页面样式表
    ├── project.config.json
    └── utils //存工具性质
        └── util.js

二、详细介绍

app.json包括：1、"pages"数组：记录所有页面的路径。 2、"window"定义所有页面背景色 。3、"style"：样式版本 4、"sitemaplocation"：指明sitemmap.json位置

app.js：是小程序项目入口文件，调用App()启动 

wxml模板：构建页面结构   wxss：描述wxml组件样式

渲染层：wxml，wxss  事件  逻辑层： .js

三、 WXML模板：

1、数据绑定：Mustache语法：

把data中的数据渲染到页面中用Mustache语法即可：{{  }}（插值表达式）

<view>{{ }}<view>

2、事件绑定

事件是渲染层到逻辑层的通讯方式

当事件回调触发的时候可以通过event.属性

1）在数据处理函数中为data赋新值

 2）事件传参

 通过e.target.dataset.info可以调用到info的值

3）、bindinput语法格式

 4）、实现文本框和data之间的数据同步

（1）、定义数据

 （2）、渲染结构

 （3）、绑定input事件处理函数

 3、条件渲染

1)、wx:if

 wx:if结合block（起到包裹作用）

 2）、hidden

 4、列表渲染

1）、wx:for

 编译结果为：索引是：0 当前项是：苹果                                                                                                                 索引是：1 当前项是：华为 

2）、wx:key