广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

​​微信小程序开发入门:如何新增或删除小程序页面?

发布日期:2025-09-20 16:55:34 浏览次数: 810 来源:柒柒知道
推荐语
微信小程序开发必备技能:轻松掌握页面新增与删除操作,提升开发效率。

核心内容:
1. 在app.json中配置新增或删除页面路径
2. 通过资源管理器手动创建或删除页面文件夹
3. 操作后需检查app.json配置是否同步更新
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!

认识点击蓝字 关注我们

创作不易,希望每一位打开这篇文章的宝宝都能点个关注,感谢支持!


微信小程序是由一个一个Page页面组成的,我们在开始写代码之前,需要先学习一下如何新增和删除Page页面。
一.app.json中新增或删除页面
之前跟大家说过,app.json是微信小程序的全局配置文件,其格式为json格式,其中有一项pages是必填的,用于声明小程序的所有页面路径。
我们使用“JS-基础模版”创建一个新项目,我们打开app.json,找到pages,初始配置如下:
"pages": [    "pages/index/index",    "pages/logs/logs"  ]
可以看出,这个项目有两个页面,index和logs。
我们可以在后面添加几项,例如:
"pages": [    "pages/index/index",    "pages/logs/logs",    "pages/user/user",    "pages/tool/tool"  ]
点击保存,我们发现此时增加了tool和user两个页面。已经自动生成tool和user两个文件夹,每个文件夹下生成4个页面文件。
这里有人可能会问,如果在pages中,删掉其中某些项,会不会自动删除相应的页面文件呢?
我们来测试一下,删掉“"pages/tool/tool"”:
"pages": [    "pages/index/index",    "pages/logs/logs",    "pages/user/user"  ],
我们保存,或者清缓存后重新编译,甚至关闭项目重新打开,项目结构仍在没有变化,tool文件夹依然存在,可见删除pages 配置不会删除页面文件
这是为了避免编译错误,我们需要手动删除tool文件夹。
二.在资源管理器中新增或删除页面
在微信开发者工具左侧资源管理器中选中pages文件夹,点击鼠标右键,选择新建文件夹。
输入文件夹名称,一般使用页面名称,假设我们在新建一个demo页面,这里就输入demo。
选中新建的demo文件夹,点击鼠标右键,选择新建page。
然后输入页面名称demo,不用加上扩展名
确认后即生成了4个页面组件。
然后我们打开app.js,观察pages配置项,发现已经自动增加了demo页面。
接下来我们测试删除logs页面。
选择logs文件夹,点击鼠标右键,选择删除Page。
此时弹窗提示我们会同步更新app.json,我们点击删除。

接下来我们看到logs文件夹已经删除,正常情况下会自动更新app.json中的pages配置项,但我经过实测并没有更新,可能是版本差异

因此,通过这种方法删除页面后,需要检查一下app.json中的pages配置项,如果删除页面后没有自动更新,就需要我们手动进行更新pages配置。

通过以上学习,相信大家已经学会了新增和删除Page页面,如果需要对Page页面进行重命名,该如何操作呢?大家可以先去操作试试,如果学会了可以在评论区留言。

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!