微信小程序项目文件介绍

微信小程序项目文件介绍,微信小程序在快速创建的时候就提供了一个简单的Demo项目,项目文件结构如图所示。
微信小程序项目文件介绍

微信团队为微信小程序的文件创建了单独的后缀类型:.wxml.wxss。这两种文件后缀只有微信小程序能够识别,但是这两种文件又分别与网页中的.html.css文件对应,并且使用方法也几乎一致。在以.js.json为后缀的文件中,微信团队并没有对其做后缀的更改,与网页中的文件后缀一致。在微信小程序中,代码文件就是这四种,并且每一个独立的页面都拥有这四个文件(.wxml、.wxss、.js、.json)。同一个页面,这四个文件的文件名必须相同,微信团队在内部对这四个文件进行了关联,并且每一个页面都有其独立的作用域。因为微信小程序运行在微信应用的内核中,如果用浏览器打开的话,会无法解析,所以微信小程序只能运行在微信应用中。

.wxml后缀的结构文件

.wxml文件是微信团队自创的一种文件格式,这个文件的功能与网页端的.html文件的功能是一样的,都是用来存放页面上的组件、元素的。不同的地方是微信小程序的.wxml文件不能存放JavaScript代码,并且没有头和体的概念,只能存放组件和行内CSS样式。

.wxss后缀的样式文件

.wxss文件是微信团队自创的一种文件格式,这个文件的功能与网页端的.css文件的功能是一样的,都是用来设置元素样式的。而且,网页的布局、元素、属性、选择器等都与网页端的.css文件一致,也就是说,完全可以将网页的布局和选择器用于微信小程序的布局和选择器,且两者的布局和选择器可以互用。

app.wxss文件是一个外链的样式文件,可以不必在其他文件中单独引入而直接作用其样式,对应的样式级别也是最低的,一般用来存放全局的公共样式。

.js后缀的逻辑文件

.js文件书写业务逻辑代码,单击、滑动、上下拉刷新等事件执行代码。.js文件用JavaScript代码书写,遵从JavaScript语法和规范。

官方在JavaScript的基础上增加了一些封装,例如APP({})Page({})等,还提供了丰富的API,如图片选择、扫一扫等,使得微信小程序开发起来更加简单、方便。

app.js文件是比较特殊的,它是微信小程序的入口文件,掌控整个小程序的生命周期,同时有一些全局的属性、变量也存放在这个文件中。

.json后缀的配置文件

.json是一种数据格式,微信小程序单独把.json数据拿出来,根据定义的.json数据字段来创建不同的页面样式效果。

app.json文件是小程序的公共配置文件,决定了可以加载的页面、导航栏样式、网络超时时间等配置信息。

在微信小程序中有一个特殊的.json文件,即project.config.json,这个文件是整个微信小程序的配置文件,整个项目的一些配置信息都存放在这个文件夹中。当在微信开发工具中进行配置修改时,这个文件内对应的值也会进行修改,并且在一个项目目录下,只能存在一个project.config.json文件,这也是为什么强调同一个目录下最好只有一个项目,以防project.config.json文件冲突。

项目结构推荐配置

微信团队提供的Demo的文件目录分得非常清晰,页面单独存放在pages文件夹下,然后每一个页面单独创建一个文件夹,里面的四个文件的文件名与文件夹名称一致。把用到的一些第三方插件工具等放入utils文件夹中,如果要使用图片的话,还可以单独创建一个images文件夹,把使用到的图片放在images文件夹中。

全局的文件app.js、app.json、app.wxss、project.config.json文件单独放在项目文件夹中即可,注意这几个文件是不可以更改文件名的,并且是唯一的。如图所示。
微信小程序项目文件介绍

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!