第二章 小程序目录结构与核心文件详解 系列教程微信小程序投票系统完整开发 上一章第一章 - 微信小程序概述与开发准备 下一章第三章 - WXML 所有表单组件与使用2.1 完整目录结构wx/page/ ← 小程序根目录 ├── app.js ← 全局逻辑入口必须 ├── app.json ← 全局配置必须 ├── app.wxss ← 全局样式可选 ├── project.config.json ← 开发工具配置 ├── project.private.config.json ← 个人开发配置不提交 git ├── sitemap.json ← 搜索索引配置 └── pages/ ← 页面目录 ├── index/ ← 首页 │ ├── index.js ← 页面逻辑 │ ├── index.json ← 页面配置覆盖全局 │ ├── index.wxml ← 页面结构 │ └── index.wxss ← 页面样式 ├── create/ ← 创建投票页 │ ├── create.js │ ├── create.json │ ├── create.wxml │ └── create.wxss ├── vote/ ← 投票页 │ ├── vote.js │ ├── vote.json │ ├── vote.wxml │ └── vote.wxss └── result/ ← 结果页 ├── result.js ├── result.json ├── result.wxml └── result.wxss规律每个页面由4 个同名文件组成js / json / wxml / wxss其中 json 和 wxss 可以省略。2.2 app.json — 全局配置文件app.json是小程序的大脑配置控制页面路由、窗口外观、底部导航栏等。完整配置示例投票系统{{pages:[pages/index/index,pages/create/create,pages/vote/vote,pages/result/result],window:{backgroundTextStyle:light,navigationBarBackgroundColor:#6C63FF,navigationBarTitleText:统计小工具,navigationBarTextStyle:white,backgroundColor:#f5f5f5},style:v2,sitemapLocation:sitemap.json}pages 配置说明pages:[pages/index/index,← 第一个页面是默认首页启动页pages/create/create,pages/vote/vote,pages/result/result]技巧在app.json的pages数组中新增一行路径保存后开发者工具会自动创建对应的页面文件夹和4个文件非常方便。window 配置说明配置项值说明backgroundTextStylelight下拉 loading 的样式仅支持dark/lightnavigationBarBackgroundColor#6C63FF导航栏背景颜色十六进制代码navigationBarTitleText统计小工具导航栏标题文字内容navigationBarTextStylewhite导航栏标题颜色仅支持black/whitebackgroundColor#f5f5f5窗口的背景色页面内容的背景色2.3 app.js — 全局逻辑文件app.js是整个小程序的入口负责全局状态管理和生命周期处理。结构模板App({// 全局数据类似 Vuex/Redux 的 stateglobalData:{userInfo:null,openid:,baseUrl:https://www.chinahanwucun.cn,// 内部状态约定 _ 开头_openidReady:false,_openidCallbacks:[]},// 生命周期 onLaunch(options){// 冷启动时触发小程序首次打开// options.scene 场景值1001发现页1005顶部搜索等// options.query 启动参数// options.path 启动页面路径console.log(小程序启动,options)},onShow(options){// 每次切换到前台都触发},onHide(){// 切换到后台按 Home 键或切换到其他 App},onError(msg){// 全局 JS 错误监听console.error(全局错误:,msg)},onPageNotFound(res){// 页面不存在比如分享链接对应的页面被删除了wx.redirectTo({url:/pages/index/index})},// 自定义全局方法 getOpenid(callback){if(this.globalData._openidReady){callback(this.globalData.openid)}else{this.globalData._openidCallbacks.push(callback)}}})在页面中使用 app.js 的数据和方法// 页面 .js 文件头部constappgetApp()Page({onLoad(){// 访问全局数据console.log(app.globalData.baseUrl)// 调用全局方法app.getOpenid(openid{console.log(openid:,openid)})}})2.4 app.wxss — 全局样式全局样式中定义的类名所有页面都可以直接使用无需 import。/* app.wxss */page{background-color:#f5f6fa;font-family:-apple-system,PingFang SC,Helvetica Neue,sans-serif;font-size:28rpx;color:#333;}/* 通用卡片 */.card{background:#fff;border-radius:20rpx;padding:32rpx;margin:24rpx 24rpx 0;box-shadow:0 4rpx 20rpxrgba(0,0,0,0.06);}/* 通用按钮 */.btn-primary{background:linear-gradient(135deg,#6C63FF,#9B8FFF);color:#fff;border-radius:50rpx;font-size:32rpx;font-weight:600;border:none;padding:0 60rpx;height:88rpx;line-height:88rpx;letter-spacing:2rpx;box-shadow:0 8rpx 24rpxrgba(108,99,255,0.35);}.btn-primary::after{border:none;}.btn-outline{background:transparent;color:#6C63FF;border:2rpx solid #6C63FF;border-radius:50rpx;font-size:28rpx;padding:0 40rpx;height:72rpx;line-height:72rpx;}.btn-outline::after{border:none;}2.5 页面 .json 配置文件每个页面可以有自己的.json文件覆盖app.json中window的配置。{navigationBarTitleText:发起投票,navigationBarBackgroundColor:#07C160,navigationBarTextStyle:white,enablePullDownRefresh:true,backgroundTextStyle:light,usingComponents:{}}usingComponents用于引入自定义组件暂时留空即可。2.6 sitemap.json — 搜索配置控制小程序页面是否允许被微信搜索索引微信搜索功能。{desc:关于本文件的更多信息请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html,rules:[{action:allow,page:*}]}2.7 project.config.json — 工具配置{appid:你的AppID,projectname:vote-miniprogram,compileType:miniprogram,libVersion:3.4.8,setting:{urlCheck:true,es6:true,enhance:true,postcss:true,preloadBackgroundData:false,minified:true}}2.8 页面文件的编写顺序建议开发一个新页面的推荐顺序1. 在 app.json 的 pages 中添加路径 → 自动生成文件 2. 在 .json 中配置导航栏标题 3. 在 .js 的 data 中定义页面数据结构 4. 在 .wxml 中写页面骨架先不加样式 5. 在 .wxss 中完善样式 6. 回到 .js 中完善逻辑onLoad、事件处理等本章小结✅ 掌握了小程序完整的目录结构✅ 理解了app.json中页面路由、窗口配置、tabBar 的写法✅ 学会了app.js的全局生命周期和全局数据管理✅ 掌握了app.wxss的全局样式定义方式✅ 了解了各配置文件的作用和编写顺序下一章深入学习 WXML 的所有表单组件这是构建投票界面的基础。
第二章 小程序目录结构与核心文件详解
第二章 小程序目录结构与核心文件详解 系列教程微信小程序投票系统完整开发 上一章第一章 - 微信小程序概述与开发准备 下一章第三章 - WXML 所有表单组件与使用2.1 完整目录结构wx/page/ ← 小程序根目录 ├── app.js ← 全局逻辑入口必须 ├── app.json ← 全局配置必须 ├── app.wxss ← 全局样式可选 ├── project.config.json ← 开发工具配置 ├── project.private.config.json ← 个人开发配置不提交 git ├── sitemap.json ← 搜索索引配置 └── pages/ ← 页面目录 ├── index/ ← 首页 │ ├── index.js ← 页面逻辑 │ ├── index.json ← 页面配置覆盖全局 │ ├── index.wxml ← 页面结构 │ └── index.wxss ← 页面样式 ├── create/ ← 创建投票页 │ ├── create.js │ ├── create.json │ ├── create.wxml │ └── create.wxss ├── vote/ ← 投票页 │ ├── vote.js │ ├── vote.json │ ├── vote.wxml │ └── vote.wxss └── result/ ← 结果页 ├── result.js ├── result.json ├── result.wxml └── result.wxss规律每个页面由4 个同名文件组成js / json / wxml / wxss其中 json 和 wxss 可以省略。2.2 app.json — 全局配置文件app.json是小程序的大脑配置控制页面路由、窗口外观、底部导航栏等。完整配置示例投票系统{{pages:[pages/index/index,pages/create/create,pages/vote/vote,pages/result/result],window:{backgroundTextStyle:light,navigationBarBackgroundColor:#6C63FF,navigationBarTitleText:统计小工具,navigationBarTextStyle:white,backgroundColor:#f5f5f5},style:v2,sitemapLocation:sitemap.json}pages 配置说明pages:[pages/index/index,← 第一个页面是默认首页启动页pages/create/create,pages/vote/vote,pages/result/result]技巧在app.json的pages数组中新增一行路径保存后开发者工具会自动创建对应的页面文件夹和4个文件非常方便。window 配置说明配置项值说明backgroundTextStylelight下拉 loading 的样式仅支持dark/lightnavigationBarBackgroundColor#6C63FF导航栏背景颜色十六进制代码navigationBarTitleText统计小工具导航栏标题文字内容navigationBarTextStylewhite导航栏标题颜色仅支持black/whitebackgroundColor#f5f5f5窗口的背景色页面内容的背景色2.3 app.js — 全局逻辑文件app.js是整个小程序的入口负责全局状态管理和生命周期处理。结构模板App({// 全局数据类似 Vuex/Redux 的 stateglobalData:{userInfo:null,openid:,baseUrl:https://www.chinahanwucun.cn,// 内部状态约定 _ 开头_openidReady:false,_openidCallbacks:[]},// 生命周期 onLaunch(options){// 冷启动时触发小程序首次打开// options.scene 场景值1001发现页1005顶部搜索等// options.query 启动参数// options.path 启动页面路径console.log(小程序启动,options)},onShow(options){// 每次切换到前台都触发},onHide(){// 切换到后台按 Home 键或切换到其他 App},onError(msg){// 全局 JS 错误监听console.error(全局错误:,msg)},onPageNotFound(res){// 页面不存在比如分享链接对应的页面被删除了wx.redirectTo({url:/pages/index/index})},// 自定义全局方法 getOpenid(callback){if(this.globalData._openidReady){callback(this.globalData.openid)}else{this.globalData._openidCallbacks.push(callback)}}})在页面中使用 app.js 的数据和方法// 页面 .js 文件头部constappgetApp()Page({onLoad(){// 访问全局数据console.log(app.globalData.baseUrl)// 调用全局方法app.getOpenid(openid{console.log(openid:,openid)})}})2.4 app.wxss — 全局样式全局样式中定义的类名所有页面都可以直接使用无需 import。/* app.wxss */page{background-color:#f5f6fa;font-family:-apple-system,PingFang SC,Helvetica Neue,sans-serif;font-size:28rpx;color:#333;}/* 通用卡片 */.card{background:#fff;border-radius:20rpx;padding:32rpx;margin:24rpx 24rpx 0;box-shadow:0 4rpx 20rpxrgba(0,0,0,0.06);}/* 通用按钮 */.btn-primary{background:linear-gradient(135deg,#6C63FF,#9B8FFF);color:#fff;border-radius:50rpx;font-size:32rpx;font-weight:600;border:none;padding:0 60rpx;height:88rpx;line-height:88rpx;letter-spacing:2rpx;box-shadow:0 8rpx 24rpxrgba(108,99,255,0.35);}.btn-primary::after{border:none;}.btn-outline{background:transparent;color:#6C63FF;border:2rpx solid #6C63FF;border-radius:50rpx;font-size:28rpx;padding:0 40rpx;height:72rpx;line-height:72rpx;}.btn-outline::after{border:none;}2.5 页面 .json 配置文件每个页面可以有自己的.json文件覆盖app.json中window的配置。{navigationBarTitleText:发起投票,navigationBarBackgroundColor:#07C160,navigationBarTextStyle:white,enablePullDownRefresh:true,backgroundTextStyle:light,usingComponents:{}}usingComponents用于引入自定义组件暂时留空即可。2.6 sitemap.json — 搜索配置控制小程序页面是否允许被微信搜索索引微信搜索功能。{desc:关于本文件的更多信息请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html,rules:[{action:allow,page:*}]}2.7 project.config.json — 工具配置{appid:你的AppID,projectname:vote-miniprogram,compileType:miniprogram,libVersion:3.4.8,setting:{urlCheck:true,es6:true,enhance:true,postcss:true,preloadBackgroundData:false,minified:true}}2.8 页面文件的编写顺序建议开发一个新页面的推荐顺序1. 在 app.json 的 pages 中添加路径 → 自动生成文件 2. 在 .json 中配置导航栏标题 3. 在 .js 的 data 中定义页面数据结构 4. 在 .wxml 中写页面骨架先不加样式 5. 在 .wxss 中完善样式 6. 回到 .js 中完善逻辑onLoad、事件处理等本章小结✅ 掌握了小程序完整的目录结构✅ 理解了app.json中页面路由、窗口配置、tabBar 的写法✅ 学会了app.js的全局生命周期和全局数据管理✅ 掌握了app.wxss的全局样式定义方式✅ 了解了各配置文件的作用和编写顺序下一章深入学习 WXML 的所有表单组件这是构建投票界面的基础。
