创建新页面

创建一个新页面

(1) 手动创建

①右键单击【】文件夹，在弹出的菜单中选择“新建目录”

②右键单击新建的目录，在弹出的菜单中选择“新建页面”

(2)自动创建

直接在app.json文件的中写入新页面的路径，系统会自动创建对应的四个文件：page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js文件。 js逻辑文件。

删除页面

手动删除：

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

配置文件

后缀：.json，文件格式遵循JSON语法规范

功能：全局配置微信小程序，设置页面文件的路径、窗口性能、设置网络超时、设置多标签切换页面等。

类别：小程序全局配置文件app.json和页面配置文件page.json

小程序配置文件app.json

小程序配置文件

小程序/全局配置文件

小程序根目录下的app.json文件用于全局配置微信小程序。

文件内容本质上是一个 JSON 对象。

小程序/全局配置文件------>属性

功能：用于指定小程序由哪些页面组成。每一项对应一个页面的路径（包括文件名）信息。文件名中不需要写入文件后缀。框架会自动在对应位置查找.json、.js、.wxml、.wxss这四个文件进行处理。

注：数组第一项代表小程序的初始页面（主页）。小程序增减页面时，数组会自动修改。

例如开发目录为：

小程序/全局配置文件------>属性

功能：用于设置小程序的状态栏、导航栏、标题、窗口背景颜色

小程序/全局配置文件------>属性~下拉刷新

(1)新建一个空白页面，如主页。构建完成后，你会发现home.js文件中已经写好了各个阶段的钩子函数。

经过观察，发现了下拉功能，在这里添加验证码，输出验证。

(2)下拉无效

但是下拉之后发现无法触发js回调，因为下拉功能需要配置支持下拉功能，即h设置为true。

(3)下拉样式

之前我们知道，可以在app.json中全局配置，让所有页面都有下拉刷新功能；也可以在需要下拉刷新功能的页面对应的json中进行配置。

还有一点不完美。当你下拉刷新别人的小程序时，可以看到顶部有一个三个点的闪烁动画，但此时小程序顶部是空白的。

(4) 窗口背景颜色

因为背景是白色的，所以由于颜色的原因看不到三个点闪烁的动画，所以背景需要配置如下：

(5) 风格

之前设置的下拉样式是光点。接下来可以将其改为暗黑点进行体验。

(6)真机下拉bug

经过前面的步骤，在模拟器中可以实现下拉效果，但真机测试后很容易缩不回。这种情况下，可以在下拉监听事件中添加手动撤销代码。

解决方案：微信小程序也提供了停止下拉刷新效果的API。如果发现无法停止刷新状态，可以使用wx.这个API

小程序/全局配置文件------>属性

功能：指定.json的位置；默认为 '.json'，即与 app.json 在同一目录中命名的 .json 文件

.json是小程序中包含的设置文件。默认情况下，所有页面都可以建立索引。一般开发时不需要进行相关配置。

概括：

① ：描述当前小程序所有页面的路径，以便微信客户端知道当前小程序页面定义在哪个目录下。

②字段：小程序的状态栏、导航栏、标题、窗口背景色

③字段：指定小程序包含的设置文件.json的位置

页面配置文件page.json

案例：例如logs.json

页面配置文件page.json

功能：配置该页面的窗口性能。文件内容本质上是一个 JSON 对象。

场景：如果整个小程序的风格是蓝色，那么在app.json中声明顶部颜色为蓝色。实际情况可能并非如此。也许你的小程序中的每个页面都有不同的色调来区分不同的功能模块。因此，小程序提供了page.json，以便开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等。

简单理解：就是单个小程序页面的配置，可以覆盖全局配置app.json。

特点：覆盖性，即每个小程序页面都可以使用同名的.json文件来配置本页面的窗口性能，但页面中的配置项会覆盖app.json中的相同配置项。

常用配置项属性：

配置项属性 - 导航栏样式

注意：

①最低版本要求：微信客户端7.0.0），7.0.0以下客户端版本，仅在app.json中生效

②图片存储：如果本地图片过大，会有限制提示。一般情况下，本地只能存储项目中用到的图标。如果是大图片，开发时可以使用链接指向图片位置。

图片测试：

在根目录下新建一个文件夹，用于存放图片。这里存放的是图片01.jpg，大小为2.27MB。当您点击预览或上传时，会给出相应的警告。

配置项属性——页面滚动

原理：最外层元素设置为不可隐藏

注意：

①页面配置中只需设置app.json中对应的配置项即可决定该页面的窗口性能，因此无需编写该属性；

② 自定义页面的组件配置。这不是必需的。数据类型是对象。这个稍后会详细介绍。

json语法结构

（一）优势

① 简单易读：易于人们读写，通常无需特殊工具，即可读取和修改

②轻量级：是一种轻量级的数据交换格式

(2) 格式

JSON文件用大括号{}包裹起来，数据以key的形式表示-

（三）注意事项

json格式看起来和js对象表达式很相似，但又有所不同。

JSON 的 Key 必须用双引号括起来。在编写 JSON 时，一个常见的错误是忘记在 Key 值上添加双引号或写双引号而不是单引号。

(4) 数据格式限制

JSON值只能是以下数据格式：

任何其他格式都会触发错误，例如在 JS 中

(5)注释限制

注释不能在 JSON 文件中使用。添加注释会导致错误。

课堂总结

以上是小程序配置文件app.json和页面配置文件page.json的相关介绍。

别名：小程序配置也叫全局配置，页面配置也叫本地配置。

要点：

①覆盖：页面配置文件的相关设置会覆盖小程序配置文件中已有的配置。

②写法：只有在页面配置中设置app.json中对应的配置项才能决定本页面的窗口性能，所以不需要写这个属性

③JSON语法格式及相关限制

页面根元素

根元素页面

每个页面都有一个根元素：

页面根元素可以在控制台的WXML选项卡中看到

允许在 wxss 文件中设置页面根元素的样式

WXML 标签

姓名：

WXML的全称是WXML，是一种专为小程序框架设计的标签语言。

对比：

Web编程采用HTML+CSS+JS的组合，其中HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于处理页面与页面的交互。用户。

同样的道理，在小程序中也有同样的作用，其中WXML扮演着与HTML类似的角色。 wxss–→css

WXML 文件扩展名为 .wxml，语句的语法与 HTML 非常相似。