【b站计算机拓荒者】【2025】微信小程序开发教程 - 3 项目目录结构

3 项目目录结构

3.1 项目目录结构

3.1.1 目录介绍

复制代码

# 1 项目主配置文件，在项目根路径下，控制整个项目的
	-app.js  # 小程序入口文件，小程序启动，会执行此js
	-app.json # 小程序全局配置文件，配置小程序导航栏颜色等信息
	-app.wxss # 小程序全局样式
	
	-app.js和app.json必须存在

# 2 页面文件
	-pages文件夹内，有一个个文件夹（index，login，register）--> 每个文件夹下有4个文件，
		-xx.js  # 页面逻辑：js代码控制
		-xx.wxml # 页面结构/布局，html === wxml，部分标签不一样
		-xx.json # 页面配置，当前页面导航栏颜色等
		-xx.wxss # 页面样式，当前页面的样式，当前页面样式优先级高于小程序全局样式

		-xx.js和xx.wxml必须存在

# 3 其他非重点
	-components 页面会用到的组件，每个组件放到一个文件夹内，每个文件夹内有4个文件
		-xx.js
		-xx.wxml
		-xx.json
		-xx.wxss

	-exlintrc.js 语法检查，不用
	
    项目配置，基础配置，整个项目存放位置，是否开启https
	-project.config.json 开发者工具默认配置
	-project.private.config.json 开发者工具用户配置，优先用这个，可以删除
	

	-sitemap.json 页面抓取相关，搜索优化，上线后他人通过哪些关键字搜索到小程序

3.1.2 配置文件

3.1.2.1 项目配置app.json

复制代码

# 1 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题以及导航栏颜色，是否下拉刷新等

# 2 配置参考地址
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

# 3 部分配置
属性	类型	必填	描述	最低版本
entryPagePath	string	否	小程序默认启动首页	
pages：页面路径列表	
window：全局的默认窗口表现：顶部颜色，是否有下拉，经常用到

3.1.2.2 页面配置xx.json

javascript 复制代码

# 1 小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等

# 2 app.json的部分配置，也支持对单个页面进行配置，可以在页面对应的 xx.json文件来对本页面的表现进行配置，即第3点

# 3 页面中配置项在当前页面会覆盖app.json中相同的配置项（样式相关的配置项属于app.json中的window属性，但这里不需要额外指定window字段），具体的取值和含义可参考全局配置文档说明

# 4 参考文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

# 5 常用配置
navigationBarBackgroundColor # 导航栏背景颜色，如 #000000	
navigationBarTextStyle # 导航栏标题、状态栏颜色，仅支持 black / white	
navigationBarTitleText # 导航栏标题文字内容

3.1.2.3 工程配置

复制代码

# 1 project.config.json  project.private.config.json 
# 2  小程序项目配置文件，用于保存项目的一些配置信息和开发者的个人设置
# 3 参考文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

project.config.json的配置与详情里的本地设置是联动的。

调试基础库

3.1.2.4 搜索seo相关配置

复制代码

# 1 作用
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

# 2  参考文档
https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

# 3 配置 -->用户搜索小程序，任意页面有关键字，都会被搜索到
{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [{
    "action": "allow",
    "page": "*"
    }]
}

3.2 webview渲染

3.2.1 webview与skyline模式

复制代码

# 1 webview模式：老一点，稳定，支持新老版本
# 2 skyline模式：新一点，不支持老版本，不太稳定

# 3 调整成webview模式更加稳定一些

# 4 项目配置 --> app.json

app.json删除以下配置

3.3 新建页面

复制代码

# 1 app.json只有一个页面 === 小程序只有一个页面
	-后期增加页面

# 2 增加页面方式一
	1 pages右键 --> 新建文件夹
	2 新建的文件夹右键 新建page
	3 生成4个文件，分别是xx.js，xx.wxml，xx.json，xx.wxss

# 3 增加页面方式二
	 1 app.json pages中，新增一行
	 2 自动创建文件夹和页面

增加页面方式一

输入page名，会生成四个文件

同时app.json会多出一行login内容

增加页面方式二

3.4 启动页面调整

复制代码

# 1 修改默认启动页面
## 方式1 在app.json的pages修改顺序，第一个即默认启动页面
{
    "pages": [
        "pages/login/login",
        "pages/index/index",
        "pages/register/register"
    ],
}

## 方式2 通过entryPagePath配置  --- 较多
{
    "entryPagePath": "pages/index/index",
}

## 方式3：临时用 
	-添加编译模式，使用较少

方式1 pages

方式2

entryPagePath

方式3 添加编译模式

3.5 调试小程序

3.5.1 调试小程序基础库

复制代码

# 微信小程序基础库，一直在版本升级
	-转发功能
	-发送朋友圈
	-等等

# 不同功能是在不同版本加入的
	-假设基于老版本开发，那么某些功能可能不存在
	-开发时，如果没有，写了无效，应确认基础库是否支持此功能
	-参考文档，https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html

如果基础库低于1.2.0，即无此转发功能

基础库版本

3.5.2 调试窗口

调试器

3.5.3 真机调试

复制代码

# 刚才说的都是模拟器调试
# 真机调试 - 微信调试
	-扫描真机调试二维码，出现vconsole

# 自动真机调试
	-扫码登录会自动连接手机

自动真机调试

也有vconsole

3.6 纯净项目

复制代码

# 纯净模式，删除项目不需要的东西，只留核心 --> 开发
## 删除components
## 删除pages，除index之外的pages
## 删除exlintrs.js，project.config.json，project.private.config.json，sitemap.json(配置文件删除会有默认配置）

# app.json
{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarTitleText": "功能演示",
        "navigationBarBackgroundColor": "#0000ff",
        "enablePullDownRefresh": false,
        "backgroundColor": "#00ffff",
        "backgroundTextStyle":"dark"
    },
    "style": "v2"
}

# app.wxss

# app.js
	App({})



# pages/index
## index.js
	Page({})
## index.wxml
	  <view class="container">
	    吴磊吴磊
	  </view>
## index.wxss
## index.json
	{
	  "usingComponents": {
	  },
	  "navigationBarTitleText": "功能演示index",
	  "navigationBarBackgroundColor": "#ffff00",
	  "enablePullDownRefresh": true,
	  "backgroundColor": "#00ffff",
	  "backgroundTextStyle":"light"
	}
###  index.json的配置优先app.json



# 提示，如果代码修改没有效果，清除全部缓存
# json文件不能有注释