码多多AI编程问答网

好的，我明白你的需求。以下是一个简单的微信小程序代码示例，包括4个页面：首页、分类页、详情页和关于我们页。每个页面都有相应的功能实现。

app.json

复制代码

{
  "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/detail/detail",
    "pages/about/about"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFFFFF",
    "navigationBarTitleText": "微信小程序示例",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

复制代码

<view class="container">
  <scroll-view scroll-y="{{true}}" class="notice-bar">
    <view class="notice">{{ notice }}</view>
  </scroll-view>
  <image src="{{ banner }}" mode="aspectFill" class="banner"></image>
  <view class="category-buttons">
    <!-- 这里可以添加多个按钮 -->
    <button bindtap="navigateToCategory" class="category-button">分类1</button>
    <button bindtap="navigateToCategory" class="category-button">分类2</button>
    <button bindtap="navigateToCategory" class="category-button">分类3</button>
    <button bindtap="navigateToCategory" class="category-button">分类4</button>
    <button bindtap="navigateToCategory" class="category-button">分类5</button>
  </view>
</view>

pages/index/index.wxss

复制代码

page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.notice-bar {
  width: 100%;
  height: 30px;
  background-color: #f4f4f4;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.notice {
  padding: 0 10px;
  line-height: 30px;
  color: #333;
}

.banner {
  width: 100%;
  height: 180px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}

.category-button {
  flex: 1 1 auto;
  margin: 5px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

pages/index/index.js

复制代码

Page({
  data: {
    notice: "欢迎光临我们的微信小程序！",
    banner: "https://example.com/banner.jpg"
  },
  navigateToCategory() {
    wx.navigateTo({
      url: '/pages/category/category'
    });
  }
});

pages/category/category.wxml

复制代码

<view class="container">
  <view class="category-grid">
    <!-- 这里可以添加多个分类图标 -->
    <view bindtap="navigateToDetail" class="category-item"><image src="/assets/cat1.png"></image></view>
    <view bindtap="navigateToDetail" class="category-item"><image src="/assets/cat2.png"></image></view>
    <view bindtap="navigateToDetail" class="category-item"><image src="/assets/cat3.png"></image></view>
    <view bindtap="navigateToDetail" class="category-item"><image src="/assets/cat4.png"></image></view>
    <view bindtap="navigateToDetail" class="category-item"><image src="/assets/cat5.png"></image></view>
    <view bindtap="navigateToDetail" class="category-item"><image src="/assets/cat6.png"></image></view>
  </view>
</view>

pages/category/category.wxss

复制代码

page {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 10px;
}

.category-item {
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.category-item image {
  width: 60px;
  height: 60px;
}

pages/category/category.js

复制代码

Page({
  data: {},
  navigateToDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    });
  }
});

pages/detail/detail.wxml

复制代码

<view class="container">
  <image src="{{ productImage }}" mode="aspectFill" class="product-image"></image>
  <view class="product-info">
    <view class="product-name">{{ productName }}</view>
    <view class="product-price">{{ productPrice }}</view>
  </view>
</view>

pages/detail/detail.wxss

复制代码

page {
  height: 10