小程序的文件类型
- WXML(页面的结构,类似于HTML)
- WXSS(页面的表现,类似于CSS)
- JS(行为,就是原生的JavaScript)
一个标准小程序项目的页面的目录:
主目录下面有有pages目录和utils目录。pages目录下面是index目录和logs目录
一个一个了解,我们先来看看index目录下面有什么:
index目录下面就是一个index页面(一般为主页面)及其相关的配置文件,另外一个目录logs就是日志页面及其相关的配置文件,这两个目录文件是初始化时就存在的了。
我们可以看到在index目录下有四个文件(logs目录下也有),wxml、wxss、js以及一个json文件,前三个文件就是前端的标准搭配(html+css+JavaScript),而最后那个json文件是用于小程序的页面配置的
既然微信小程序吧html和css的名字都改成了wxml和wxss,那么肯定是有所区别的,我们来看看改后有什么不同:
.wxml:
-标签:HTML中的所有的<div><p><span>…全部都变为一个标签<view>,只使用一个 <view>标签降低了小程序的开发难度
-改了一些语法:添加了 wx:if、wx:for、{{}},为什么要添加这些语法呢,我们知道在html中,我们会在页面中加入一些js代码来引起页面的变化响应用户的行为,但是小程序不主张使用js来控制页面的变化,所有定制了一些语法,使得js逻辑和页面逻辑分离
.wxss
-具备css大部分的属性
-新增尺寸单位,小程序运行在移动端,移动端的屏幕千变万化,所以要引入新的尺寸单位来统一不同尺寸页面的差异
.js
就是原生的JavaScript
最后是关于.json文件
.json:
-工具层面配置:project.config.json(对微信开发工具的配置)
-项目层面配置:app.json(对项目的总体配置)
-页面层面配置:<page name>.json(细分到每个页面的配置)
小程序目录说明
- pages目录:存放页面相关代码
- utils目录:存放工具相关的代码
- 其他文件目录:thisparty目录(第三方代码),components目录(存放组件代码),resource目录(存放资源文件,图标等)
小程序全局入口配置与样式
- 全局入口:app.js
- 全局配置:app.json
- 全局样式:app.wxss
可以自己看一看这三个文件的内容
总结:了解小程序的文件类型、目录和全局相关文件