微信小程序基础开发实战 2 页面结构与导航实战

本文链接：https://blog.csdn.net/qq_41611586/article/details/147012384

本章我们将深入了解微信小程序的页面结构，并通过实战项目掌握页面管理、导航跳转及导航栏定制的方法。

1 页面创建与管理

在微信小程序中，页面的创建和管理都是通过JSON配置与WXML布局实现的。

实操步骤：

步骤 1：新建页面

在项目根目录，使用微信开发者工具创建页面：

pages
 ├─ index
 └─ about

通过工具新建页面：在开发工具菜单中点击【页面 → 新建页面】，输入页面名如 about 即可自动生成。
手动新建页面：

pages/
  ├─ about/
  │   ├─ about.js
  │   ├─ about.json
  │   ├─ about.wxml
  │   └─ about.wxss

步骤 2：注册页面

在app.json中注册页面：

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序实战"
  }
}

页面简单布局示例：

<!-- pages/about/about.wxml -->
<view class="container">
  <text>关于我们</text>
</view>

/* pages/about/about.wxss */
.container{
  padding: 20px;
  font-size: 18px;
  text-align: center;
}

运行项目即可查看创建的新页面。

2 页面间跳转与导航栏定制

微信小程序提供多种页面跳转方式：

wx.navigateTo：跳转到新页面（可返回）。
wx.redirectTo：关闭当前页面并跳转（不可返回）。
wx.switchTab：跳转到Tab页（仅用于TabBar）。
wx.navigateBack：返回上一页。

导航实战示例

在index.wxml页面中新增按钮：

<!-- pages/index/index.wxml -->
<view class="container">
  <button bindtap="gotoAbout">跳转到关于页面</button>
</view>

在index.js实现页面跳转：

// pages/index/index.js
Page({
  gotoAbout(){
    wx.navigateTo({
      url: '/pages/about/about'
    })
  }
})

定制页面导航栏（在页面的JSON文件中配置）：

// pages/about/about.json
{
  "navigationBarTitleText": "关于我们",
  "navigationBarBackgroundColor": "#009688",
  "navigationBarTextStyle": "white"
}

运行小程序并点击按钮，即可跳转并看到定制导航栏效果。
在这里插入图片描述 |

3 实战项目：多页面小程序示例（新闻展示页）

下面，我们结合前面所学，以一个简单的新闻展示小程序为实战案例。

项目结构：

pages/
├─ index/
├─ newslist/
└─ newsdetail/

实现步骤：

步骤1：创建页面与注册

在开发者工具中，创建newslist和newsdetail页面，并在app.json注册：

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/newslist/newslist",
    "pages/newsdetail/newsdetail"
  ]
}

步骤2：实现新闻列表页

newslist.wxml

<!-- pages/newslist/newslist.wxml -->
<view class="container">
  <block wx:for="{{newsList}}" wx:key="id">
    <view class="news-item" bindtap="viewDetail" data-id="{{item.id}}">
      <text>{{item.title}}</text>
    </view>
  </block>
</view>

newslist.js

// pages/newslist/newslist.js
Page({
  data: {
    newsList: [
      {id: 1, title: '微信小程序开发教程上线'},
      {id: 2, title: 'ChatGPT 技术实践与应用'},
      {id: 3, title: 'AI行业趋势分析报告'}
    ]
  },
  viewDetail(e){
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/newsdetail/newsdetail?id=${id}`,
    })
  }
})

newslist.wxss

/* pages/newslist/newslist.wxss */
.container{
  padding: 15px;
}
.news-item{
  padding: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}

步骤3：实现新闻详情页

newsdetail.js

// pages/newsdetail/newsdetail.js
Page({
  data:{
    newsDetail: {}
  },
  onLoad(options){
    const newsId = options.id;
    const newsData = [
      {id: '1', title: '微信小程序开发教程上线', content: '详细内容1'},
      {id: '2', title: 'ChatGPT 技术实践与应用', content: '详细内容2'},
      {id: '3', title: 'AI行业趋势分析报告', content: '详细内容3'}
    ];
    const detail = newsData.find(news => news.id === newsId);
    this.setData({newsDetail: detail});
  }
})

newsdetail.wxml

<!-- pages/newsdetail/newsdetail.wxml -->
<view class="container">
  <text class="title">{{newsDetail.title}}</text>
  <view class="content">{{newsDetail.content}}</view>
  <button bindtap="back">返回新闻列表</button>
</view>

增加返回按钮功能：

// pages/newsdetail/newsdetail.js
Page({
  // 省略其他代码
  back(){
    wx.navigateBack();
  }
})

newsdetail.wxss

/* pages/newsdetail/newsdetail.wxss */
.container{
  padding: 20px;
}
.title{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.content{
  font-size: 16px;
  line-height: 1.6;
}
button{
  margin-top: 20px;
}