小程序添加一個新頁面 · ChatGPT實戰開發-微信小程序

### 添加一個新的小程序頁面 ------------ **步驟：** **1.添加頁面配置** 在小程序的根目錄下找到 app.json 文件，添加頁面路徑和頁面標題。例如，添加一個名為 myPage 的頁面，可以在 app.json 文件中添加以下代碼： ```json { "pages": [ "pages/index/index", "pages/logs/logs", "pages/myPage/myPage" ], "window": { "navigationBarTitleText": "Demo" } } ``` 我們在這里添加了一個myPage頁面。小程序開發者工具會自動為我們生成對應的目錄以及初始化文件： ![](https://img.kancloud.cn/ed/e5/ede57786cb3af7baff7769d4f15df9b5_535x225.png =600x300) **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  <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來切換到我們新建的文章列表頁面： ![](https://img.kancloud.cn/51/c1/51c1441af978918f65ed657d2913d85b_583x784.png) ------------ 小結：微信小程序相關的內容，我們暫時就先介紹到這里。后面的內容，將會依據這些基礎知識，來建立我們結合ChatGPT要實現的功能頁面。本小節中涉及到了： * 微信小程序的配置 * wxml * wxss * js * json 我們可以參考官方文檔中指南 - 視圖層部分的講解，或框架-wxml,wxss語法介紹部分來學習。