如何仅用AI开发完整的小程序<4>—小程序页面创建与删除

这一节我们主要介绍小程序页面的创建与删除。

我不打算先介绍"微信开发者工具"的每个菜单功能都是干啥的,

也不会系统的介绍基础的项目框架代码,

那样似乎太枯燥了。

我们直接上手干,做什么功能的时候我再介绍对应的模块。

一、创建一个页面

1、首先我们自己先来手动创建一个游戏开始页面,命令为gameStart(命名需要用英文,拼音也行,为了提高辨识度,可以选择每个单词/拼音的首字母大写,我习惯首字母小写,第二个单词的首字母大写)

①点击打开app.json

②直接将原来的"pages/index/index",复制一下粘贴到最上面(一定要在最上面,最上面代表应用启动时默认打开的页面),然后将index换成gameStart即可。

注意末尾是英文的","(逗号)。

③然后直接按键盘Ctrl+s,刚才对app.json的修改就保存了。

这时候我们在资源管理器-MINIPROGRAM(创建项目时自己起的名字)-pages文件夹下看到自动生成了一个gameStart的文件夹,并且里面自动创建了4个文件,如下图。

④这时候我们点击顶部菜单栏上的"编辑"之后,等它编辑完,看到左边预览区域已经展示的使我们刚才创建的页面。如下图。

注意如果预览区域不是我们刚创建的页面,就关闭整个开发者工具重新打开一下。

二、删除一个页面

这时候我们可以选择把默认的"pages/index/index",页面删除了,当然也可以保留对其进行改造也行。

这里我选择删除,主要是介绍一下如何删除一个页面。

首先我们要在app.json删掉"pages/index/index",

然后鼠标右键index文件夹选择删除。

然后按键盘Ctrl+s保存一下,就删掉了。

三、页面介绍

细心的朋友应该已经发现了,微信小程序的核心代码结构其实很简单。

我们平时使用小程序的时候看到的每一个界面,在代码里就是以页面-pages的形式存在的。(可以对照PPT理解)

每一个页面在pages目录下对应一个页面文件。

比如我们刚创建的开始页(gameStart)就是一个gameStart文件夹,里面有4个以gameStart命令的不同文件。

这4个文件其实也很好理解

gameStart.js:里面主要放代码逻辑

gameStart.json:里面主要放配置引用,一般里面的代码会非常少

gameStart.wxml:里面主要放页面的布局代码,比如页面标题

gameStart.wxss:里面主要配置页面的布局样式,比如一个按钮的尺寸。

注意,其实wxml,和wxss里面的代码都可以放到gameStart.js中,但是为了代码结构清晰,方便修改管理,我们一般按照上面的规范来编写-存放代码。

综上,其实我们完全可以按照做PPT的思维来做小程序,都是一个页面,一个页面的形式来呈现东西。

以下是我完全用AI开发的小程序-欢迎体验。

--完--

相关推荐
张伽蓝ErosJane6 小时前
AI 客服 Agent 搭建实战:从提示词 Demo 到可治理产线
ai编程
半调子的社畜6 小时前
记账 App 我装了删、删了装,最后自己写了一个:本地语音识别 + R8 踩坑复盘
android·ai编程
程序员鱼皮6 小时前
Personal Agent 是什么?为什么大厂都抢着做?连 DeepSeek Bot 都来了。。
前端·后端·ai编程
用户721746588266 小时前
Qwen-Image 2.1 的四条宣称拆成调用路径:透明挂在 edit 侧,164,919 与 301,400 两组像素读数
llm·aigc·agent
追光者496 小时前
同一台机器,从"一整天零产出"到"20 分钟发三篇":我给流水线装了个"等窗口"的闸门
ai编程
xn71336 小时前
Gemini 4 Argon API 迁移清单:百万上下文、Thinking 预算与 Agent 验收
aigc·ai编程
每天都是不一样的太阳6 小时前
AI成长系列-09-提示词资产库
ai编程
Dawson Zhu6 小时前
《Agentic Design Patterns》第 19 章导读:评估与监控
人工智能·语言模型·架构·aigc·agi
机器人梦想家6 小时前
【AI工具】Spec Kit 升级教程:specify CLI 从 1.1.2 升到 1.2.0 全流程(含 GitHub 下载慢的镜像解法)
ai编程
Dawson Zhu6 小时前
《Agentic Design Patterns》第 20 章导读:优先级排序
人工智能·语言模型·架构·aigc·agi