微信小程序开发教程(3)- 小程序项目目录结构及页面构成详解
深山老妖浏览:2642024-11-19 09:11:29本文累计收益:0我也要赚钱

本节讲解小程序项目的基本构成,成功创建小程序后,默认项目结构如下图所示:

一、小程序项目结构介绍

从上面的图片可以看出,微信小程序项目目录,跟vue项目结构非常相似,下面具体介绍一下:

pages文件夹:用来存放所有小程序的页面
utils:用来存放工具性质的模块,(例如格式化时间的自定义模块)
app.js:小程序项目的入口文件。
app.json:小程序项目的全局配置文件
app.wsxx:小程序项目的全局样式配置文件
project.config.json:项目的配置文件
sitemap.json:用来配置小程序及其页面是否允许被微信索引。
 二、小程序页面组成部分

从上图pages文件夹中可以看出,index、logs页面都由4个文件组成,这说明微信小程序每个页面有4个文件组成。

.js文件:页面的脚本文件,存放页面的数据,事件处理函数等。
.json文件:当前页面的配置文件,配置窗口的外观、表现等
.wxml文件:页面的模板结构文件
.wxss文件:当前页面的样式表文件
 三、小程序中json配置文件介绍

Json是一种数据格式,在实际开发中,Json总是已配置文件的形式出现,小程序项目中也不例外:通过不同的.Json配置文件,可以对小程序项目进行不同级别的配置。

小程序项目中有4种json配置文件,分别是:

项目根目录中的app.json配置文件
项目根目录中的project.config.json配置文件
项目根目录中的sitemap.json配置文件
每个页面文件夹中的.json配置文件

(一)app.json文件详解

app.json文件是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

pages:记录小程序所有页面的路径

window:全局定义小程序所有页面的背景颜色、文字颜色等

style:全局定义小程序组件所使用的样式版本

sitemapLocation:指定sitemap.json文件位置

(二)project.config.json文件详解

project.config.json文件是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

setting中保存了编译相关的配置

projectname中保存的是项目名称

appid中保存的是小程序账号id

(三)sitemap.json文件详解

微信现已开放小程序内搜索,效果类似pc网页的seo。sitemap.json文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时,微信会通过爬虫的形式,未小程序页面内容建立索引。当用户搜索关键字和页面的索引匹配的时候,小程序的页面可能展示在搜索结果中。

(四)页面.json文件详解

页面.json文件主要对本页面的窗口外观进行配置,页面中的配置会覆盖app.json的window中相同的配置项。

四、小程序中.js文件介绍

app.js:是整个小程序项目的入口文件,通过调用app()函数来启动整个小程序。

页面.js文件:是页面的入口文件,通过调用page()函数来创建并运行页面。

普通的.js文件:是普通的功能模块文件,用来封装公共的函数或属性供页面使用。

评论列表
发表评论
+ 关注