商城搭建微信小程序开发及运营

<!-- index.wxml -->
<view class="container">
  <view class="search-bar">
    <input type="text" placeholder="搜索商品" bindinput="onSearchInput" />
  </view>
  <scroll-view scroll-y class="product-list">
    <view wx:for="{{products}}" wx:key="id" class="product-item">
      <image src="{{item.image}}" class="product-image" />
      <view class="product-info">
        <text class="product-name">{{item.name}}</text>
        <text class="product-price">¥{{item.price}}</text>
      </view>
    </view>
  </scroll-view>
</view>

// index.js
Page({
  data: {
    products: []
  },
  onLoad: function () {
    // 模拟从服务器获取商品数据
    this.setData({
      products: [
        { id: 1, name: '商品A', price: 100, image: 'https://example.com/imageA.jpg' },
        { id: 2, name: '商品B', price: 200, image: 'https://example.com/imageB.jpg' }
      ]
    });
  },
  onSearchInput: function (e) {
    // 处理搜索输入
    console.log(e.detail.value);
  }
});