微信小程序入门商店页面代码

以下是一个简单的微信小程序商店页面的代码示例：

<!--index.wxml-->
<view class="container">
  <!--顶部搜索栏-->
  <view class="search-box">
    <input class="search-input" placeholder="搜索商品" bindinput="onInput" />
    <button class="search-btn" bindtap="onSearch">搜索</button>
  </view>
  <!--商品列表-->
  <view class="goods-list">
    <view wx:for="{{goodsList}}" wx:key="index" class="goods-item">
      <image class="goods-img" src="{{item.imgUrl}}" mode="aspectFill" />
      <view class="goods-info">
        <view class="goods-name">{{item.name}}</view>
        <view class="goods-price">¥{{item.price}}</view>
      </view>
      <button class="buy-btn" bindtap="onBuy">购买</button>
    </view>
  </view>
</view>

/*index.wxss*/
.container {
  padding: 20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 30rpx;
  font-size: 28rpx;
}

.search-btn {
  width: 120rpx;
  height: 60rpx;
  background-color: #ff6600;
  color: #fff;
  border: none;
  border-radius: 30rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goods-item {
  width: 45%;
  margin-bottom: 20rpx;
  background-color: #fff;
  box-shadow: 0 0 5rpx #ccc;
  border-radius: 10rpx;
  overflow: hidden;
}

.goods-img {
  width: 100%;
  height: 300rpx;
}

.goods-info {
  padding: 20rpx;
  font-size: 28rpx;
}

.goods-name {
  margin-bottom: 10rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.goods-price {
  color: #ff6600;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.buy-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ff6600;
  color: #fff;
  border: none;
  font-size: 28rpx;
}

//index.js
Page({
  data: {
    goodsList: [
      {
        id: 1,
        name: "商品1",
        imgUrl: "/images/goods1.jpg",
        price: 99.9
      },
      {
        id: 2,
        name: "商品2",
        imgUrl: "/images/goods2.jpg",
        price: 199.9
      },
      {
        id: 3,
        name: "商品3",
        imgUrl: "/images/goods3.jpg",
        price: 299.9
      },
      {
        id: 4,
        name: "商品4",
        imgUrl: "/images/goods4.jpg",
        price: 399.9
      }
    ]
  },
  onInput: function(e) {
    //输入框输入事件处理
  },
  onSearch: function() {
    //搜索按钮点击事件处理
  },
  onBuy: function(e) {
    //购买按钮点击事件处理
    var id = e.currentTarget.dataset.id;
    //根据id进行购买操作
  }
});

这个示例代码包括一个搜索栏和一个商品列表，使用 flex 布局实现商品列表的排列。商品列表使用了 wx:for 指令来循环渲染商品项，每个商品项包括商品图片、商品名称、商品价格和购买按钮。搜索栏和购买按钮的点击事件需要在 js 文件中处理。