【b站盘算机拓荒者】【2025】微信小步伐开辟教程 - 3 项目目录结构 ...

3 项目目录结构

3.1 项目目录结构

3.1.1 目录介绍

1. # 1 项目主配置文件，在项目根路径下，控制整个项目的
2.         -app.js  # 小程序入口文件，小程序启动，会执行此js
3.         -app.json # 小程序全局配置文件，配置小程序导航栏颜色等信息
4.         -app.wxss # 小程序全局样式
5.        
6.         -app.js和app.json必须存在
8. # 2 页面文件
9.         -pages文件夹内，有一个个文件夹（index，login，register）--> 每个文件夹下有4个文件，
10.                 -xx.js  # 页面逻辑：js代码控制
11.                 -xx.wxml # 页面结构/布局，html === wxml，部分标签不一样
12.                 -xx.json # 页面配置，当前页面导航栏颜色等
13.                 -xx.wxss # 页面样式，当前页面的样式，当前页面样式优先级高于小程序全局样式
15.                 -xx.js和xx.wxml必须存在
17. # 3 其他非重点
18.         -components 页面会用到的组件，每个组件放到一个文件夹内，每个文件夹内有4个文件
19.                 -xx.js
20.                 -xx.wxml
21.                 -xx.json
22.                 -xx.wxss
24.         -exlintrc.js 语法检查，不用
25.        
26.     项目配置，基础配置，整个项目存放位置，是否开启https
27.         -project.config.json 开发者工具默认配置
28.         -project.private.config.json 开发者工具用户配置，优先用这个，可以删除
29.        
31.         -sitemap.json 页面抓取相关，搜索优化，上线后他人通过哪些关键字搜索到小程序

复制代码

3.1.2 配置文件

3.1.2.1 项目配置app.json

1. # 1 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题以及导航栏颜色，是否下拉刷新等
3. # 2 配置参考地址
4. https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
6. # 3 部分配置
7. 属性        类型        必填        描述        最低版本
8. entryPagePath        string        否        小程序默认启动首页       
9. pages：页面路径列表       
10. window：全局的默认窗口表现：顶部颜色，是否有下拉，经常用到

复制代码

3.1.2.2 页面配置xx.json

1. # 1 小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等
3. # 2 app.json的部分配置，也支持对单个页面进行配置，可以在页面对应的 xx.json文件来对本页面的表现进行配置，即第3点
5. # 3 页面中配置项在当前页面会覆盖app.json中相同的配置项（样式相关的配置项属于app.json中的window属性，但这里不需要额外指定window字段），具体的取值和含义可参考全局配置文档说明
7. # 4 参考文档
8. https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
10. # 5 常用配置
11. navigationBarBackgroundColor # 导航栏背景颜色，如 #000000       
12. navigationBarTextStyle # 导航栏标题、状态栏颜色，仅支持 black / white       
13. navigationBarTitleText # 导航栏标题文字内容

复制代码

3.1.2.3 工程配置

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

复制代码

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

调试基础库

3.1.2.4 搜索seo相干配置

1. # 1 作用
2. 微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。
4. # 2  参考文档
5. https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
7. # 3 配置 -->用户搜索小程序，任意页面有关键字，都会被搜索到
8. {
9.     "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
10.     "rules": [{
11.     "action": "allow",
12.     "page": "*"
13.     }]
14. }

复制代码

3.2 webview渲染

3.2.1 webview与skyline模式

1. # 1 webview模式：老一点，稳定，支持新老版本
2. # 2 skyline模式：新一点，不支持老版本，不太稳定
4. # 3 调整成webview模式更加稳定一些
6. # 4 项目配置 --> app.json

复制代码

app.json删除以下配置

3.3 新建页面

1. # 1 app.json只有一个页面 === 小程序只有一个页面
2.         -后期增加页面
4. # 2 增加页面方式一
5.         1 pages右键 --> 新建文件夹
6.         2 新建的文件夹右键 新建page
7.         3 生成4个文件，分别是xx.js，xx.wxml，xx.json，xx.wxss
9. # 3 增加页面方式二
10.          1 app.json pages中，新增一行
11.          2 自动创建文件夹和页面

复制代码

增加页面方式一

输入page名，会生成四个文件
同时app.json会多出一行login内容

增加页面方式二

3.4 启动页面调整

1. # 1 修改默认启动页面
2. ## 方式1 在app.json的pages修改顺序，第一个即默认启动页面
3. {
4.     "pages": [
5.         "pages/login/login",
6.         "pages/index/index",
7.         "pages/register/register"
8.     ],
9. }
11. ## 方式2 通过entryPagePath配置  --- 较多
12. {
13.     "entryPagePath": "pages/index/index",
14. }
16. ## 方式3：临时用
17.         -添加编译模式，使用较少

复制代码

方式1 pages

方式2
entryPagePath

方式3 添加编译模式

3.5 调试小步伐

3.5.1 调试小步伐基础库

1. # 微信小程序基础库，一直在版本升级
2.         -转发功能
3.         -发送朋友圈
4.         -等等
6. # 不同功能是在不同版本加入的
7.         -假设基于老版本开发，那么某些功能可能不存在
8.         -开发时，如果没有，写了无效，应确认基础库是否支持此功能
9.         -参考文档，https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html

复制代码

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

基础库版本

3.5.2 调试窗口

调试器

3.5.3 真机调试

1. # 刚才说的都是模拟器调试
2. # 真机调试 - 微信调试
3.         -扫描真机调试二维码，出现vconsole
5. # 自动真机调试
6.         -扫码登录会自动连接手机

复制代码

自动真机调试

也有vconsole

3.6 纯净项目

1. # 纯净模式，删除项目不需要的东西，只留核心 --> 开发
2. ## 删除components
3. ## 删除pages，除index之外的pages
4. ## 删除exlintrs.js，project.config.json，project.private.config.json，sitemap.json(配置文件删除会有默认配置）
6. # app.json
7. {
8.     "pages": [
9.         "pages/index/index"
10.     ],
11.     "window": {
12.         "navigationBarTitleText": "功能演示",
13.         "navigationBarBackgroundColor": "#0000ff",
14.         "enablePullDownRefresh": false,
15.         "backgroundColor": "#00ffff",
16.         "backgroundTextStyle":"dark"
17.     },
18.     "style": "v2"
19. }
21. # app.wxss
23. # app.js
24.         App({})
28. # pages/index
29. ## index.js
30.         Page({})
31. ## index.wxml
32.           <view class="container">
33.             吴磊吴磊
34.           </view>
35. ## index.wxss
36. ## index.json
37.         {
38.           "usingComponents": {
39.           },
40.           "navigationBarTitleText": "功能演示index",
41.           "navigationBarBackgroundColor": "#ffff00",
42.           "enablePullDownRefresh": true,
43.           "backgroundColor": "#00ffff",
44.           "backgroundTextStyle":"light"
45.         }
46. ###  index.json的配置优先app.json
50. # 提示，如果代码修改没有效果，清除全部缓存
51. # json文件不能有注释

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。