微信小程序（JSON配置文件、WXML模板文件一）

【前言】2019.11.13
【内容】

新建页面page
（1）手动创建
①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”
②右键单击新建的目录，在弹出的菜单中选择“新建Page”

（2）自动创建
直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件

删除页面page
手动删除
鼠标右键单击需要删除的页面文件夹，在弹出的菜单中选择“删除”

配置文件
后缀：.json，文件格式遵循JSON语法规范
作用：对微信小程序进行全局配置，设置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 切换页等
分类：小程序全局配置文件app.json和页面配置文件page.json

小程序/全局配置文件------>pages属性
作用：用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
注意：数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都会对 pages 数组自动进行修改。

页面配置文件page.json
作用：对本页面的窗口表现进行配置，文件内容本质为一个 JSON 对象
场景：如果整个小程序的风格是蓝色调，那么在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此小程序提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。
简单理解：就是对单个小程序页面的配置，可以覆盖全局配置app.json。
特性：覆盖性，即每一个小程序页面可以使用同名 .json 文件来对本页面的窗口表现进行配置，但页面中配置项会覆盖 app.json 的 window 中相同的配置项。

接下来介绍下页面page配置文件
配置项属性—navigationStyle导航栏样式
注意：
①最低版本要求：微信客户端 7.0.0），客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效
②图片存储：本地图片过大会有限制提示，一般本地只存项目所用图标即可，如果是大图片，在开发里可以用链接指向图片位置。

接下来介绍下页面page配置文件—小结
注意：
①页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性；
②usingComponents为页面自定义组件配置，非必填项，数据类型为对象Object，以后涉及到再详细介绍。

根元素page
每一个页面都具备一个根元素：
页面根元素可以在控制台的WXML选项卡中看到
允许在wxss文件中对page根元素进行样式设置

全称：
WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言

对比：
网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。wxss–→css

WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似

标签：
一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句，这一点上同 HTML 是一致的

标签名不一致
HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。
小程序的 WXML 用的标签是 view, button, text ,map等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。

属性不一致
属性：WXML多出wx:if、wx:for等一些属性及表达式
在网页的一般开发流程中，通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。
MVVM模式：用户点击某个按钮的时候，可以通过JS操作DOM。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。

属性不一致
MVVM模式：简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路，例如数据绑定案例。

数据data初始化：
①页面需要显示动态数据必须要定义到data对应的变量中；
②如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData({属性名：属性值})
③获取data数据语法为this.data.属性名

数据

数据的定义：data选项里—键值对
数据操作：this.setData({})
数据获取：this.data.属性名

视图容器标签
先介绍最基础的一个容器标签
功能：基本视图容器，类似于页面开发时的

标签

文本标签

功能：基本文本信息，类似于 标签

数据绑定：
通过Mustache 即双大括号{{}}语法把变量绑定到界面上，称为数据绑定。

属性：
仅仅通过数据绑定还不够完整描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

接下来介绍下WXML属性