微信小程序开发页面介绍

可视化界面

目录树

page文件

对页面内容的操作
其分为index和logs两个文件

index文件

即首页文件
在里面添加字段会直接显示到模拟器中

logs文件

utils文件

存放公共文件，修改时间戳等

app.js

入口文件，即逻辑层（实现交互等内容）

app.json

配置文件，全局配置，包括小程序的路径，界面表现，网络延迟等

app.wxss

样式文件，设置颜色等……
比如在这里添加了color：red

模拟器中字体颜色就改成了红色
但其优先级不如在index文件中的.wxss文件
这个是公共样式，index.wxss文件是基础样式

project.config.json

整个项目配置文件，可以在本地设置中进行可视化修改，基本不用在代码中修改

sitemap.json

地图，即文件的地址

正式编写

几乎所有内容都是在index文件目录下编写的

清空原有的wxml 和 wxss
正式写入第一个程序

在同目录下的wxss中可以设置其格式

创建新文件夹

小程序不可能只有一个页面，当需要行的页面时可以有两种创建方式

逐个创建

右击pages文件，可以选择“新建文件夹”

但这个文件夹是空的，还需要右击新建的文件夹，创建page文件（最好和文件名保持一致）

这样一套页面的基础文件就建好了（js文件实现交互功能，json文件是全局配置，wxml文件是页面内容，wxss是内容颜色风格配置）

通过地址直接创建

打开app.json文件，这里可以看到当前所有页面文件的地址

在这里直接输入想要创建的文件夹及page文件（一定要在最后一行创建文件，否则会报错）

Ctrl+S保存后虽然没有在模拟器直接显示，但目录树已经存在此文件

想要显示？，直接移到最上端即可

如果还是不明显，打开创建后的文件中wxml文件，敲一行view标签，保存后即可显示