### 添加一个新的小程序页面 ------------ **步骤：** **1.添加页面配置** 在小程序的根目录下找到 app.json 文件，添加页面路径和页面标题。例如，添加一个名为 myPage 的页面，可以在 app.json 文件中添加以下代码： ```json { "pages": [ "pages/index/index", "pages/logs/logs", "pages/myPage/myPage" ], "window": { "navigationBarTitleText": "Demo" } } ``` 我们在这里添加了一个myPage页面。小程序开发者工具会自动为我们生成对应的目录以及初始化文件 ：  **2.编写测试代码，我们以一个展示文章列表的页面为示例：** **2-1.编辑myPage.js代码：** ```javascript Page({ data: { articles: [ { id: 1, title: '这是第一篇文章', content: '这是第一篇文章的内容' }, { id: 2, title: '这是第二篇文章', content: '这是第二篇文章的内容' }, { id: 3, title: '这是第三篇文章', content: '这是第三篇文章的内容' } ] } }) ``` 我们在这个js文件中初始化了一个articles列表，用来存放一些文章的数据，如果是配合后台接口访问，通常我们不会在js里生成这些数据，我们这里为了演示，采用这方方式。 **2-2.编辑模板文件** myPage.wxml ```javascript <view class="article-list"> <view wx:for="{{articles}}" wx:key="id" class="article-item"> <view class="article-title">{{item.title}}</view> <view class="article-content">{{item.content}}</view> </view> </view> ``` 我们在这个模板文件中循环展示了myPage.js文件中配置的数据：article-list **2-3.给我们这个页面添加一些样式：** myPage.wxss ```javascript .article-list { padding: 10rpx; } .article-item { margin-bottom: 20rpx; padding: 20rpx; background-color: #fff; border-radius: 10rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2); } .article-title { font-size: 32rpx; font-weight: bold; margin-bottom: 10rpx; } .article-content { font-size: 28rpx; color: #666; } ``` ------------ **预览页面** 我们在首页添加一个链接，链接到我们新建的页面，首先我把们首页的内容清理一下，保留一个外层容器，并添加一个链接。 ```javascript <!--index.wxml--> <view class="container"> <navigator url="/pages/myPage/myPage" open-type="switchTab"> 文章列表 </navigator> </view> ``` 在这里，我们使用 navigator 标签创建了一个链接，链接到我们新建的页面，url 属性指定了链接目标页面的路径。 添加tabBar： 编辑app.json文件： ```javascript { "pages":[ "pages/index/index", "pages/logs/logs", "pages/myPage/myPage" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ChatGPT小程序", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json", "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/myPage/myPage", "text": "文章列表" } ] } } ``` 我们在 tabBar 中添加了一个新的选项卡，指向我们新建的页面。 ------------ 测试： 我们可以通过点击首页的链接，或者下面的菜单Bar来切换到我们新建的文章列表页面：  ------------ 小结： 微信小程序相关的内容，我们暂时就先介绍到这里。后面的内容，将会依据这些基础知识，来建立我们结合ChatGPT要实现的功能页面。 本小节中涉及到了： * 微信小程序的配置 * wxml * wxss * js * json 我们可以参考官方文档中 指南 - 视图层 部分的讲解，或框架-wxml,wxss语法介绍部分来学习。