当前位置：首页 > article >正文

【b站计算机拓荒者】【2025】微信小程序开发教程 - chapter1 初识小程序 - 3项目目录结构4快速上手

article 2025/7/3 9:35:31

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

# 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 新建的文件夹右键 新建page3 生成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.jsApp({})# pages/index
## index.jsPage({})
## 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文件不能有注释

在这里插入图片描述

4 快速上手

4.1 小程序常用组件

# 1 做过htmla标签div标签spanimg# 2 小程序没有以上html标签，自己封装的是组件-https://developers.weixin.qq.com/miniprogram/dev/component/# 3 text 类似span，不换行，显示文字-https://developers.weixin.qq.com/miniprogram/dev/component/text.html
# 4 view 类似div，换行，可显示任何内容-https://developers.weixin.qq.com/miniprogram/dev/component/view.html
# 5 image 类似img  src填图片位置，style设置图片宽高-https://developers.weixin.qq.com/miniprogram/dev/component/image.htmlstyle="height: 30px; width:70px;"src="/images/b.png"   images前的/表示当前项目的路径
# 6 swipe，轮播图组件
# 7 icon，图标组件- <icon color="red" type="success" size="93"></icon>

在这里插入图片描述

4.2 tabbar配置

# 底部或顶部的tab页-几乎所有小程序都会有tabbar，一般在底部位置# 如何设置1 在app.json配置"tabBar":{"selectedColor": "#b4282d","position": "bottom","list":[{"pagePath": "pages/index/index","text": "首页","iconPath": "images/两狗对视.jpg","selectedIconPath": "images/可爱柯基.jpg"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/猫猫吃鱼.jpg","selectedIconPath": "images/蓝金渐层.jpg"}]},

效果
在这里插入图片描述